Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #8035

    Themed landing pages are handy for a lot of different things. They can tie in to specific page content, visually reenforce a category or topic, and they’re especially good for squeeze pages. Generally, there’s an easy way to do this using the WordPress built-in body_class() function, but unfortunately, the BroadScope theme options are designed in a way that overrides this. When you choose background color, image, position, repeat, and attachment through the Layout & Styling section of the BroadScope theme options, it writes them as individual style elements in the header instead of the CSS stylesheet. That means that the custom.css stylesheet won’t override them. Still, there’s a fairly easy workaround for this.

    First, open one of your site’s pages in your favorite browser and then look in the source code for the various body styles that you set up in the BroadScope theme options. They’ll look something like this:

    body{
    background-color:#FFFFFF;
    }

    body{
    background-image:url(http://www.example.com/wp-content/uploads/my-background.jpg);
    }

    body{
    background-position:top center;
    }

    body{
    background-repeat:no-repeat;
    }

    body{
    background-attachment:fixed;
    }

    Then we copy all that into the custom.css file and remove all the excess coding so that it looks something like this:

    body {
    background-color: #FFFFFF;
    background-image: url(http://www.example.com/wp-content/uploads/my-background.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    }

    Then, we upload the custom.css file to the web server, and go under the Layout & Styling section of the BroadScope theme options and remove all those styling choices and save it. The setup you chose before will still be okay, because you’ve made it part of the custom.css.

    Now we can finally go on with the normal way of setting up themed landing pages in WordPress. Just find the WordPress page ID number for the page you want themed, and use it to replace the “XXX” in the example below:

    body.page-id-XXX {
    background-color: #FFFFFF;
    background-image: url(http://www.example.com/wp-content/uploads/my-new-themed-background.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    }

    Then you can restyle that any way you want, add it to your custom.css file, upload that file to your web server, and you’re good to go.

    #60099

    Okay, I’m an idiot. I showed this post to a friend of mine who also creates websites. He looked at it for about ten seconds and then said, “Why don’t you just use the important! declaration? Then you don’t have to do all that other stuff.” He was right, of course. You can just leave all the BroadScope theme options as they are and jump right to the easy way using the WordPress built-in body_class() function. Doh!

    Just find the WordPress page ID number for the page you want themed, use it to replace the “XXX” in the example below, place it in your custom.css file, make whatever style changes you want, save it, and upload it to the web server.

    body.page-id-XXX {
    background-color: #FFFFFF !important;
    background-image: url(http://www.example.com/wp-content/uploads/my-new-themed-background.jpg) !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    }

    #60100

    nice!

    #60101

    It’s great to see you sharing all this and to then see it help others, thanks!

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

The topic ‘Themed Landing Pages in BroadScope’ is closed to new replies.