[solved] disabling or overriding icms.css

Hi,

I'm looking into using Twitter Bootstrap, which has a nice integrated way of exposing the most needed functionalities.

I've tried to integrate the 'hero' example into an impresscms theme, but my layout is mixed up every time. When I look at the source code of the page, I see that the xoops.css and the icms.css file are included by default. The xoops.css is part of the theme file, so I disabled that one. The icms.css file however, is added as part of the module_header smarty variable. That seems to indicate that it is included programatically.

Questions: Do I need to disable these files? and if so, how can I do that best?
If the files do not need to be disabled, any idea why my layout is all mixed up from the moment I make a theme of it?

HTML frameworks are more and more being used, and everyone has his own preference. I think these questions will arise also with other HTML/CSS frameworks, so they could be interesting to take into account.

Elsewhere, I read that the css files are being included in the wrong order, ie. Your style.css is being overidden by the icms.css, whereas it should be the othwr way around.

This makes it not possible to define certain styles in a theme or module css file, for example the p tag, because it is defined in icms.css already.

I have also found it is not possible to use theme styles in a block if it is cached, even if you include it via xotheme etc, which I think is an ancient xoops bug.

overriding is sometimes not very easy. You need to load the framework css as last. the values that need to be overwritten should be marked as !important.
icms.css should only describe defined icms divs, like .icms-header or icms.table,... but never .header, .table, .td as so on.

Yeah, Iagree should limit to ids etc. Definitions of plain html tags should be left entirely to the theme (not being able even to set a global style for p tags in a theme is a huge problem IMHO especially since the cause is not obvious).

How hard would it be to change the order of the css? Its nit difficult to solve is it (I am without a computer for a while BTW).

While we are on the subject, there are also some inline css that needs to be removed. Like that brown bar in the search results.

I'll create a bunch of ticket for this.

@bleekk : would you have the time to look at splitting the content of icms.css into a part that needs to stay, and a part that needs to go into the themes? This will need to be done anyway.

Another possibility would be to override the icms.css file from within the theme. Thoughts on that?

I create a ticket some weeks ago:
http://impresscmsdev.assembla.com/spaces/impresscms/tickets/510

Maybe we need also discuss the right order.

Ticket #538 created, and linked with ticket #510.

I think we need to verify both content and order if we want to solve this well.

The order of the files is of some importance, but CSS Specificity is more important.

If the same style selector - p, h1, table, .myclass or div, for example - is styled in 2 different places, the last one wins. As bleekk says, we really shouldn't be defining general styles in the last css file to load, as icms.css does.

Here's a technical overview of how stylesheets are currently loaded -

* yourtheme/theme.html begins the layout
* meta tags and header come first
* yourtheme/style.css gets included
...
* smarty var for module_header comes at the end of the head section
* body section starts

Nowhere does your theme need to specifically include a module.css or icms.css file - where does that happen? in the smarty var *module_header.

icms.css gets added by /header.php, before all the textsanitizer and jquery plugins. Later, as the modules load, they can add their own stylesheets to the module_header and they are loaded behind icms.css.

Recap: theme -> icms -> module

In my view, we need: icms -> module -> theme

Hi guys, can I make a suggestion?



done.

Quote:
I agree, in theory.

icms.css and icms_rtl.css are completely unnecessary and are only there because they have always been there (or there under a different name). An extra css file to include is just another http call and an inefficient way to take care of styling.

All the elements in those 2 files should be defined in each theme, not here. If we were to just remove these files, old themes would need to be updated to be sure these elements got styled.

I am about to mark them both as deprecated and the warnings will start showing up in the debug messages. Start updating your themes, these files will be gone in 2.0!

Quote:
Easily done, without any changes to the core.

In you theme, place <{$xoops_module_header}> above where you include the stylesheet for your theme.

old themes need an update for the icms 2.0, either way, because the old xoops_ smarty-tags are outdated.

Thanks Steve, this tip of moving the order of the theme CSS and the module header smarty tag solved this problem with my Bootstrap experiments.

Quote:

they may be outdated, but they haven't been deprecated, yet.

So how did the bootstrap experiment go? Is this a good option for buikding themes? I like that it has a grid and apprently sane typography controls.

Well, in order to work with bootstrap-based themes, we will need to refactor most of the templates that are in the system currently. That's not a lot of extra effort, as I would like to work towards getting those converted to HTML5 for ImpressCMS 2.0 anyway.

I must admit I'm no CSS expert, but I've managed to create a basic Bootstrap theme in a couple of hours. After that, I could add draggable objects in 5 minutes Eye candy galore.

It makes all the basics extremely easy, and it really invites you to experiment with adding a button here, a jQuery element there. I love it

I'm considering making bootstrap the standard to build themes on. That would make it easier for theme designers to create works for ImpressCMS, and it would make it easier to write tutorials, having a standardised and well-documented theme foundation.

My dabbling works are to be found at my dev site.