Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Paul Solecki
Removing aui.css?
October 25, 2012 7:09 AM
Answer

Paul Solecki

Rank: New Member

Posts: 20

Join Date: July 31, 2012

Recent Posts

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
RE: Removing aui.css?
October 25, 2012 7:46 AM
Answer

David H Nebinger

Rank: Liferay Legend

Posts: 6517

Join Date: September 1, 2006

Recent Posts

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
RE: Removing aui.css?
October 25, 2012 7:53 AM
Answer

Paul Solecki

Rank: New Member

Posts: 20

Join Date: July 31, 2012

Recent Posts

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
RE: Removing aui.css?
October 25, 2012 8:12 AM
Answer

Paul Solecki

Rank: New Member

Posts: 20

Join Date: July 31, 2012

Recent Posts

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
RE: Removing aui.css?
October 25, 2012 8:34 AM
Answer

David H Nebinger

Rank: Liferay Legend

Posts: 6517

Join Date: September 1, 2006

Recent Posts

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
RE: Removing aui.css?
October 25, 2012 8:38 AM
Answer

Paul Solecki

Rank: New Member

Posts: 20

Join Date: July 31, 2012

Recent Posts

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
RE: Removing aui.css?
October 25, 2012 11:30 AM
Answer

David H Nebinger

Rank: Liferay Legend

Posts: 6517

Join Date: September 1, 2006

Recent Posts

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
RE: Removing aui.css?
October 25, 2012 11:54 PM
Answer

Paul Solecki

Rank: New Member

Posts: 20

Join Date: July 31, 2012

Recent Posts

Understand and thanks for the info emoticon

Next step is styling the portlets.
David H Nebinger
RE: Removing aui.css?
October 26, 2012 7:38 AM
Answer

David H Nebinger

Rank: Liferay Legend

Posts: 6517

Join Date: September 1, 2006

Recent Posts

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... emoticon
Paul Solecki
RE: Removing aui.css?
October 29, 2012 1:51 AM
Answer

Paul Solecki

Rank: New Member

Posts: 20

Join Date: July 31, 2012

Recent Posts

Thanks again David emoticon I'm getting there!
Anonymous
RE: Removing aui.css?
October 29, 2012 9:48 AM
Answer

Anonymous

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.
Anonymous
RE: Removing aui.css?
October 29, 2012 9:52 AM
Answer

Anonymous

in the _diff folder is where you can edit custom.css
if you are inheriting a theme such as "classic" then in the _diff folder you can overwrite main.css to include an additional css file.

@import url(base.css);

@import url(application.css);

@import url(layout.css);

@import url(dockbar.css);

@import url(navigation.css);

@import url(portlet.css);

@import url(forms.css);

@import url(custom.css); this custom will come from the classic

you can add another css file

@import url(mycustom.css);

so in _diff/ folder
will be main.css and mycustom.css files
David H Nebinger
RE: Removing aui.css?
October 29, 2012 10:24 AM
Answer

David H Nebinger

Rank: Liferay Legend

Posts: 6517

Join Date: September 1, 2006

Recent Posts

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
RE: Removing aui.css?
October 30, 2012 12:56 AM
Answer

Paul Solecki

Rank: New Member

Posts: 20

Join Date: July 31, 2012

Recent Posts

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 emoticon

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 emoticon