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

[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?

[Tom]

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 🙂

[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

[Tom]

You can add that CSS using a plugin like this: https://wordpress.org/plugins/simple-css/

[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

[Tom]

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.

[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!

[namdy]

hi any update?

[Tom]

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!

[namdy]

Thanks i will take a look

[Klaas Knopp]

Great !

[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?

[Tom]

This should do it 🙂

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

[Martin]

Great, just the job, thanks!

[Tom]

You’re welcome 🙂

[Author]

Posts