CSS customisation to change pages, footer colour and fonts
-
Hi,
I have purchased CSS customisation for my wordpress.com website http://www.doubleyouweddings.com, and need help with a few things I can’t seem to alter…Hope someone can help me.On the Bueno theme, I need to change the colour of the footer from purple to a china blue. I also need to change ALL header fonts on the widgets etc to my custom font – Carbon Type. I also need to change the content font colour to black. I also need to change the colour of the RSS feed button to black, it’s currently purple.
Am I able to change the background colour of my facebook widget etc to the same blue as in the website – I’m currently only given ‘light’ or ‘dark’ as options.I know there’s a lot above, but I really hope you can help me.
Thank you
Claire
Blog url: http://doubleyouweddings.wordpress.com/ -
Footer widget area background.
#extended-footer { background-color: #23D9E9; }Widget font.
.widget h3 { font-family: carbon-type; }Main font color
body { color: #000000; }RSS feed icon and text color.
#pagenav li.rss a { background: url("http://s0.wp.com/wp-content/themes/pub/bueno/styles/grey/ico-rss.png?m=1391150862i") no-repeat scroll right 4px transparent; color: #000000; }Facebook likebox background
.widget_facebook_likebox iframe { background-color: #23D9E9 !important; } -
I’ll offer these as well.
Sidebar links
`.widget_recent_comments li a, .widget_twitter a {
color: #3B0466 !important;
}`Links in general
a:link, a:visited { color: #3B0466; }Search button background
input.submit { background-color: #3B0466; } -
Awesome, Sacredpath, you are a star, thank you!
I copied/pasted and most of it changed instantly. The only exception is the RSS widget colour (is still purple) and so are the titles of the sidebar widgets. I tried the other ones you offered up, but they didnt do anythign – am I doing something wrong? What do the ones above that you offered do?
Thanks again :) -
Alright, we’ll force it with an important attribute. On the RSS bit I gave above, replace it with this.
#pagenav li.rss a { background: url("http://s0.wp.com/wp-content/themes/pub/bueno/styles/grey/ico-rss.png?m=1391150862i") no-repeat scroll right 4px transparent !important; color: #000000; }On the widget titles you mentioned changing the font, but not the color. What color did you want the widget titles and I suspect the other links as well?
-
Change the widget h3 stuff I gave above to this.
.widget h3, .widget h3 a { color: #404040 !important; font-family: carbon-type; }Find this section in your CSS and add the !important attribute to the color declaration.
.widget ul li a:link, .widget ul li a:visited { color: #000000 !important; font-family: carbon-type; } -
Thanks Sacred Path, that’s the RSS sorted out. :)
Sorry, I mustn’t have mentioned the font colour for widgets…which I’d like to be black Carbon Type. I tried a few of the above in the CSS but it converted the widget font and rss back to how it was…so I’m happy to leave them out.
If you could help on changing the widget font from purple to black carbon type, that would be great. And is there any way to change the widget divider lines (between the widget title and the widget body) to #23D9E9 too so it all ties in? I promise I’ll leave you alone soon!
Thanks
-
Something is weird here since the following turns the widget titles, both static and link, to black for me. I had a dark grey in there in the code above since that matched the color of “past posts.”
The second selector below turns the links within the widget black.
.widget h3, .widget h3 a { color: #000000 !important; } .widget ul li a:link, .widget ul li a:visited { color: #000000 !important; }Since you have none of your CSS active on the site, it is very difficult to see what is going on. All the above works just fine for me when I edit your CSS in realtime with the Firebug add-on in Firefox.
If you are using the “preview” function to see the changes, sometimes you have to force refresh the preview page to see the changes. I’m seriously not sure where to go from here.
-
The bottom borders on the twitter widget entries should change with the following.
.widget_recent_comments li, .widget_twitter li { border-bottom: 1px solid #23D9E9 !important; }This would change the black lines below the widget titles if you also want to change those.
.widget h3 { border-bottom: 1px solid #23D9E9 !important; } -
Make sure that you are adding all of the above at the very bottom of whatever CSS you now have in the CSS edit window so that it will override any like stuff that might be above it in your CSS.
-
-
@lovedlook, on WordPress.com, you can copy CSS code into the Appearance → Custom Design → CSS page. To save the CSS, you need the Custom Design upgrade which you can read more about at http://en.support.wordpress.com/custom-design/
-
@Sacredpath – you are the Don of Greatness and Wisdom – I followed your advice again, replacing stuff, and making sure it was at the bottom, and it’s worked!
Thank you again so much for your speedy and helpful responses :) -
-
-
1. Do you have the Custom Design Upgrade?
2. Have you uploaded the logo to your media library? If so, please give us a link to that image.
3. Where did you want to put the logo?
4. Are you talking about this site http://yourkattankudy.com/ ?
- The topic ‘CSS customisation to change pages, footer colour and fonts’ is closed to new replies.
WordPress.com Forums 