Very Basin Css Question

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,