Support » Themes and Templates » Creating a container box or page background that is different to the site backgr

  • Hi there all,

    I wish to customize my theme (Mazine WordPress theme) to have a white/plain container box/page background that is different to my site image background. Same as on this website that also uses the Mazine theme : http://greenwaterstore.com/

    My style sheet css in >Appearance>editor has none of the following codes:

    body {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #333333;
    line-height: 1;
    }

    AND

    #container {
    clear: both;
    margin: 0 auto;
    background: #FFFAFA;
    }

    Can I add these myself anywhere in the style sheet css in the admin editor (won’t this affect my site?)? I performed ctrl+F to find these in my editor but 0 results found… 🙁

    The theme designer said that there is a plugin that can do this but he never gave me the name of the plugin and I cannot find any plugin that can solve this.

    My site isn’t online yet as it is still under construction.

    Hoping that someone can help me?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You don’t want to be adding these styles in the Theme’s stylesheets.
    I would suggest either to

    Thread Starter MinnieMouse25

    (@minniemouse25)

    Thank you very much to all!
    I will only be able to try again later today and I’ll let you know how it went then 🙂
    Hoping that it works :/ I cannot believe how effective the forum is – wish I’d tried to post my questions here before!
    Ciao

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    Generically speaking:

    Yep, child theme’s are your friend. Here’s how you get started:

    Create a new directory called wp-content/themes/mazine-child and just put this one style.css file in it for now.

    /*
    Theme Name: Mazine Child Theme
    Author: Self-Help WordPress User
    Template: mazine
    */
    
    @import url("../mazine/style.css");

    Go to your WordPress dashboard and activate that theme called Mazine Child Theme.

    That way you can play with the CSS and not worry about breaking the parent theme. Just put your CSS changes there in wp-content/themes/mazine-child/style.css

    Specifically for your case: That’s a commercial theme and we don’t support those here. Support from the author is part of what you paid for and the author should be a little more helpful about customization of the CSS.

    If the child theme doesn’t work (some themes are just not child friendly) then try that plugin that Andrew suggested.

    Thread Starter MinnieMouse25

    (@minniemouse25)

    Hey,

    It seems that I’ve successfully created a new directory called wp-content/themes/mazine-child and I just put this one style.css file in it for now using my FTP.

    Now, how can I activate that theme called Mazine Child Theme in my WordPress dashboard? I cannot find it 😕

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    That should have worked… Can you paste the new child theme style.css file verbatim here wrapped with the code button? There may be a typo in the one that you have.

    Thread Starter MinnieMouse25

    (@minniemouse25)

    Hey Jan,

    When I edited my new style.css file, I copied exactly what you gave me above (see below)

    /*
    Theme Name: Mazine Child Theme
    Author: Self-Help WordPress User
    Template: mazine
    */
    
    @import url("../mazine/style.css");

    Using FTP, I went to wp-content/themes/ then I created a new folder called mazine-child and then I created a file style.css and I copy pasted the verbatim (wrapped with the code button above).

    I haven’t tried the plugin that Andrew suggested yet.

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    Huh, That ought to have worked.

    Can you confirm that the wp-content/themes/mazine-child directory has the same file level permissions and ownership as the wp-content/themes/mazine directory?

    WordPress should have picked up that new child theme but if it can’t read the directory or style.css file then it would not show up as an installed theme.

    Thread Starter MinnieMouse25

    (@minniemouse25)

    Hi there,

    Thank you for trying to assist!
    I see. I’m trying to check that the wp-content/themes/mazine-child directory has the same file level permissions and ownership as the wp-content/themes/mazine directory with my host.

    How can I verify this?

    The site isn’t activated yet but if you think that you could help by accessing the admin back-end then I don’t mind e-mailing you the login details. Just wish I could get this right. It’s possible since the web developers of http://greenwaterstore.com/ could do it using the same theme which is what troubles me. The theme designers don’t seem to understand what I am talking about :s

    Thread Starter MinnieMouse25

    (@minniemouse25)

    I also installed the plugin that Andrew suggested Use the Custom CSS plugin http://wordpress.org/extend/plugins/my-custom-css/

    I entered the following:

    #container {
    clear: both;
    margin: 0 auto;
    background: #FFFAFA;
    }

    and I pressed the save button.

    I still don’t have the container box on my site’s front-end 🙁

    Thread Starter MinnieMouse25

    (@minniemouse25)

    Using the Custom CSS plugin:

    I’ve now entered the following code:

    #container {
    	clear: both;
    	margin: auto;
    	background: #FFFAFA;
    	padding-right: 20px;
    	padding-left: 20px;
    	border: 10px solid #AAAAAA;
    }

    Seems that it’s having an affect of the front-end since I now have a container box with a border but simply around the menu tabs and not the other content. Should I add something before or after this code in the Custom CSS plugin?

    Still I wonder why the child theme did not work.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Creating a container box or page background that is different to the site backgr’ is closed to new replies.