Thread

I know Pre-Sales is not the correct Forum section for this question, but I can’t seem to post within any other sections, I apologize….

What I’m attempting to do is use two fields, which are Asset (image) fieldtypes, to swap images on hover via CSS. I initially tried this while storing my stylesheet outside of the template level but after researching discovered two other options. I’ve tried simply adding the CSS into my header snippet, which did not work and have most recently tried creating the stylesheet as a template as described in this article: http://ellislab.com/expressionengine/user-guide/templates/globals/stylesheet.html

Neither options are working thus far for me. This seems straightforward so it’s obviously something simple that I’m doing wrong. I’ve linked to the stylesheet correctly, as the styles are affecting the markup:

<link rel="stylesheet" href="{path='styles/style'}">

I have the following CSS in my stylesheet, this is what is not functioning. The fields were created to be used within the Ecommerce addon BrilliantRetail, hence the “br:” prepending the fieldname. I’ve also tried this without the “br:”.

#container #todays-shirt {
 background: url({br:cf_homepage_design}) no-repeat;
 height: 385px;
}

#container #todays-shirt:hover {
 background: url({br:cf_homepage_product}) no-repeat;
}

Thanks in advance for any assistance!

Hi rcmcqueen,

Thank you for posting to the forums and welcome to ExpressionEngine!

Is that the meat of your CSS template?

At first blush, it looks like you are just calling bare field names? Even in a CSS template, you still need to use {exp:channel:entries} to tell EE which channel you want to pull from.

Are you using channel entries tags?

Cheers,

That is only the piece of CSS that corresponds to the tags I’d like to use. Do I need to also create a Channel Group to enter the styles as an entry? If so, would I edit the CSS to reflect this?

{exp:channel:entries channel="styles"}
#container #todays-shirt {
 background: url({br:cf_homepage_design}) no-repeat;
 height: 385px;
}

#container #todays-shirt:hover {
 background: url({br:cf_homepage_product}) no-repeat;
}
{/exp:channel:entries}

Nevermind, I was getting confused with adding a “styles” channel when I really just needed to use the channel containing the field I want to use. Sorry about that.

Yup!

So, are you all set then? Are you getting the results you like?

~

I think so, at least I know its “working.” The :hover state isn’t displaying the image, the action is functioning but its just displaying blank. My CSS now looks like this:

{exp:channel:entries channel="brilliantretail_1"}
#container #todays-shirt {
 background: url({cf_homepage_design}) no-repeat;
 height: 385px;
}

#container #todays-shirt:hover {
 background: url({cf_homepage_product}) no-repeat;
}
{/exp:channel:entries}

the Channel Fieldnames are correct and there are images in the entry.

Ok, now we get out of EE and into browser inspectors!

You need to see what the output CSS looks like. Depending on your browser, you should be able to read the CSS that is being delivered.

You want to make sure the EE field names are being parsed out and the proper URI for the image is being used. You may also want to use single quotes in the url() property value:

{exp:channel:entries channel="brilliantretail_1"}
#container #todays-shirt {
 background: url('{cf_homepage_design}') no-repeat;
 height: 385px;
}

#container #todays-shirt:hover {
 background: url('{cf_homepage_product}') no-repeat;
}
{/exp:channel:entries

I had been Firebugging it, the non-hover background does output the correct image URI. But on hover, it outputs background: url(” “). I did add the single quotes as well with the same outcome.

But on hover, it outputs background: url(” “). I did add the single quotes as well with the same outcome.

Ok, but what is rendered to the actual stylesheet, not how it behaves in the browser. Does the

#container #todays-shirt:hover

URL property get supplied with a correct image path in the output stylesheet? Is there an image in the {cf_homepage_product} field for the entry that you are calling in?

Can you share the rendered CSS file using http://pastie.org/ ?

Cheers,

Oh sorry, yes {cf_homepage_product} does have an image in the field.

Here’s the embed code for pastie: Line 531 is where the section of CSS is.

[removed][removed]

Okay….well, here’s just the embed by itself then:

http://pastie.org/4582316.js

Jeez….sorry
http://pastie.org/4582316

Hi rcmcqueen,

Looks like Dan was asking for you to share your rendered CSS template. In other words, after EE has processed the templates, what is output to the browser? What we’re looking for here is to see what EE does with those BR tags during the rendering process.

Could you access the CSS template directly in your browser, view the source, and paste that into Pastie.org?

Ah sorry about that. Here is the output in browser. Line 540 is where the section begins. It’s outputting the rules twice.

http://pastie.org/4598580

Alrighty, I think part of the problem is that the channel “brilliantretail_1” has multiple entries in it, and the tag you’re using isn’t restricting the results to a single entry, so it’s returning multiple results (and CSS is going to give precedence to the last ones listed). Since I’m assuming there’s 1 entry that’s values you want to appear here, I’d recommend changing the tag to something like this (if that entry’s ID is 147, for example):

{exp:channel:entries channel="brilliantretail_1" entry_id="147"}
#container #todays-shirt {
 background: url('{cf_homepage_design}') no-repeat;
 height: 385px;
}

#container #todays-shirt:hover {
 background: url('{cf_homepage_product}') no-repeat;
}
{/exp:channel:entries}