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
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.
[quote name='Scott_C' timestamp='1390995796' post='176276']
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.
[/quote] 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
Ah, good point Alan. Hard to diagnose. Caching and/or gzip is probably a good place to look.
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.
[quote name='NairdaCart' timestamp='1391002335' post='176282']
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.
[/quote]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
[quote name='Takestock' timestamp='1391010976' post='176293']
On that note now that they have removed the CSS Debug from the admin, how are people identifying what CSS is controlling what.
Alan
[/quote]
Use inspect element in Chrome, or Firebug in firefox.
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.
[quote name='NairdaCart' timestamp='1391013579' post='176300']
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.
[/quote]
Thank to all,