Modifying CSS in the LightWord theme for WordPress

The theme that I am currently using on my website, LightWord, is generally very nice and I love it.  However, there are a few issues with it, luckily, LightWord offers a nice way to correct some of the formatting issues without actually having to update the theme itself through the LightWord Settings page.

To access the LightWord Settings page, go to the Appearance -> LightWord Settings choice on the left side menu in the WordPress admin dashboard.

In this page, scroll down to the Custom CSS settings text box.  At this text box you can enter any additional CSS and it will be inserted into every page on your blog.  I’ve used this to fix a few issues that I have with LightWord.  First, I wanted my blog title to appear in a different color.  I changed this, with the following bit of CSS:

h1#logo,h1#logo a{color:#FF6600;}

Secondly, I wanted a different background; which was solved with this snippet:

body {background:url(‘wp-content/themes/k3290370.jpg’) repeat;}

Lastly, the drop down menu background was too small for some of the titles it was displaying so it would cause them to overflow.  I did a quick change that expanded the size of the menu drop down background, like this:

#front_menu ul {width:300px;}

Of course, you can override all the CSS you want within this text box, so if you wanted to change the color of links or whatever, you can do it right here without modifying the actual LightWord theme.  In addition to the Custom CSS, the settings page also allows you to add in additional scripts, headers, and footers.

4 thoughts on “Modifying CSS in the LightWord theme for WordPress

  1. Hi, I was wondering how do you increase the width of your content area? I have been trying to tweak the code but to no avail. Many thanks!

  2. In LightWord (or any other theme), I’d start by looking at the CSS files and see if there is a property to modify that specifies the width of the content area. Lightword itself has a wide and narrow view that you can toggle between in the settings. I’m currently (on 5/10/11) using the wider version.

  3. I would like to change the color of the bar that has home. I can’t find any property on the css to change the color nor if they are formed by .png. Any help is greatly appreciated.

  4. Look in the stylesheet css file under the front menu or layout section. Also, if you use FireFox and the WebDeveloper tool bar you can inspect the element and figure out what CSS class it is using.

Leave a Reply

Your email address will not be published. Required fields are marked *