Useful WooThemes Whitelight CSS Tweaks

Following on from our two earlier posts, CSS Tweaks for WooThemes Placeholder and 16 Useful WooThemes Canvas CSS Tweaks we now have another collection of useful CSS Tweaks for another WooThemes WordPress theme.

This third instalment is for the WooThemes Whitelight business theme.

We used WooThemes Whitelight as the basis for this project, which worked out to be more of a blog than a business theme.  The full-page scroller of WooThemes Whitelight was the reason we used this theme – as you will agree from the project, the campaign is very clear.

So in no particular order – here are our CSS Tweaks for this theme.

Whitelight CSS Tweak #1

Removes the text decoration (the underline) on links.

a:link, a:visited  { text-decoration: none !important;}

Whitelight CSS Tweak #2

Removes the text decoration (the underline) on links when the mouse is hovered.

a:hover { text-decoration: underline! important; }

Whitelight CSS Tweak #3

Raises the search box in on the header section by 75 pixels

#header .search_main .searchform  {margin-top: -75px;}

Whitelight CSS Tweak #4

Styles the text on the main page image scroller.

#featured article header h1, #featured article header h1 a {color: #efefef !important;}

Whitelight CSS Tweak #5

Styles the the colour of Twitter Name on the Twitter Widget

.widget_woodojo_twitterprofile h4 {color:#dddddd;}

Whitelight CSS Tweak #6

By default the Page H1 Header on Whitelight is quote small – this tweak increases the font-size and adds bottom padding.

.page header h1 {font-size:32px!important; padding-bottom: 0.75em !important; }

Whitelight CSS Tweak #7

Sets the colour of the line immediately underneath the header

#header { border-bottom: 1px solid #CCCCCC;}

Whitelight CSS Tweak #8

Drops the main navigation by 17 pixels – change to any value that works for your site

#navigation .nav li a {margin-top: 17px;}

Whitelight CSS Tweak #9

Styles the colour of the main menu text

#navigation, #navigation .nav a {color:#000000 !important;}

Whitelight CSS Tweak #10

Styles the colour of the top nav text

#top .nav a {color: #FFFFFF !important;} /* sets colour of top nav text */

Whitelight CSS Tweak #11

Set main nav item background colour

#navigation .nav li:hover > a { text-decoration: none !important; background: none
repeat scroll 0 0 #cccccc}

Whitelight CSS Tweak #12

Set main nav item child background colour

#navigation .nav li ul li:hover > a { text-decoration: none !important; background:
none repeat scroll 0 0 #c0c0c0}

Whitelight CSS Tweak #13

Set child nav item container colour

#navigation .nav li ul {background: none repeat scroll 0 0 #cccccc;}

Whitelight CSS Tweak #14

Set main nav active and hover item background colour

.nav li.current_page_item > a, .nav li.current_page_parent > a,
.nav li.current-menu-ancestor > a, .nav li.current-cat > a, 
.nav li.current-menu-item > a {background: none repeat scroll 0 0
 #c0c0c0 !important;}

Whitelight CSS Tweak #15

Set main nav child sibling background colour

#wrapper .nav li.current_page_item a, #wrapper .nav li.current_page_parent 
a, #wrapper .nav li.current-menu-ancestor a, #wrapper .nav li.current-cat 
a, #wrapper .nav li.li.current-menu-item a { background: none repeat 
scroll 0 0 #cccccc;}

Whitelight CSS Tweak #16

Removes the lines above the social icons in the widget

#wrapper #footer-widgets .widget_woo_subscribe #connect .social {border-top: 
0px dotted #88C6F5;}

Whitelight CSS Tweak #17

Removes padding in the Subscribe & Connect widget */

.widget_woo_subscribe #connect .social { margin-top: 0; padding-top: 0;}

Whitelight CSS Tweak #18

Floats the social icons left

#connect .social.fr { float: left;}

Whitelight CSS Tweak #19

Set the footer link text colour

#footer a {color: #dddddd !important;}

Whitelight CSS Tweak #20

Set footer text colour

#footer {color: #999999 !important;}

Whitelight CSS Tweak #21

Set footer widget text colour

#footer-widgets .widget { color: #eeeeee !important;}

Whitelight CSS Tweak #22

Set footer widget link text colour

#footer-widgets .widget a { color: #99DDFF !important;}

Whitelight CSS Tweak #23

On the homepage, hides the Features “Display more” icon and text

.home-section header a.more { display: none; }
Share

10 Responses to Useful WooThemes Whitelight CSS Tweaks

  • Lesley

    Great list of very helpful Whitelight CSS tweaks for those of us still known as newbies! Thank you thank you for your generosity.

    • The Mayne Design

      Thank you Lesley for your praise and hope they saved you some time with your development.

      Best regards,
      Amanda

  • Mike

    It would be nice to know how to remove the whitelight heaqder text from this theme.

    • The Mayne Design

      Hi Mike – can you give me the URL of the website you wish to hide the text from?  Are you trying to hide the site title & description?  Thanks! Amanda.

  • rocker

    Hello Mayne Design

    These are neat, and useful. I’m still learning this stuff, slowly but surely.

    If I wanted to change the text color in my header, would I do something like:

    #header {color:#FBF5EF;}

    I have implemented this, but hasn’t affected the text color at all. Or is it not even possible to change the text color in the header?

    Many thanks

    • The Mayne Design

      Hi rocker,

      I am unclear whether this is a Whitelight tweak, or a Canvas tweak? This comment is posted in the Whitelight post but the site that your posts links to is running Canvas.

      Please can you give me the link to the website you are having difficulty with?

      Thanks!

  • Kevin

    Hi
    Thanks for your very useful tweaks. I wish to remove all pages titles but can only remove them individually. For example to remove page 39 I use the following
    .page-id-39 header h1 {
    display: none;
    }
    Can you help please
    Thanks

    • Amanda Mayne

      Hi Kevin,

      Thank you for the question, you can remove all page titles with this code:

      header h1 {
      display: none;
      }

      Let me know if it works for you!

      Amanda

      • Kevin

        Hi Amanda
        Just to let you know that after removing the unwanted custom css the above worked.
        I have asked a few so called experts on this problem and you are the only one that has come up with the solution so thank you so much. Previously every time I added a page I would have to use custom code for that specific page to remove the page title so you have saved me a lot of unnecessary work
        Brilliant!
        Thanks again Kevin

        • Amanda Mayne

          Hi Kevin,

          Thank you for the update & really pleased that our little chat sorted out the css problems which then allowed you to modify your site.

          Wishing you all the success with your website!

          Amanda