Jump to content


Photo

Title image change Eco pro


  • Please log in to reply
9 replies to this topic

#1 cocogreen

cocogreen

    Advanced Member

  • Members
  • PipPipPip
  • 42 posts

Posted 17 August 2011 - 09:46 PM

How do I swap the title page image on Eco Pro from the green band to something of my choosing. But make it go all the way across the page with no White space either left or right. Thanks a lot

#2 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 17 August 2011 - 10:11 PM

Here is the CSS currently applied to make that band:
 
	#spotlight, #footer {
	background: #679810 url(../images/eco-bg-spotlight-rpt.jpg) repeat-x center top;
	}

So, you could either put in your own CSS targeting #spotlight and using your own image, or you could overwrite that image with your own image.

Course, that will change the footer too.

#3 cocogreen

cocogreen

    Advanced Member

  • Members
  • PipPipPip
  • 42 posts

Posted 18 August 2011 - 11:19 AM

Is there a method of showing different pictures for different pages; rather than simply replacing one image with another. For examlpe if I had one page called Fruit; I would want a picture of fruit; and another page flowers; I would want a picture of flowers; but in the same layout as the Highlight Page. Thanks very much

#4 cocogreen

cocogreen

    Advanced Member

  • Members
  • PipPipPip
  • 42 posts

Posted 18 August 2011 - 08:22 PM

Any ideas anyone? Previous suggestion works accross whole theme but not for individual pages. Thanks

#5 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 18 August 2011 - 09:35 PM

Sure, just prepend the rule with the page id, which can be found by viewing the source and looking at the opening body tag.

example:
 
	.page-id-123 #spotlight{
	background: #679810 url(IMAGE-ONE-URL) repeat-x center top;
	}
	.page-id-456 #spotlight{
	background: #679810 url(IMAGE-TWO-URL) repeat-x center top;
	}
	.home #spotlight{
	background: #679810 url(IMAGE-THREE-URL) repeat-x center top;
	}


#6 cocogreen

cocogreen

    Advanced Member

  • Members
  • PipPipPip
  • 42 posts

Posted 19 August 2011 - 08:43 AM

kastelic, your a legend, thanks buddy

#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 19 August 2011 - 06:22 PM

Shall I close this topic for you?

#8 cocogreen

cocogreen

    Advanced Member

  • Members
  • PipPipPip
  • 42 posts

Posted 19 August 2011 - 08:18 PM

It works but, if you take a look at the page i am testing it on the image is cut just to the center. I would like the image (which is 2000px width) to appear over the green repeated image at the left and right; as well as the center. http://www.cocogreen...custom-products Any advise would be very much appreciated. Thanks Cocogreen

#9 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 23 August 2011 - 10:48 PM

Sorry for the delay, change it to this: .page-id-123 #spotlight .effect{

#10 cocogreen

cocogreen

    Advanced Member

  • Members
  • PipPipPip
  • 42 posts

Posted 24 August 2011 - 01:24 PM

Hey Kastelic, thanks for getting back to me with this; however I tried the following; and it does not work; it has reverted back to the original image. Where you have Spotlight I have put Highlight, as this is for Eco Pro. .page-id-216 #highlight .effect { background: #679810 url(http://www.cocogreen...s/coco-peat.jpg) repeat-x center top; } Again any further help would be appreciated