19 replies to this topic

[gayatriom]

So. when trying to add the background to the blog page, it wasn't working. So i just added it to the site custom background which is inbuilt in wordpress and it worked! however, everytime i go to a new page now, it first gives a 'flash' of the site background THEN the custom post background. know what I mean?

[kastelic]

Link to site?

[gayatriom]

justonekind.com

[gayatriom]

thanks so much!

[gayatriom]

Hey were you able to check it out.

[gayatriom]

Another way to look at is would be, what is the css I need to add a background to this page only : http://justonekind.com/blog . I tried the following, but it doeson't work. #blog full_width ttype-posts tmain-posts{background: url(http://justonekind.c...d585_b-new2.jpg) no-repeat !important;}

[catrina]

Please try this code instead:

 body.blog.full_width {background: url(http://justonekind.com/wp-content/uploads/4155865593_c1a144d585_b-new2.jpg) no-repeat !important;}

[gayatriom]

Hey this worked! and also - how do I maintain this same background when I click on a specific post? Thanks so much Catrina! You've been so so helpful to me! I sorted out the icons issue, so you should check it out - it looks nice ! http://justonekind.com

[catrina]

You need to use the same code, but change

 body.blog.full-width

to a different selector that specifies which post you want the background image to appear in. Can you post a link to the post where you want the background image?

[gayatriom]

Hey. I wanted them to all posts . So if someone goes here http://justonekind.com/blog . and they click on post then they will always go to a post that has the same background as the main blog page.

[catrina]

Ah, okay. Then you should add this:

 body.single.single-post {background: url(http://justonekind.com/wp-content/uploads/4155865593_c1a144d585_b-new2.jpg) no-repeat !important;}

[keithmagvacom]

Sorry to burst in on this thread, but I trying to figure out how to do what has been done on this site. I am using PlatformPro, Full-Width Mode What I want is to have a background image on each page (different) and then have the text in a highlight box where the transparency of this box can be controlled i.e. the image below can be made out. I also want to do the same on the blog posts. It is this highlight box I don't know how to implement. On the link provided above I am fascinated by how the text boxes appears in different locations. Is there some trick to do this?

[gayatriom]

Hey Keith! I'm flattered you like what I did! Well. what I did was create a different template for each page . Since this is a limited page site it's possible. The background is a transparent png image i created in photoshop. If you use firebug you will see it's the same image I used as a background for all these different sections of the site. (I've pasted the code below) . For custom backgrounds - use the custom post background plugin. Then you can add an individual background to each page. And for the blog post page use the code Catrina gave me . .sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .commentlist ul.children .even, .alt #commentform textarea{background:transparent url(http://justonekind.c...background2.png);} #secondnav ul li{float: left;background:transparent url(http://justonekind.c...background2.png)} table {width: 100%;} .fpost .entry_content {background:transparent url(http://justonekind.c...background2.png)} #sidebar_primary{background:transparent url(http://justonekind.c...background2.png);padding:10px; } #sidebar_secondary{background:transparent url(http://justonekind.c...background2.png);padding:10px; border:none !important;} #list_sidebar_tertiary{background:transparent url(http://justonekind.c...background2.png);padding:10px; border:none !important; text-align:justify!important;} #sidebar_universal{background:none;} #list_sidebar_base{background:transparent url(http://justonekind.c...background2.png) !important;padding:10px; border:none; text-align:justify !important;} Hope this helps some.

[keithmagvacom]

Thanks for the feedback. Its a lovely solution for a site with some fabulous imagery Have a few questions though... What design mode are you using? i.e. Full-Width Mode With Canvas, Full-Width Mode or Fixed-Width Mode. I'm assuming its the Full-Width Mode, but my image always gets lost behind a block colour (except for in the footer and a few pixels at the top of the page) The code you provided, I assume this is pasted into the style.css file. Is there any specifically it needs to be pasted?

[Kate]

Because of the "!important" declarations, you should be fine wherever you paste it.

[gayatriom]

Hey it's pasted into custom code. And it's full width mode. You have to make everything us transparent. So this is in my code too. #page-canvas{background:transparent;} body #page{background-color:transparent !important;} .fullwidth #pagelines_content #column-wrap, .fullwidth #buddypress-page #container{width:960px;background:transparent url(http://justonekind.c...background2.png) !important;}

[keithmagvacom]

Thanks again. Finally how did you manage to change the background colour for the navigation Bar?

[gayatriom]

um. hmm are u looking at what i have now: i'm changing the whole site. the client didn't like the full page background. ughhh . haha. #brandnav{background:#000000}

[Kate]

Thanks for your input @gayatriom...

[gayatriom]

!