Background Colour in Sidebar

[rogerp]

I am experimenting with blocks of colour on my site and have discovered the background css tag

What I want to do is create a text widget and have it a block of colour

then created anohter text widget but have that as a different block of colour

All I can seem to do is block the entire sidebar in colour and not specific text widgets.

ideally I want the title to be a shade darker than the text element of the widget

Anybody any ideas?

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

http://www.rogerlapin.co.uk

[photastic]

you should be able to target the widget's seperately via their ID.

which widgets are you talking about? Then I can direct you a bit better (I hope 😉 )

---

Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topics

[rogerp]

Hi, I have found this and if you put it in the body of the text widget it colours the body but I want to do the title as well?

<div style="padding:12px;background-color:#HEX HERE;line-height:1.4;">
TEXT HERE
</div>

I have read you can target widgets by their ID

The text widget I want to target is the top one which is text-48 (Get in Touch)

I assume I need to put some custom css that targets text-48 with the background options

What I am not sure about is how to target the title?

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[rogerp]

I have found this info from another forum, but am struggling a bit now.

#text-11

example to edit the background color:

#text-11 { background: #123edf; }

and just the widget title:

#text-11 .widget-title { background: #123edf; }

When I search in my style.css I cannot find text-48

So assume I have to put this in as an extra attribute somewhere?

Just not sure where

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[photastic]

you won't find it in your default style.css because it's an element you created yourself 🙂

you need to add the extra style option at the bottom of your styles.css

I can't seem to find text-48 on your homepage but I do find text-46 (i'll take that as an example)

add this code to your style.css and change the id accordingly then :

for the widget itself :

div#text-46 {
background : red; //* or some HEX combo like #4F3245
}

to target the title of that same widget :

div#text-46 h4.widget-title {
font-size: 16px; //* and whatever textstyles you want to add :)
}

I hope you get the picture like this 🙂

---

Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topics

[rogerp]

Thanks,

The text-48 element was on the sidebar on all the other pages on my site

e.g http://www.rogerlapin.co.uk/magician-hampshire

I am now getting it - thanks so much for your help!

I dropped this under the font colour section

#text-48 {
background: #f29a6a;
color: #ffffff
}

Does it actually matter where you put it?

Can't get the title to work but am sure I am only a few clicks away!

Thanks again

Roger

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[photastic]

good to hear you're getting the hang out of it 🙂

best put the code at the bottom to make sure it comes through... css rules are applied from top to bottom but the bottom rules are finally applied (hence Cascading Style Sheets 😉 )

If there's anything else, just holla 🙂

---

Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topics

[rogerp]

Ok Thanks cooking on gas now!

Where would I add the padding to this, I want this to affect all the text widgets

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[photastic]

if you want padding to all text widgets, add this code :

div.widget_text {
padding: 10px; //* this adds 10px to all sides, left, top, bottom, right
padding-right: 10px; //* this adds only 10px padding to the right side and same goes for padding-left, -top, bottom
}

---

Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topics

[rogerp]

Can't get this last bit to work 🙁

It looks like the font is being controlled by h4.widgettitle

If I do your suggestion above it padds the colour on the title..

I want to keep the colour bar across the top and pad the text within it.

I will keep firebugging!

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[photastic]

div.textwidget {
padding: 10px; //* this adds 10px to all sides, left, top, bottom, right
padding-right: 10px; //* this adds only 10px padding to the right side and same goes for padding-left, -top, bottom
}

this should pad only the inside text...

---

Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topics

[rogerp]

Inch by Inch we are getting there!

One more sir if you don't mind...

How do I pad the widget title text as well?

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[rogerp]

Cracked it!

I was missing a ;

Thanks so much for your help, something that has been puzzling me all evening is now simple

Roger

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[photastic]

great you figured it out Roger 🙂

You can do real magic (pun intended 😉 ) with CSS 🙂

Make sure you label the topic as "Resolved" if you're done 😉

---

Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topics

[Author]

Posts