Jump to content
Sign in to follow this  
cdc53202

Feature set up, CSS, feature box on home pg

Recommended Posts

cdc53202

Im working with EcoPro. i have some questions. both In the Feature setup - 1. I want to change the background color to a custom color and the CSS background shorthand that are suggested do not work. or i would like to fill the background of the feature with a background image 2. I would like to add Feature boxes to the Home page as shown on the Demo. Site: http://www.tosasnightout.org/

Share this post


Link to post
Share on other sites
cmunns

The background of the features is two-part here are the CSS selectors you would have to replace: ` #spotlight .effect, #footer .effect { background: url("../images/eco-bg-spotlight.jpg") no-repeat scroll center top transparent; } ` ` #spotlight, #footer { background: url("../images/eco-bg-spotlight-rpt.jpg") repeat-x scroll center top #679810; } ` as for the boxes on the home page you would need to use the default feature page template.

Share this post


Link to post
Share on other sites
cdc53202

Hi i want to change the background image in each feature cell. not the footer. The Feature Page has an area in the interface to change the background. (this is the text on the Feature page: Feature Background (CSS - Optional) Use CSS shorthand to control the feature background Feature Background (CSS Background Shorthand) More Info Use CSS background shorthand to style the background of each feature. For example: #fff url(image.gif) no-repeat top left. In the end i want to customize each feature with a background image.

Share this post


Link to post
Share on other sites
Kate

Hey Shawn - Are you not able to make the changes? Or are you unsure of the code to add?

Share this post


Link to post
Share on other sites
cmunns

Oh ok I see. Well it depends on what you want to do...this for example would place an image on top of a solid white background, but this does not extend full-width it's just a background for the feature content width ~960px `#fff url(image.gif) no-repeat top left`

Share this post


Link to post
Share on other sites
cdc53202

I for sure need to cover the full-width image area

Share this post


Link to post
Share on other sites
catrina

Here's the code for changing the full-width feature area (it will also cover the height):

div.shadow-bottom {background-color: #fff;}

Change fff to your desired color.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
cmunns

In that case you want to use the css i pasted above, but don't use the footer selector so... ` #spotlight .effect { background: url("../images/eco-bg-spotlight.jpg") no-repeat scroll center top transparent; } #spotlight { background: url("../images/eco-bg-spotlight-rpt.jpg") repeat-x scroll center top #679810; } ` If you add images through your wp media area you can copy the file URL from there and use that as the background URL that is in the CSS rules above. These can be placed in the theme options - custom code - custom css area

Share this post


Link to post
Share on other sites
cdc53202

Cmunns, that code worked, but i need to be able to place a different custom image in each feature cell. That code change the background for all features.

Share this post


Link to post
Share on other sites
Guest Guest

Shawn, did you mean to say you couldn't get the code to work? Did you add a . before the code when you entered it?

Share this post


Link to post
Share on other sites
cdc53202

Yes, my mistake. I could not get Catrina code to work. The a . did not work.

Share this post


Link to post
Share on other sites
cdc53202

I really need this to be answered I need to be able to place a different custom image in each feature cell. Full width and height. Cmunns, code was close. But it changed every cell. is it possible?

Share this post


Link to post
Share on other sites
cmunns

It's not possible to or at least there is no easy solution. One thing that would maybe work is to use the callback function of the jquery cycle plugin to change the css of that div depending on the active page, but I have no idea if that would work... I'd have to do some testing

Share this post


Link to post
Share on other sites
cdc53202

OK, if i can not place a different custom image. Id like to get Catrina code to work. Any other thoughts on changing the background color of the features.

Share this post


Link to post
Share on other sites
cmunns

I took this as a challenge to myself, but this is partly what you need. Add this to your functions.php file and you can see the background change on the click function of a feature thumb: ` add_action('wp_head','background_changer'); function background_changer(){?> <?php } ` If you need more assistance that would definitely be beyond the scope of this forum. You can contact me at adam [at] pagelines.com if you need more help.

Share this post


Link to post
Share on other sites
shaznyc

To my surprise I got this code to work, a different image for each Feature: url(http://.....com/wp-content/uploads/2011/02/dew.jpg) no-repeat top left. And I say that I am surprise because I know nothing about CSS codes. My question now is: 1- How do I make the background image(s) transparent, or faded may be a better word. (lighter that the foreground image.) 2- How do I make the foreground image full hight, or touch the top. My website here, see the first Feature (Hi): http://shaznyc.com/reviews/ Thanks, shaz.

Share this post


Link to post
Share on other sites
Kate

Hi sharron - Could you clarify about the background/foreground images, please? Not sure I understand. Also: It appears the images are 'touching the top'... did you get that part working the way you wanted?

Share this post


Link to post
Share on other sites
shaznyc

Hi, if you go to this link: http://shaznyc.com/reviews/ and look at the first Feature (Feature 1) you will see that I have place 2 copys of the same image, one on top of the other. I got the Bockground image touching all corners. But the foreground image / Feature media (the image on top of the background) is touching on the right side and bottom edges, but not on the top edge. I would like the have the Feture Media - top/foreground image touching at all 3 corners. How can I do that. What are the codes. I have placed a background and a Feafure image = (foreground image) in Feature 1 as an example so you can see what I am talking about. The other Features, 2,3 and 4 only have background images, for now.

Share this post


Link to post
Share on other sites
cmunns

You would have to edit the images in photoshop to give them a transparency fade...some css would get the foreground image full height. ` #feature .fmedia { padding:0px; } ` fyi this is not the same as the question from the original thread. next time start a new one please :)

Share this post


Link to post
Share on other sites
shaznyc

Hi Cmunn, I will repost my question on a new thread because I do not know where to put the above Codes. Thanks, SHAZ.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×