Separate style sheet for executive theme inside pages?

Community Forums Forums Design Tips and Tricks Separate style sheet for executive theme inside pages?

This topic is: resolved

This topic contains 10 replies, has 2 voices, and was last updated by  zmel 1 year, 7 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #7603

    zmel
    Participant
    Post count: 31

    I have customized home.php and am using a scaleable background image in the CSS. But I want a different scaleable background image for the inside pages. Is it possible to create a second style.css doc and attach it to the rest of the site (i.e. not the home page) with that information? I am thinking style-inside.css and linking it in header…? Thanks for your suggestions.

    #7660

    Susan Nelson
    Participant
    Post count: 207

    I would just use the body class to specify a different background for the other pages.  So, something like this:

    .about body {
    background: url(images/yourphoto.png);
    }

    You can assign custom body classes for each page under the section where you can select your page layout (2 or 3 columns).  Or you can simply view the source code and find a line similar to this near the top:

    <body class=”page page-id-12 page-template-default logged-in header-full-width header-image full-width-content”>

    In this case, you would use .page-id-12.  Obviously, your page id number will be different for each page.


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #13022

    zmel
    Participant
    Post count: 31

    Thank you for the detailed instructions! I added this to my css:

    .inside-bg body {
    background: url(images/bg-inside1.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    …uploaded css and image, and went into Edit/Page and added

    .inside-bg

    to the custom body class field.

    And nothing happened :o(

    Could it be because I have the home page bg image in the #wrap?

    #13023

    Susan Nelson
    Participant
    Post count: 207

    Can you post a link to your site?


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #13024

    zmel
    Participant
    Post count: 31

    I don’t want to list a live link in the forum to a dev site. Can I screen shot something?

    #13025

    Susan Nelson
    Participant
    Post count: 207

    No, a screenshot won’t help.  I would need to see the code in order to troubleshoot the issue.


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #13029

    zmel
    Participant
    Post count: 31

    OK, here it is:

    http://dev3.dizzysushi.com/

    #13044

    Susan Nelson
    Participant
    Post count: 207

    Okay, I see what’s going on.  Yes, it’s not working because the image is placed on the #wrap.  So, in this case, you would do something like…

    .inside-bg #wrap

    Let me know if that doesn’t work.


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #14225

    zmel
    Participant
    Post count: 31

    That DOES work. The next level would be for it to work for ALL posts without having to include it in every single post as a custom body class. Is that possible? Thank you so much for your help.

    #14258

    Susan Nelson
    Participant
    Post count: 207

    Are all blog posts going to share the same background?  And will all pages share the same?  If yes, you could try something like .single #wrap (for single blog posts) or .page #wrap (for all pages).

     


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #19553

    zmel
    Participant
    Post count: 31

    That final style does work without having to add it when creating every post or page. Neat!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.