Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Wednesday, October 20, 2010

Different Background on Different Page

If you have read my past few posts, you might have already guessed that I will be using conditional codes heavily in this tutorial. Anyway, you actually have different background on different pages. What you need to achieve this? Well, you must at least know how to change your regular main page background using CSS code. You see, there are many page templates and each of them have different ways to address to something, so you must at least do a little homework and try to change it first on the main page.

You can Checkout my test blog for a sample result. Link tab and Contact tab have different backgrounds:

http://www.test2.southernspeakers.net/


Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close -  Edit HTML - Proceed -

Find for </b:skin> - Place the following code below </b:skin>

<b:if cond='data:blog.url == &quot;http://yoboytestblog.blogspot.com/p/link.html&quot;'>
<style>
body{
background: url('http://farm3.static.flickr.com/2604/3977045139_c00ae395ca_b.jpg') center;
}
</style>
</b:if>

<b:if cond='data:blog.url == &quot;http://yoboytestblog.blogspot.com/p/contact.html&quot;'>
<style>
body{
background: url('http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa') center;
}
</style>
</b:if> 

To use this code in your blog, you gotta change the URL of the page that you want your background to be different, and the URL of the background itself. If you want 5 pages to have 5 different backgrounds, then you will 5 codes (in my example I only used 2). Where to get the URL of your pages? Go Dashboard - New Post - Edit Pages - View and there it is in your address bar. Can you change the background of a 'Virtual Page' like label page? You sure can, just put it's URL there.

Wow, this is a one step tutorial. Have fun.

