Removing aui.css?

[Paul Solecki, módosítva 11 év-val korábban]

Hi again,

Is there any way to stop this being used? It's doing CSS resets that I don't want, like adding padding/margin to list items. However list items are used for navigation and I don't want it.

I shouldn't have to override either. The reset.css should be what is used to clear this stuff.

There seems to be no 'blank slate' theme to start from?

Any ideas?

Thanks,
Paul.

[David H Nebinger, módosítva 11 év-val korábban]

aui.css is used to style all AUI elementes which the portal uses throughout. Removing it would be a total mistake.

My recommendation is to not mess with the global theme (unless you are developing a global theme and want all of your elements styled in a similar manner), and use local classes and CSS overrides in your portlet's CSS.

That way the global theme can style all of the normal Liferay elements and your elements can be styled individually. It allows the portal elements to continue to work and your elements to have the specific look and feel you're going for. Sometimes this will result in you're having to undo global theme settings or re-apply some CSS rules, but it will have the least impact on the portal overall.

[Paul Solecki, módosítva 11 év-val korábban]

Thanks for the reply David.

Sorry I didn't make it clear in my original post but this is a theme and is global to the whole website, it's not for a portlet.

In using _unstyled as the parent it seems to have removed all styling on things like the dockbar so I'm not sure why any aui.css is included at this point? All it seems to be doing is a global reset but rather than resetting and removing margins etc it's actually applying global styles to elements like lists which is the issue. Although it maybe nice having a standard 1em padding on a ul, I don't want it globally because the navigation is a ul.

I guess I can try and override those settings but it's a bit annoying not being able to start from scratch with the CSS.

Cheers,
Paul.

[Paul Solecki, módosítva 11 év-val korábban]

Actually it's raising another question.

I have both reset.css and dockbar.css in my _diffs/css folder and it's not loading either of them?

Any thoughts? This is why it's not doing a reset. Also the original dockbar.css file has all the classes in but the styles are empty.

[David H Nebinger, módosítva 11 év-val korábban]

Unstyled is truly unstyled. The class names the portal uses are defined in it, but no styling. The intent is that you start from unstyled and add all of your styling info to the classes to get the portal to where you want it to be.

I try to avoid starting from unstyled because I really don't want to start from scratch. I typically use "classic" for the parent theme and then make my changes in the appropriate files in the _diffs folder.

Whether another css file is included or not will depend upon the main.css file as to what is included and what is not.

The aui.css file I believe is automagically included when using AUI (the js pulls in the css file) and is not part of the normal theme development.

[Paul Solecki, módosítva 11 év-val korábban]

Thanks again David.

I'm slowly getting there. It appears either Eclipse or the IDE plugin weren't doing what I expected. For example, I copied my own main.css into _diff/css but this seems to have automatically overwritten the normal css/main.css. Removing it from _diffs/css put it back to what it used to be.

I'd hadn't expected that which is why it wasn't loading anything, I'd actually overwritten the main.css without realising it. I guess I don't really understand the need for a _diffs dir if it just overwrites the original files anyway.

[David H Nebinger, módosítva 11 év-val korábban]

Theme development is like that...

When there is no file in _diffs, the file from the parent theme will be used. When you want to override one of the parent files, you drop it into the appropriate folder in the _diffs directory.

At build time, your theme project will have all parent files, the files in _diffs which replace those files, all bundled up into your deployment artifact.

This ensures that if the parent theme changes, your changes are isolated in the _diffs folder. So in the upgrade from 6.0 to 6.1, if unstyled changed somehow (new files, whatever) your plugin will get all of those files.

Kind of like an obtuse form of inheritance, but it works...

[Paul Solecki, módosítva 11 év-val korábban]

Understand and thanks for the info

Next step is styling the portlets.

[David H Nebinger, módosítva 11 év-val korábban]

This I usually do by providing a CSS file, declared in liferay-portlet.xml. Use class names on the elements. Use chrome to inspect elements to find style info that needs to be 'undone' from the global theme styling.

Wash, rinse, repeat...

[Paul Solecki, módosítva 11 év-val korábban]

Thanks again David I'm getting there!

[David H Nebinger, módosítva 11 év-val korábban]

Bradley Wood:

I typically use "classic" for the parent theme and then make my changes in the appropriate files in the _diffs folder.

I would recommend starting with _styled instead of classic. Because many themes may go in a different direction than the classic theme.

For many of the themes I've done, they've actually been closer to classic than _styled, so it's been easier to start from there.

I guess it depends on which parent theme is closer to your final design...

[Paul Solecki, módosítva 11 év-val korábban]

Cheers again. Our website design is nothing like the themes I've seen so trying to unstyle a styled up theme is unfeasible and would be a lot more work.

I've gone with unstyled along with Firebug and managed to sort as much as I needed

There are somethings I'd consider odd, like turning portlet borders off doesn't just turn off the borders, it removes some HTML as well.

That said I also have to style NetDimensions using the same design and I can't change any HTML in that at all :/ Plus I discovered a Transitional Doctype and tables for layout in places