[Takestock]

I am trying to add custom CSS to a banner on my index page, so just as a test I have put the following into the customer CSS in Theme editor.

.banner_margin {
margin-top:50px;
margin-bottom:10px;
margin-right:50px;
margin-left:50px;
}

I have inserted the banner block
and in the User-defined CSS-class, I have inserted


.banner_margin

but I can not get it to work.

I have also done this by using the my addon CCS which is setup and working for other elements.

What am I doing wrong

Alan

[Scott_C]

Hi Alan, could be a few things. Is your css currently set to join in the config.local.php file? If so, you may need to delete the css that is compiled in the var/cache/ directories.

Also, its possible you are not targeting the proper element in the css, try Firebug for Chrome or Firefox, right-click on the banner and see firsthand what css is being targeted.

Just a couple of thoughts.

[Takestock]

Hi Alan, could be a few things. Is your css currently set to join in the config.local.php file? If so, you may need to delete the css that is compiled in the var/cache/ directories.

Also, its possible you are not targeting the proper element in the css, try Firebug for Chrome or Firefox, right-click on the banner and see firsthand what css is being targeted.

Just a couple of thoughts.

thanks scott-c
The problem is that I am running 4.1.1 and the CSS debug has been removed from that version. So the CCS runs as joined by default.
But I would have thought that if I input custom CSS in the Custom CSS box in the theme editor and then I put the selector name in the Custom CSS when setting up the block that it should work.
I will turn off Gzip in config and see if I can identify where I am going wrong.

Alan

[Scott_C]

Ah, good point Alan. Hard to diagnose. Caching and/or gzip is probably a good place to look.

[NairdaCart]

When you put the CSS class into the banner block don't put the "." on the front of it. Just the name.

There is already a defined user class for the banner block (homepage_banners) so you don't really need to create another one but it won't cause any problems.

[Takestock]

When you put the CSS class into the banner block don't put the "." on the front of it. Just the name.

There is already a defined user class for the banner block (homepage_banners) so you don't really need to create another one but it won't cause any problems.

Hi NairdaCart
Thanks for that, so simple. I did know about the homepage_banners class, but I have a number of different banners in different locations on my homepage. That I need to control separately.
On that note now that they have removed the CSS Debug from the admin, how are people identifying what CSS is controlling what.

Alan

[phantomcables]

On that note now that they have removed the CSS Debug from the admin, how are people identifying what CSS is controlling what.

Alan

Use inspect element in Chrome, or Firebug in firefox.

[NairdaCart]

I use the native inspector in Firefox. I used to use Firebug but I find for non-PHP stuff the native inspector works better for me. I use the copy unique selector a lot.

Personally I haven't found it an issue not being able to easily identify which file the original CSS comes from. I use the on-site template editor to find work out which templates I need to hook into or override and the layout css/less file for the formatting.

[Takestock]

I use the native inspector in Firefox. I used to use Firebug but I find for non-PHP stuff the native inspector works better for me. I use the copy unique selector a lot.

Personally I haven't found it an issue not being able to easily identify which file the original CSS comes from. I use the on-site template editor to find work out which templates I need to hook into or override and the layout css/less file for the formatting.

Thank to all,