Community Forums › Forums › Archived Forums › Design Tips and Tricks › Background Colour in Sidebar
- This topic has 13 replies, 2 voices, and was last updated 10 years, 8 months ago by photastic.
-
AuthorPosts
-
August 20, 2013 at 3:18 pm #57729rogerpParticipant
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 FutureAugust 20, 2013 at 3:33 pm #57734photasticMemberyou 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 topicsAugust 20, 2013 at 3:43 pm #57746rogerpParticipantHi, 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 FutureAugust 20, 2013 at 3:46 pm #57757rogerpParticipantI 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 FutureAugust 20, 2013 at 3:54 pm #57761photasticMemberyou 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 topicsAugust 20, 2013 at 3:59 pm #57762rogerpParticipantThanks,
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 FutureAugust 20, 2013 at 4:05 pm #57769photasticMembergood 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 topicsAugust 20, 2013 at 4:14 pm #57771rogerpParticipantOk 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 FutureAugust 20, 2013 at 4:17 pm #57775photasticMemberif 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 topicsAugust 20, 2013 at 4:33 pm #57784rogerpParticipantCan'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 FutureAugust 20, 2013 at 4:43 pm #57791photasticMemberdiv.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 topicsAugust 20, 2013 at 5:05 pm #57795rogerpParticipantInch 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 FutureAugust 20, 2013 at 5:24 pm #57800rogerpParticipantCracked 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 FutureAugust 21, 2013 at 2:09 am #57857photasticMembergreat 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 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.