WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Applying background image to just one landing page in Bueno (18 posts)

  1. KHartjen
    Member
    Posted 1 year ago #

    My first post here. I have added a custom landing page template to my Bueno Theme website by using custom css to remove everything but the background and footers . That's all working fine, and I am now trying to change the default background image to one of my own but my custom css is not working for that. Unfortunately, there is no "Background" setting under "Appearance" for the Bueno Theme.

    I've never done any of this before and was feeling quite good about getting this far, but this really has me stumped.

    Here's the custom css I've put it that doesn't work:

    '.page-id-363 body {background: #fff url (Scrapbook-paper-3.jpg) repeat left top; }

    If anyone can help, I'll be very grateful. Thanks.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Not totally sure without seeing the site, but try this:

    body.page-id-363 {
       background: #fff url(Scrapbook-paper-3.jpg) repeat left top;
    }

    also make sure that file path is valid - you may want to use the absolute path to where the image is stored.

  3. KHartjen
    Member
    Posted 1 year ago #

    Thank you, WPyogi. I tried it with both the short file name and the absolute file name, but no luck. The default tiled background is still there.

    Here's the link to my page:

    'http://raviolithewriter.com/landing-page-test/'

    Any other ideas?

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I don't see that CSS code anywhere - where are you adding it? Try putting it in the custom CSS.

  5. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Where did you add that CSS WPYogi recommended?
    It's not in your stylesheet http://raviolithewriter.com/wp-content/themes/bueno/style.css

  6. KHartjen
    Member
    Posted 1 year ago #

    I added it to the CUstom CSS panel within the WooDojo plugin I'm using. All of the other custom css I've used for this page has been done through that plugin, and it all worked. I just can't get this one thing right.

    I'm very timid about making changes to the actual style.css file. Do you think it's safe to do that as long as I back it up first?

    Thanks again.

  7. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    No, I don't think it's safe at all.

  8. KHartjen
    Member
    Posted 1 year ago #

    Glad to hear you say that, and glad I didn't do it!

    IS there any other method you know of that might work?

  9. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Your style probably isn't working because your page doesn't have a class named "page-id-363" view-source:http://raviolithewriter.com/

  10. KHartjen
    Member
    Posted 1 year ago #

    Here is the code I have used in the custom css panel:

    'body .page-id-363 { background: #fff url(http://raviolithewriter.com/wp-content/uploads/2013/01/Scrapbook-paper-3.jpg) repeat left top;
    }
    .page-id-363 .title {
    display:none;
    }
    .page-id-363 #pagenav {
    display:none;
    }
    .page-id-363 #logo {
    display:none;
    }
    .page-id-363 #topsearch {
    display:none;
    }
    .page-id-363 #navigation {
    display:none;
    }
    .page-id-363 .entry img {
    border: 0px solid #9FCEF1;
    }

    .page-id-363 .post {
    background-color: #FFFFFF;
    border: 0px solid #EFEFEF;
    margin: 0px 0px 00px;
    padding: 00px 00px;
    position: relative;
    }'

    Shouldn't the '.page-id-363' work for all or none of it? I mean, why would it only not work for the first item? I'm sorry, I don't mean to be dense. I'm just confused.

    Thanks for your help and patience.

  11. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Sorry, I was looking at the wrong page.

    How are you adding that CSS? I still can't see any Custom CSS applying to that page.

  12. KHartjen
    Member
    Posted 1 year ago #

    Well, I guess (and it's just a guess) that the WooDojo plugin is doing it for me. I just type it in and hit the the "save changes" button, and it does it.

    Otherwise, I have no idea.

  13. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Found it http://raviolithewriter.com/?woodojo-custom-code=css&ver=1.0.0

    So, I think we can both see what's wrong here ;)

  14. KHartjen
    Member
    Posted 1 year ago #

    Okay. I just changed "container" to "body" (I think that's what you were referring to) but it had no effect.

    Am I missing some other glaringly obvious blunder?

  15. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Yes, those are the wrong selectors. I'll explain in a minute.

  16. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Using that test page's code as an example:

    A fullstop in CSS represents a class.
    A hashtag in CSS represents an ID.
    http://www.w3schools.com/css/css_id_class.asp

    If you have this HTML;

    <body class="page page-id-363 page-template page-template-template-fullwidth-php chrome">

    To select the class, "page-id-363", you'd use the fullstop just before its class name, e.g;

    .page-id-363

    You can select the body element without classes, just use the name of the element, e.g;

    body

    You can select the body element with its class for extra CSS specificity, by grabbing the name of the element and the class without using spaces;

    body.page-id-363

    In your case, you need to use this selector;

    .page-id-363

    or this;

    body.page-id-363

    So all-together, you should have this;

    .page-id-363  {
     background: #fff url(http://raviolithewriter.com/wp-content/uploads/2013/01/Scrapbook-paper-3.jpg) repeat left top;
    }
  17. KHartjen
    Member
    Posted 1 year ago #

    Well, that just absolutely rocks. Worked like a charm.

    Obviously, I need to go back and study some more css tutorials. Thanks so much for your help.

  18. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    And Thanks for contributing to the WordPress community :)

Topic Closed

This topic has been closed to new replies.

About this Topic