[Resolved] background colour for titles in content side bar e.t.c

Home Forums Support background colour for titles in content side bar e.t.c

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #37576
    namdy

    How do you edit the background of of the Titles in Content Primary Side Bar E.t.c

    For example

    Title: GeneratePress
    Generate Press is the Best….

    The ‘GeneratePress’ area can be given say colour blue and the text white, while the content ‘Generate Press is Best….’ is on a white background. For example please take a look at http://soundcheckdemo.wordpress.com/ you will see the way their titles have different colours from their content. This is what I am trying to do , it brings some sort of modern look to the site.

    How can i get this done?

    #37762
    Tom
    Lead Developer
    Lead Developer

    You’ll have to use CSS for this.

    For example, here’s the page title:

    .entry-title {
        background: blue;
        color: white;
        margin: -40px -40px 20px;
        padding: 40px;
    }

    You’ll have to adjust the 40px to whatever you have set in the Content padding area of the Spacing addon. 40px is default.

    Then for the widget titles:

    .widget-title {
        background: blue;
        color: white;
        margin: -40px -40px 20px;
        padding: 40px;
    }

    Hope this helps 🙂

    #37968
    namdy

    Thanks

    but if you could tell me what line on the css to find it that will help so i dont have to start scanning all those lines of code in the css file

    #37969
    Tom
    Lead Developer
    Lead Developer
    #38024
    namdy

    Thanks for your help but i am sill stuck. I think sometimes when we customers ask these questions maybe we are wrong to be expecting a very simple answer.

    Let me tell you the sort of answer I was looking for.

    Go to to css file in the theme folder, go to line 1234, and add this code “…..” (change the colour to what you want)

    Thats the sort of simple answer I was expecting.

    I have looked at the plugin and I am so lost. and makes me ask so many more questions.
    1. it says its only for wordpress.org websites
    2. when you install it i says update css, it does not say if you need to put the whole css or just the code you mentioned…
    3. As you can see this option is just making either ask you more questions or ask the developers of that plugin more questions…

    When all i want to do is add colour to the background title… not make the site transform to optimus prime…. 🙂

    If you could provide me the sort of answer I suggested above, I will appreciate it. I am sorry I am not that techy and will really appreciate yous support

    Thanks once again

    #38025
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Sorry about that – sometimes I go too fast.

    The answer is actually much simpler than that – no need to find certain lines etc..

    Once the plugin I suggested is installed (Plugins > Add New > Search for: Simple Custom CSS) – install and activate.

    Go to “Appearance > Custom CSS”.

    In there, go to the last line, and paste the code I provided in my first reply.

    Update, and you’re good to go.

    #38417
    namdy

    Thanks.. that was a short brilliant and effective answer!

    Now some more questions

    How do you add curvature so that the boxes of the widgets and posts are curved? seehttp://soundcheckdemo.wordpress.com/
    How do you make theem slightly transparent?: http://soundcheckdemo.wordpress.com/
    How do you give a light to dark shade on the post section: see http://soundcheckdemo.wordpress.com/

    Really appreciate your help!
    Generatepress rocks!

    #38549
    namdy

    hi any update?

    #38551
    Tom
    Lead Developer
    Lead Developer

    It’s not easy to match up rounded corners with two different backgrounds (widget title and widget background).

    /* Widget title top rounded border - may need to adjust to match border radius of widget */
    .widget-title {
          -webkit-border-top-left-radius: 10px;
          -webkit-border-top-right-radius: 10px;
          -moz-border-radius-topleft: 10px;
          -moz-border-radius-topright: 10px;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
    }
    
    /* Widget rounded corners */
    .widget {
          -moz-border-radius: 10px;
          -webkit-border-radius: 10px;
          border-radius: 10px;
    }
    
    /* Content rounded corners */
    .inside-article {
          -moz-border-radius: 10px;
          -webkit-border-radius: 10px;
          border-radius: 10px;
    }

    As for the background color gradient – you would need to create the gradient in Photoshop, or something similar, and then add it as a background using CSS or the Backgrounds addon. Make sure to select “repeat-x”.

    Thanks!

    #39175
    namdy

    Thanks i will take a look

    #80407
    Klaas Knopp

    Great !

    #81107
    Martin

    Got this code working on the site now, the main content now has rounded corners, but the sidebar still has square corners – what do I need to tweak?

    #81218
    Tom
    Lead Developer
    Lead Developer

    This should do it 🙂

    .inside-right-sidebar {
          -moz-border-radius: 10px;
          -webkit-border-radius: 10px;
          border-radius: 10px;
    }
    #81370
    Martin

    Great, just the job, thanks!

    #81464
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.