Discussion about skinning mechanism

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
9/3/2009 1:52:42 PM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Discussion about skinning mechanism

Hi Tjerk,

Also wanted to say that if you do take an existing skin and re-organize and condense the css to one file I would be glad to have it in the project to replace the existing version and have an example for others to follow that is more simple. I do get your points and see the value of that.

Best,

Joe

9/3/2009 4:14:26 PM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Discussion about skinning mechanism

Hi Tjerk,

I have been chewing on your ideas and I must admit that in terms of css organisation I am seeing your points. If the eixsiting skins were organised more simply it would make it easier to grok for new people trying to grok how to make custom skins.

I am willing to reduce and condense at least one skin myself and since it is your idea I will let you choose which one.Laughing Just let me know.

Maybe you or others would be willing to help the project by doing the same with other skins.

Best,

Joe

9/3/2009 4:30:46 PM
Joe Davis
Gravatar
Total Posts 2253
View Posts

Re: Discussion about skinning mechanism

I have a skin I will be contributing to the Project soon. I will make sure it is reduced to one css file when I submit it. :-)

9/4/2009 5:43:50 AM
tjerk
Gravatar
Total Posts 9
View Posts

Re: Discussion about skinning mechanism

Hi Joe,

of course i would like to give it a try. But not right away i am afraid. As soon as there is room in my busy schedule i will be happy to work on it.

Kind regards,

Tjerk

9/4/2009 3:04:57 PM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Discussion about skinning mechanism

Hi Tjerk,

I am beginning work on condensing the dcarter-ticktockpro skin into 1 css file. Its time consuming but easy and mechanical work for me. I will probably devote some time to do this for the all the skins eventually. I have to admit that while there was nothing incorrect about the current css organisation, I can see how it is kind of imposing a complexity that can be off putting for designers trying to grok mojoportal skinning, especially at first. Your feedback is right on, simpler is better, and if I can provide skin examples that are not complex it should mae it easier for designers to get going with mojoPortal.

Best,

Joe

9/4/2009 4:43:24 PM
tjerk
Gravatar
Total Posts 9
View Posts

Re: Discussion about skinning mechanism

Dear Joe,

Thank you very much.

The main problem we had with the the CSS-structure was that selectors were spread over various CSS-files. One selector could be in several CSS files which was confusing and not logical because like you say on the Mojo-site: 'It is all about selectors'. Selectors are best used in such a way that they can be found in one place. At the moment the CSS-files are (partly) organised by attribute in stead of by selector.

It is perfectly OK if different selectors are in different CSS-files to keep things organised.
We recommend this if there is a large number of individual selectors, like in Mojo.
Squeezing everything in just one CSS-file might be a lot of onnecessary work and even turn out confusing.

We have this as the normal way of working on large sites:

One master-stylesheet called something like main.css or base.css.

The other stylesheets are included in this master style sheet with this instruction: 

@import "layout.css";

@import "texts.css";

@import "modules.css";

In this way we only have to reference one stylesheet in each page and there is no need for a custom solution via an xml config file.

In a larger stylesheet we separate the individual blocks with comments like these:

/* ---------   STRUCTURE ------------- */

/* ---------   TEXTS -------------------*/

I do agree with you that this discussion is bit my own fault.
When you are new in a CMS, there is a lot to learn and discover and confusion is waiting around every corner.
The one thing you feel confident about at that stage is the HTML - CSS part.
I should have taken more time to discover everything first.

 

9/7/2009 8:37:46 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Discussion about skinning mechanism

Hi,

fyi, for the next release I re-organised the css of the included skins.

I combined the stylelayout.css, stylecolors.css, styleborders.css, styleimages.css stylegridview.css using this online tool.

I also renamed some of the other css files to make them sort together in the file system so they are easier to find.

So now the style.config file f included skins looks like this:

<file csswebconfigkey="YUITabCss" imagebasewebconfigkey="YUISkinImagePath">none</file>

<file cssvpath="/ClientScript/oomph/oomph.css" imagebasevpath="/ClientScript/oomph/">none</file>

<file cssvpath="/Data/style/cluetip/jquery.cluetip.css" imagebasevpath="/Data/style/cluetip/">none</file>

<file>style.css</file>

<file>stylemenu.css</file>

<file>styletreeview.css</file>

<file>styleblog.css</file>

<file>styleforum.css</file>

<file>stylefeedmanager.css</file>

<file>styleformwizard.css</file>

<file>stylewebstore.css</file>

<file>styleaspcalendar.css</file>

<file>styledatacalendar.css</file>

style.css is the main file made from the combined ones

Best,

Joe

9/7/2009 9:19:44 AM
tjerk
Gravatar
Total Posts 9
View Posts

Re: Discussion about skinning mechanism

Wow Joe, i am impressed. This will make Mojo a lot easier for newbie-users like us.

And, promised is promised, we will contribute a skin too.

You must sign in to post in the forums. This thread is closed to new posts.