New to the community? Start here

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!!

Wed, 10 Jul 2013 4:55:23
  • Jack Kitterhing
    • Code Norris

    Hi there @tim_davis

    I hope you are well today, to change the background color, you can go to wordpress admin > appearance > custom styling, choose the color and save :slight_smile:

    If you want a background image that’s a bit more complicated, let me know if you do, I’m here to help :slight_smile:

    Thank you!

    Kind Regards

    Jack.

  • tim_davis
    • WPMU DEV Initiate

    I would prefer a BG image… so lets try to figure that out… I hope it is no trouble…

    I looked in the wordpress admin > appearance > custom styling and all I see there are…

    Layout Colors

    Choose your feature wrapper background color

    Choose your header background color

    I don’t know if I am missing something??

  • Jack Kitterhing
    • Code Norris

    Hi there Tim,

    It’s morning here, 9am now :slight_smile:

    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/ :slight_smile:

    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
    • WPMU DEV Initiate

    I still need help with this issue… I have downloaded the site and have noticed child themes and many style.css files… Is the problem in knowing what file to add the code to? Should I try adding it to each file one at a time and check to see if it works? I just need to get past this one thing and move forward or if it is not possible then I can move on to a different theme… Please help!

  • tim_davis
    • WPMU DEV Initiate

    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://wpmudev.com/

    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://wpmudev.com

    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://wpmudev.com/

    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://wpmudev.com

    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 */

    _______________________________________

  • tim_davis
    • WPMU DEV Initiate

    OK… I found the file to edit…

    wp-content/themes/studio/_inc/css/studio-colours.css

    I have managed to set a bg image… however… the page and post bodies have no color so the bg image is visible and the text is unreadable…

    So my next question is… how do I add color to the pages and post bodies?

    Any help would be most appreciated!

  • Jack Kitterhing
    • Code Norris

    Hi there Tim,

    I hope you are well today and sorry about the extreme delay with my reply.

    Thanks for the additional information and I’m glad that all is well, if I can be of any further assistance please don’t hesitate to ask :slight_smile:

    Thank you! And again sorry about the delay.

    Kind Regards

    Jack.