Support » Themes and Templates » Using Calotropis and want to change background color

  • How do I change the entire background to #000044 midnight blue?

    I was able to change part of the frame but not the boxes inside the frame. They’re still black.


    I think I have to go into the CSS somewhere but I haven’t been able to figure it out.

    Thanks for any and all help.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Hi OzManic,

    Make sure you have created a Child Theme before you make changes to the theme. On line 28 of your style sheet (style.css) look for the following:

    #contentwrap {
    background-color: #060603;
    border: 1px solid #333333;

    Adjust the hex code for background-color as you like.

    I inspected your site’s CSS with the Firebug add-on in Firefox to pinpoint that CSS code for your site.

    Hope this helps!

    ChristiNi, this is so brilliant! Thank you.

    Question: what if I don’t create a child theme?

    Also, last night I noticed that the theme has a “Custom CSS” box that I loaded some code into and it worked. Someone couldn’t get his widget section colored properly and I used the code that was successful for him.

    This is what I loaded:

    .sidebar .widgetwrap {background-color: #1b1387;}
    .sidebar .widget {background-color: #1b387;}

    Might I be able to load your code straight in?

    Hi OzManic,

    You’re welcome. I’m happy to help!

    If you’re theme allows you to insert custom code, then you should be good to go without the Child Theme. Just don’t make changes to the style.css file itself (those changes could be overwritten when your theme is updated in the future).

    You should be able to just add that rule to the Custom CSS box (of course adjust the hex color codes). The code I showed you above is what your style sheet currently has.


    I tried this and the content areas are still black.

    .sidebar .widgetwrap {background-color: #1b1387;}
    .sidebar .widget {background-color: #1b387;}
    .contentwrap {background-color: #060603;border: 1px solid #333333;}

    What should I adjust?



    Forum Moderator

    Try using Firefox with the Firebug add-on for this kind of CSS work.

    Hi OzManic,

    Try changing that last line to start with #contentwrap instead of .contentwrap (that’s how you select an ID instead of a class in CSS).

    Hope this helps!

    1. I did install Firebug and am poking around to make sense of it.

    2. I did change the code to:
    #contentwrap instead of .contentwrap

    Interesting. More of the background is blue, and there are still black sections.

    This is cool.

    I used Firebug to change the rest of the areas blue. However, the changes only took on the home page.

    I’m glad you’re making progress thanks to Firebug. Isn’t it a great tool? Keep looking at your pages, it sounds like your other pages may have different CSS rules or selectors that you can find with Firebug.


    ChristiNi and esmi THANK YOU both so much!

    I’m already adjusting some things that have been bugging me for a while now, e.g., the font size and color in some areas.

    Can’t thank you enough!



    I am using Calotrpis 1.5.2. When I choose three or four column excerpt for Front Page the last column is incomplete, I mean there is a gap of one / two posts in the last column. There is no gap when I choose five column. I think this is something to do with the no. of excerpts appearing in the Frontpage which by default is 10. Can this be changed to remove the blank spaces if I choose three or four cloumn excerpts.

    I love this theme for its various features and look. However, the theme’s forum is not working. Is this theme presently alive and kicking?

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Using Calotropis and want to change background color’ is closed to new replies.