Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #18181

    I was looking last night for the css styles and classes that control the main content background color (white) but I could not find it. I know the theme settings sets the footer area colors etc but I do not see anywhere to set the main background color?

    Can anyone point me in the direction of the classes and which ones I need to edit. All I want to do is change the body text to white and the main content area background to black.

    Many thanks



    Hi Simon,

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    #wrap_all, #main {
    background-color: #000;
    color: white;

    There are going to be a lot more classes and styles that need to be modified to work with a black background so I would recommend looking into using Firebug for Firefox or just Chrome’s Inspect feature for easily identifying CSS live.

    See: (Purchase code hidden if logged out) -users




    Thanks that worked a treat.

    I know how to use firebug and chromes inspect tool; I’m an ASP.Net developer but trying to get more into PHP/Wordpress for fun/variety.

    One thing I am trying to do now is adjust the menu so that the background is #222 with white text and on rollover the text changes to blue and background to #333. The active menu state class is also eluding me for a menu item! AND I don’t seem to be able to figure out all the styles; the sub menus and mega nav menus are still white with a light grey border.

    Can anyone shed any light on which styles I should be concentrating on to change the menu to darker colours rather than the default white?

    Many thanks in advance.


    The main menu background is handled by:

    .main_menu .avia_mega, .main_menu .avia_mega_div ul{
    background: #222;

    The color:

    .main_menu .avia_mega a {
    color: #555;

    Background color for hover state and active menu item:

    .main_menu .avia_mega>li:hover>a, #top .main_menu .avia_mega > .current-menu-item > a{
    background: #333;
    color: blue;

    Hope that helps :)




    OK I have managed to fix most of my issues and now have a website that looks like this….

    What I would like to do now to finish the menu off is as follows:

    1) Fix the borders that appearing to the left and right of a menu item so they are not shown. How do I do this

    2) Change the style of the Shopping cart drop down menu in the menu bar?

    3) I would also like to reduce the padding on the drop down menus on the main menu systeem so the sub items are not as indented.

    Many thanks for everyone’s help so far!



    Also How do I edit the massive sidebar styls and content? I can not find it in the WP admin area???



    The sidebars are all listed in the Appearance > Widgets in the backend and are populated by widgets that you drag over to the various sidebars defined on the page. I suggest you install two plugins to help you

    1) <— give you the ability to easily style a regular text widget as well as execute php.

    2) <— allows you to specify the pages where you want each widget to be displayed.

    As Devin correctly stated, you will need to use Firebug or Chrome Developer Tools inspector to style your page , then copy the styles and paste them either into you custom.css file or into Quick CSS text area in the backend. This is the process how all websites are customized using CSS whether the underlying language is php, .net, cold fusion or java servlets.

    Please watch this 7 minute video to get the idea how you change the style , and then copy and add it to your custom.css file.

    We would need to see the url of your website in order to look at it through Firebug and give you the css styles for the customizations you listed.



Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Where to change the main content area background color and styles?’ is closed to new replies.