WordPress.org

Forums

Singl
[resolved] [closed] White box behind content on pages (13 posts)

  1. thejulycontrary
    Member
    Posted 11 months ago #

    Without having to go through and change everything listed as Background: #xxx to transparent, how can I target the boxes behind content and make them transparent? As it stands now, I have an image with a white box behind it on the front page and I would like the background image to show through instead.

    I have done it previously by the above mentioned means but I would like to know which area of CSS to specifically change. Any help would be appreciated!

    Stephen,
    http://www.TheJulyContrary.com

  2. BabyFaceWeb
    Member
    Posted 11 months ago #

    Hi TheJuly,
    this one is easy. Here is your CSS solution!

    .page-header, .page-content, .hentry {
    background: transparent;
    }

    Add this to your custom.css area or wherever your child theme custom css style sheet is located.

    Please let me know if you need any further help?

    Best!
    Steve

  3. thejulycontrary
    Member
    Posted 11 months ago #

    Trial and error, I found it. The background remark.

    .page-header,
    .page-content,
    .hentry {
    	position: relative;
    	width: 720px;
    	margin: 0 auto 40px auto;
    	padding: 40px 40px 20px 40px;
    	background: transparent;
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing:    border-box;
    	box-sizing:         border-box;
    }
  4. pandoraslunchbox
    Member
    Posted 9 months ago #

    Hello, I think you've almost answered my question too....

    but, could anyone please tell me which line of CSS in the SINGL stylesheet to look for the above code?

    http://pandoraslunchbox.eu/

    I can't find any mention of page-header

  5. pandoraslunchbox - you'll find it at line 858 of style.css in Singl.

    I noticed that you've copied the entire parent theme stylesheet into your child theme's style.css, in addition to importing it with the @import url("../singl/style.css"); statement.

    Importing the stylesheet already brings all the parent theme's styles into your child theme, so you should only be placing those specific styles you intend to override in your stylesheet, not coping over the whole stylesheet. :-)

    If you have any questions about how this works, just let me know.

  6. pandoraslunchbox
    Member
    Posted 9 months ago #

    Hello Kathryn, thanks for the tip. I got rid of the unnecessary code...it seems to work fine, but I still can't get the fix for the transparent page content background.

    I pasted

    .page-header, .page-content, .hentry {
    background: transparent;
    }

    into the child-theme style sheet, but nothing changes. I'm off to try and read more about changing child themes! :)

  7. pandoraslunchbox
    Member
    Posted 9 months ago #

    OK....3 hours later

    I think I have it;there were two issues. Using FIREBUG really helped me to see it.

    1. paste your new CSS IN-BETWEEN the *//* marks

    like this......
    */@import url('../singl/style.css');/*
    }
    ---- */.page-header, .page-content, .hentry {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    box-sizing: border-box;
    margin: 0 auto 40px;
    padding: 40px 40px 20px;
    position: relative;
    width: 720px;
    }
    ---------------------------/*

    and...

    2 the colour value had to be changed from '#fff' to ' rgba(0, 0, 0, 0)'

    I think there should be a link from WORDPRESS to a very simple (baby-talk) CSS for beginners. With instructions for how to find code for the most common changes and where to replace it EXACTLY into the child stylesheet. I found the wordpress tutoriao pages very technical and mostly confusing.

  8. pandoraslunchbox
    Member
    Posted 9 months ago #

  9. Firebug is amazing, isn't it? Glad you're all set and glad you found a good tutorial.

    If you want to learn more about making CSS changes to your site, you might like these tutorials from WordPress.com. They don't talk about child themes since that's not something you can do on WordPress.com, but the CSS information is all relevant and you might find it helpful.

    https://dailypost.wordpress.com/2013/07/25/css-selectors/
    http://dailypost.wordpress.com/2013/06/21/css-intro/
    http://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
    http://en.support.wordpress.com/custom-design/css-basics/

    These child-theme tutorials may also be helpful:

    http://op111.net/53/
    http://vimeo.com/39023468

    I took a look at your child theme's stylesheet and just wanted to point out a couple of things:

    /*
    Theme Name: Singl Child
    Theme URI: http://pandoraslunchbox.eu/themes/singl
    Description: Singl Child Theme
    Author: Jo Blick
    Author URI: http://pandoraslunchbox.eu
    Template: singl
    Version: 1.0.0
    */
    @import url('../singl/style.css');
    /*
    }
    ----------------------------------- */.page-header, .page-content, .hentry {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        box-sizing: border-box;
        margin: 0 auto 40px;
        padding: 40px 40px 20px;
        position: relative;
        width: 720px;
    }
    /* Remove Background & Header Page ID=89 */
    
    body.page-id-89 {background: #ffffff;}
    
    body.page-id-89 div#imagecontainer {display: none;}
    ----------------------------------- */

    The characters /* indicate the beginning of a code comment, while */ indicates the end of a comment. Anything in between these tags does not get applied to your site.

    So these lines can be removed:

    /*
    }
    ----------------------------------- */

    That's just below
    @import url('../singl/style.css');

    This line at the end can also be removed as it's not doing anything, it's a stray closing comment tag.

    ----------------------------------- */

    Good luck with your theme.

  10. pandoraslunchbox
    Member
    Posted 9 months ago #

    OK have tidied it up...Thanks again Kathryn, I shall no doubt be using the links to look before needing to ask more questions. This forum is great and I'm definitely carrying on trying to use wordpress.org

  11. pandoraslunchbox
    Member
    Posted 9 months ago #

    agggrrrrh! not sure what happened. My singl child-theme suddenly started shifting all it's layout to left margins after I tried to change the colour of the site title font.

    I returned the child CSS stylesheet to a previously working one, after disabling all plugins, reloading the original Singl theme,(which I did NOT touch, as I do not go there!) and reactivating plugins.

    this is the previously working stylesheet

    can anyone spot the hidden atom bomb please?

    /*
    Theme Name: Singl Child
    Theme URI: http://pandoraslunchbox.eu/themes/singl
    Description: Singl Child Theme
    Author: Jo Blick
    Author URI: http://pandoraslunchbox.eu
    Template: singl
    Version: 1.0.0
    */
    @import url('../singl/style.css');
    /*
    .page-header, .page-content, .hentry {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    box-sizing: border-box;
    margin: 0 auto 40px;
    padding: 40px 40px 20px;
    position: relative;
    width: 720px;
    }
    /* Remove Background & Header Page ID=89 */

    body.page-id-89 {background: #ffffff;}

    body.page-id-89 div#imagecontainer {display: none;}
    .page-id-89 .site-branding, .page-id-21 .site-branding, .page-id-38 .site-branding
    { display: none;}

  12. You still have a stray comment tag after your import line here:

    @import url('../singl/style.css');
    /*

    Try removing this bit: /*

  13. I'm going to close this thread since the original poster's issue is resolved and pandoraslunchbox started a new thread:

    http://wordpress.org/support/topic/singl-child-theme-css-suddenly-ineffective

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.