Target a Dynamic Post with CSS when in a looper

[petitshoo]

Hi,

I have created a looper to pull in a custom post type I have created. I’d like to add another block using this looper, but not have the rollover DIV I have created to show on this one block. I gave it custom CSS on the backend, but targeting that CSS and the DIV seem to have no effect. I’m also not seeing the CSS class listed when I inspect the page in Chrome.

I have it set up as a Grid, with the Cells as the Looper Consumers. Each cell has a Div inside that is set to opacity:0, and then upon rollover it changes to opacity: 1.

The block where I’d like the rollover disabled is the “Delivering the Unexpected” text (shown below).

Is what I’m asking possible? I’ve put credentials in a secure note for you.

Secondary to this is making the cells/div be square no matter the size of the screen. Any tips for this?

Thank you!
Jen

[ruenel]

Hello Jen,

Thanks for the very detailed post information.

You need to add the post ID {{dc:post:id_attribute}} dynamic content as the class selector in your Looper Consumer.

And then use the Google Chrome Developer Toolbar to check the live HTML code and find out the post-class of the “Delivering the Unexpected” post item and the necessary class selector of the div.

You will get post-1138 and .x-div as the class selectors. Therefore, you might have something like this:

.post-1138 .x-div {
  opacity: 0 !important;
}

The !important is needed to force the CSS to be applied to the element. The code above serves as an example to get you started with your customizations. Be advised that custom coding is beyond the scope of our support. You may need to check the code every after update to make sure that your customization does not have any conflict and issues.

Best Regards.

[petitshoo]

That worked perfectly. Thank you! I have one more block to add that own’t have a rollover and I’ll try this same method.

Thanks!!!
Jen

[prakash_s]

Hello Jen

Glad that we were able to help. Please let us know how it goes.

Thanks