http://www.kriesi.at/support/topic/themed-landing-pages-in-broadscope Support Forum - Topic: Themed Landing Pages in BroadScope en-US Tue, 21 May 2013 16:21:16 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/themed-landing-pages-in-broadscope#post-36953 Sun, 08 Jan 2012 06:31:58 +0000 Chris Beard 36953@http://www.kriesi.at/support/ <p>It's great to see you sharing all this and to then see it help others, thanks! </p> http://www.kriesi.at/support/topic/themed-landing-pages-in-broadscope#post-36888 Sat, 07 Jan 2012 14:31:53 +0000 brouge 36888@http://www.kriesi.at/support/ <p>nice! </p> http://www.kriesi.at/support/topic/themed-landing-pages-in-broadscope#post-36850 Sat, 07 Jan 2012 05:22:53 +0000 ptvguy 36850@http://www.kriesi.at/support/ <p>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!</p> <p>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.<br /> <pre><code>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; }</code></pre> http://www.kriesi.at/support/topic/themed-landing-pages-in-broadscope#post-36828 Fri, 06 Jan 2012 21:50:56 +0000 ptvguy 36828@http://www.kriesi.at/support/ <p>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 &amp; 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.</p> <p>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:<br /> <pre><code>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; }</code></pre> <p>Then we copy all that into the custom.css file and remove all the excess coding so that it looks something like this:<br /> <pre><code>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; }</code></pre> <p>Then, we upload the custom.css file to the web server, and go under the Layout &amp; 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.</p> <p>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:<br /> <pre><code>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; }</code></pre> <p>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. </p>