How do I change the background color or add a background image to Studio theme?

Hi,
I hope this is a simple thing... I just can't figure it out. I love the theme and want to use it on a sister site as well... Please Help! Thanks!!

  • Jack Kitterhing

    Hi there Tim,

    It's morning here, 9am now

    After going over the CSS, you'll want to use this coding in your style.css

    #strapline-wrapper {
        background: none repeat scroll 0 0 #ECECEC;
    }
    
    #site-wrapper-home {
        background: none repeat scroll 0 0 #ECECEC;
    }
    
    body {
        background: none repeat scroll 0 0 #ECECEC;
        color: #101010;
    }

    Where the ECECEC is the hex color code, You can find about them here http://html-color-codes.info/

    If you wanted a background image, you could do something like this

    #site-wrapper-home {
        background: url("yourimage.png") repeat scroll 0 0 #ECECEC;
    }

    If that doesn't work try with the full image path, or rather it would be better to try with wp-content/uploads/yourimage.png link first.

    Thank you!

    Kind Regards
    Jack.

  • tim_davis

    Please tell me the file to edit to add a background image and to change background color and what code to use to make it happen.

    So here is what I have found...

    nsbtimes.com/wp-content/themes/studio

    This location has a style.css file that reads...

    /*
    Theme Name: Studio
    Theme Date: 20/09/2010
    Version: 2.2.6
    Theme URI: https://premium.wpmudev.org/
    Description: Studio is a versatile business theme to advertise services or your portfolio in a modern elegant style
    Author: Tammie Lister, S H Mohanjith - WPMU DEV - The WordPress Experts
    Author URI: https://premium.wpmudev.org
    WDP ID: 155
    Tags: buddypress, 2 columns, fixed width, threaded comments, theme options
    Uses BP-Default theme files and styling for BuddyPress components with some customisation for theme.
    Included in theme to allow for own child themes rather than being child of BP-Default
    The CSS, XHTML and design is released under GPL:
    http://www.opensource.org/licenses/gpl-license.php
    */
    /* 188299-1370467838 */

    _______________________________________
    Inside nsbtimes.com/wp-content/themes/studio is another folder called _inc inside that folder is a folder called css. Inside that folder there is a child.css file that reads…

    /* child or custom css */
    /* 188299-1370467838 */

    _______________________________________
    Inside nsbtimes.com/wp-content/themes/studio there is also a folder called themes. Inside that folder there is a folder called studio-child. Inside that folder there is a file called style.css that reads…

    /*
    Theme Name: Studio Child
    Theme Date: 20/09/2010
    Version: 2.1.5
    Theme URI: https://premium.wpmudev.org/
    Description: Studio is a versatile business theme to advertise services or your portfolio in a modern elegant style
    Author: Tammie Lister - WPMU DEV - The WordPress Experts
    Author URI: https://premium.wpmudev.org
    Tags: buddypress, 2 columns, fixed width, threaded comments, theme options
    Uses BP-Default theme files and styling for BuddyPress components with some customisation for theme.
    Included in theme to allow for own child themes rather than being child of BP-Default
    The CSS, XHTML and design is released under GPL:
    http://www.opensource.org/licenses/gpl-license.php
    Template: studio
    */
    /* 188299-1370467838 */

    _______________________________________
    Inside nsbtimes.com/wp-content/themes/studio there is also a folder called themes. Inside that folder there is a folder called studio-child. Inside that folder there is a folder called _inc. inside that folder there is a folder called css. Inside that folder there is a file called child.css that reads…

    /* Here would be your child theme css */
    /*
    You can put any css in this file to keep your child theme seperate from the parent.
    This way you can not touch the css from the parent for better and easy updates.
    An example is included in the text for you to see the format you can use
    */
    /* example */
    /*h1#mystyle{
    border-bottom: #fff;
    }
    */
    /* 188299-1370467838 */
    _______________________________________