41 comments:

  1. Hi Yoboy,
    Is there a css code that change different pages background and text color or rather a certain background and text color for each page? I tried to edit my html for dynamic view's but it would not let me. I know this is not related, but could you help me with the css code that opens a page in a new tab. Thank you!

    ReplyDelete
    Replies
    1. Hi Rennie,

      I wouldn't encourage anyone to tamper with Dynamic View's HTML, as it turns out, once you try to edit your HTML, you will no longer receive updates from Blogger. That might not sound like a big deal - but trust me, it is. You could end up with your template half-broken (links unclickable and such)..

      As for CSS to change background n text color for each page, that might be possible. But just to be clear, when you said page, were you referring to Static Page or just a generic reference to webpage, which includes your post pages.. Coz it might be possible with static pages (the pages that you see under Dashboard - Page), but it won't go smoothly with post page (the pages that you see under Dashboard - Posts).. In any case, what's your blog's address, and what background and color you'd like to use?

      Delete
  2. I had the same question about static pages on dynamic views. I got my posts page exactly how I want it, but when I went to my static page, the background was different and the header seemed to be chopping off the text box when scrolling. You can see it here:

    http://www.lifewithrooster.com/p/about-me-and-rooster.html

    ReplyDelete
    Replies
    1. Hi Emma,

      The reason for your post box to be chopping off at the top is because your header code is incorrect. Here's the right one:

      #header .header-drawer.sticky, #header .header-drawer {
      top: 94px;
      }

      #header .header-bar{
      height: 125px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 125px;
      }

      #header-container {
      height: 165px;
      }

      .viewitem-panel .viewitem-inner {
      top: 60px;
      padding-bottom: 80px !important;
      height: auto !important;
      }

      #header-container #header.header .header-bar span.title{
      background: url(http://2.bp.blogspot.com/-XIDthGo2KNQ/UCHiEBKBV0I/AAAAAAAAGS0/1ImN_tGwJ-U/s1600/Title+Rooster+banner.png)
      no-repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 125px;
      }

      As for the different background in your static page, add this to your CSS:

      .viewitem-panel .viewitem-background{
      background: url(http://1.bp.blogspot.com/-TPLDcBn4XPI/UCHmMpoXzQI/AAAAAAAAGTg/4RZsFy_B50w/s1600/Rooster+banner+60%25.png) !important;
      }

      All the best! :)

      Delete
    2. Wow that was fast.. No problem! :)

      Delete
  3. i try it but not work check my code:
    ================================================================
    https://drive.google.com/0B-H7kVplL7WPaFBPd1JzYjZvR3M?authkey=CLKP-LQL
    ================================================================
    is there any other way to make it ?
    Write back soon
    Thanks for your time!!
    Toutsi

    ReplyDelete
    Replies
    1. Cant open the link you gave. You could just leave the code in your blog and I'll have a look. What's your blog's address?

      Delete
    2. http://toutsisupport.blogspot.gr/

      Delete
    3. Right.. In your code, instead of using http://toutsisupport.blogspot.gr, use http://toutsisupport.blogspot.com instead.

      And make sure the code goes to the 'HTML' section of your post, as opposed to the 'Compose' section.

      Let me know how it goes.

      Delete
    4. It Works!!! YEAH!!!!
      thanks a lot!!! is posible change my title image too?

      Delete
    5. Well i have some wrong check my background is not cover the full screen but in my css i have :
      body {
      background-image: url(http://i1341.photobucket.com/albums/o748/Toutsi/Blogger/background.jpg);
      background-attachment: fixed;
      background-repeat: no-repeat;
      }
      any idea?

      Delete
    6. Try this:

      body {
      background-image: url(http://i1341.photobucket.com/albums/o748/Toutsi/Blogger/background.jpg);
      background-attachment: fixed;
      background-repeat: repeat;
      }

      Cheers..

      Delete
  4. pfff not work did you know the standar resoluction for backgrounds to make them in photoshop but the last page works fine i dont know why images have same resoluction :/

    ReplyDelete
  5. I put the full code to dreamweaver and i see and syntax error in this line:

    document.body.className.replace('loading', '');
    }, 10);

    ReplyDelete
    Replies
    1. It seems to be coming from Dreamweaver itself. I don't know how to use Dreamweaver, you might wanna direct this one to Dreamweaver's support team.

      As for Blogger's background, it depends to your screen size. But most Blogger backgrounds are 1800px by 1205px..

      Delete
  6. DISCARD ALL OF MY COMMENTS AND READ HERE PLEASE :)
    i have an idea to solve it
    i want put subpages in my pages and solve problem
    if you have any tutorial for this here send it please
    if you dont understand take a look here (http://facebook-comments-box.blogspot.gr/2011/06/add-facebook-comments-box-to-blogger-in.html)
    LOOK AT PAGES THERE IS A PAGE CALLED Sitemap it has sub pages thats i need

    THANKS A LOT FOR YOUR TIME
    HAVE A NICE DAY :)
    ToUtSi

    ReplyDelete
    Replies
    1. Hi Toutsi,

      What you're after is a multi-level drop-down menu. I don't have a tutorial on this because there are hundreds of tutorial already published on this - didn't wanna look like I was copying from the authors before me, so I passed on this. Just google for 'multi-level drop-down menu in Blogger', you'll find lots of tutorials.

      Cheers :)

      Delete
  7. i didn't know the name of this thats why i will search now
    Thanks!!!

    ReplyDelete
  8. how can i change my blogger icon?
    i try it from favourite in blogger items but not work :/

    ReplyDelete
  9. I did just as stated above, not an amateur of html and or reading directions however the page background turns all white. I was going for the different pages have different backgrounds and post backgrounds to be images instead of colors. Idk, tried several different times and still the same outcome. IS there an easy fix for this for someone with the flu, slightly delirious and absent minded?

    ReplyDelete
    Replies
    1. Hi i.m.joseph,

      Let's have a look at your blog. What's your blog's address? Also, do you still have the code in your template?

      Cheers..

      Delete
    2. Howdy!

      Okay, so ... I'm feeling a bit better so I should be up to instructions.

      http://unlockingtheparanormaltruth.blogspot.com/

      btw, thank you.

      Delete
    3. Hello,

      I am truly at a loss and now I'm following the code above just as stated and this is the error I am receiving Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
      XML error message: The reference to entity "authkey" must end with the ';' delimiter.

      Error 500

      Which code in the template?

      Delete
    4. That's odd.. Let's try an alternative method.. Go to your individual page (that you want its background changed) - edit the page - switch to HTML view (as opposed to Compose view) - Paste the following towards the bottom of your post editor - Republish the page. Do this for other pages as well, and replace the image link in the code below with that of the background that you wanna use.

      <style>
      body{
      background: url(http://i564.photobucket.com/albums/ss90/yoboy7/mastercopy-1.png) !important;
      }
      </style>

      Let me know how it goes. Cheers :)

      Delete
    5. Progress! If I use your direct code without changing anything I get your speaker image in the background, however if I use the direct link for the image I want, https://picasaweb.google.com/SkeletonKeyParanormal/January252013#5837558954234461666, the background turns all white again. Now we know it is not your code, which I didn't think it was, but it is in the image itself. I do have it publicly viewable. I did try the direct link, the embed image code as well as the url code. Not sure what it is. Is there something I'm over looking?

      Thanks.

      Delete
    6. https://picasaweb.google.com/SkeletonKeyParanormal/January252013#5837558954234461666 <-- this does not look like a direct link. Usually, a direct link ends with the file extension (.jpeg or something).. Besides, it doesn't even seem like a valid link, as the page that I landed on is broken. Do you have a different link that we can try?

      Delete
    7. Well I am looking directly at the url link and it reads the same. https://picasaweb.google.com/SkeletonKeyParanormal/BloggerBackgroundImagesJanuary252013#5837558954234461666

      Here is the direct link from the link to this photo
      https://picasaweb.google.com/lh/photo/pewE_c3wiuuNogm7SftiwtMTjNZETYmyPJy0liipFm0?feat=directlink

      The below one is the embed this image link.

      https://lh3.googleusercontent.com/-sgrtLL2GCLc/UQMs8K6LveI/AAAAAAAABGs/OCCbrz-WXxI/s144/Explaination%2520bg2.jpg

      I apologize, I haven't really ever worked with picasa before. I appreciate all the help though.

      Delete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. Thank You for all your help. I ended up getting a photobucket account and everything works great except the cover or 100% 100% I can only position fixed left, but hey, I got a different background for the other page. Thank you so much for your time. It's appreciated.

    ReplyDelete
    Replies
    1. Glad you got it figured. As for the placement, send me the link of one of your pages, and how you'd like them positioned.. I'll see if it can be done.

      Cheers :)

      Delete
    2. This is the blog page I would like to have a cover background too,
      http://unlockingtheparanormaltruth.blogspot.com/p/psychic-parapsi-paranormal-abilities.html

      If you look at it, you'll see


      top center repeat-y;
      margin:0;background-color:#290807


      OOpps I tried to place the whole code above and it's said, no no, your html cannot be excepted, tag is not allowed.
      as the code however I don't want the color I would just like the image to cover
      y 100% and x 100%

      Cheers :)

      Delete
    3. Something is amiss. Looks like your source background image has been deleted or something. Let me know when it is back up :)

      Delete
    4. Wow, what a waste of your time. I apologize and it's a bit embarrassing that I have the longest running, damsel in distress posts :) It's all good now and I didn't even know it was removed.

      Delete
    5. Don't worry bout it :)

      See if this is what you're looking for. Backup your current background code, then replace it with the one below:

      body{
      background: url(http://i1326.photobucket.com/albums/u645/skeletonkeyparanormal/DoubleBustBackgroundEvenBradsWallpaper_zpsd1726b10.jpg) repeat center !important;
      }

      Cheers :)

      Delete
    6. Ewww, no. It remains so you can see what it looks like. I think the problem derives from the fact I'm on a 27 inch iMac and most blogger pages are still at ... The whole transition from CRT to Plasma and so forth. All in all I'm happy with the different pages background and probability is the background image isn't large enough for me to view it properly from my monitor. I may have to fire up the old windows laptop just for viewing purposes. Thing is, with Google raising in the market, one would think they could afford an upgrade on how blogs are viewed such as the automatic adjust screen (not sure what the proper name is) I'll mess around with the codes and see what I can come up with. I'm also going to link to your pages from my blog because you have such great information here and I really appreciate all the help you have done with a smile on : )
      Thank You

      Delete
  12. Hi! Just started our blog, and your tutes are really useful. However this one really wasn't working so I copied what you gave emma potenziani into the "add CSS" section and that worked, except we'd really like the image to stand alone and not repeat slightly at the side.

    Here's the particular page on our blog: http://izzyandcarin.blogspot.co.uk/p/the-who.html

    At the moment I have this in add CSS:

    .viewitem-background{
    background: url(http://i.imgur.com/O10zzMz.png) !important;
    }

    Thanks!
    Carin&Izzy xx

    ReplyDelete
  13. OK now it's on our new pages as well when we only want it on the "The Who" page... help!

    ReplyDelete
    Replies
    1. Looks like you've already gotten it figured out. If you want the background to appear on your 'the who' page, edit your page - switch to HTML view - paste the following code towards the end of your editor:

      <style>
      .viewitem-background {
      background: url(http://i.imgur.com/O10zzMz.png) !important;
      background-repeat: no-repeat !important;
      }
      </style>

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.