Jump to content


Photo

Using Custom Post Background, but It doesn't work on Blog Page - Reopening


  • Please log in to reply
19 replies to this topic

#1 gayatriom

gayatriom

    Advocate

  • Members

  • 559 posts
  • Country: Country Flag

Posted 23 July 2011 - 07:51 PM

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?

#2 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 23 July 2011 - 10:32 PM

Link to site?

#3 gayatriom

gayatriom

    Advocate

  • Members

  • 559 posts
  • Country: Country Flag

Posted 23 July 2011 - 10:42 PM

justonekind.com

#4 gayatriom

gayatriom

    Advocate

  • Members

  • 559 posts
  • Country: Country Flag

Posted 23 July 2011 - 10:42 PM

thanks so much!

#5 gayatriom

gayatriom

    Advocate

  • Members

  • 559 posts
  • Country: Country Flag

Posted 24 July 2011 - 02:17 PM

Hey were you able to check it out.

#6 gayatriom

gayatriom

    Advocate

  • Members

  • 559 posts
  • Country: Country Flag

Posted 24 July 2011 - 02:25 PM

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;}

#7 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 July 2011 - 04:25 PM

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;}


#8 gayatriom

gayatriom

    Advocate

  • Members

  • 559 posts
  • Country: Country Flag

Posted 24 July 2011 - 05:53 PM

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

#9 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 July 2011 - 06:07 PM

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?

#10 gayatriom

gayatriom

    Advocate

  • Members

  • 559 posts
  • Country: Country Flag

Posted 24 July 2011 - 06:20 PM

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.

#11 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 July 2011 - 06:23 PM

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;}


#12 keithmagvacom

keithmagvacom

    Advocate

  • Members
  • 327 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 25 July 2011 - 04:00 PM

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?

#13 gayatriom

gayatriom

    Advocate

  • Members

  • 559 posts
  • Country: Country Flag

Posted 25 July 2011 - 11:11 PM

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.

#14 keithmagvacom

keithmagvacom

    Advocate

  • Members
  • 327 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 26 July 2011 - 08:29 AM

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?

#15 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 26 July 2011 - 12:43 PM

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

#16 gayatriom

gayatriom

    Advocate

  • Members

  • 559 posts
  • Country: Country Flag

Posted 26 July 2011 - 05:00 PM

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;}

#17 keithmagvacom

keithmagvacom

    Advocate

  • Members
  • 327 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 26 July 2011 - 07:43 PM

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

#18 gayatriom

gayatriom

    Advocate

  • Members

  • 559 posts
  • Country: Country Flag

Posted 26 July 2011 - 08:55 PM

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}

#19 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 27 July 2011 - 12:00 PM

Thanks for your input @gayatriom...

#20 gayatriom

gayatriom

    Advocate

  • Members

  • 559 posts
  • Country: Country Flag

Posted 27 July 2011 - 12:37 PM

:)!