Best way to start a new skin

6/22/2009 3:20:01 PM

YvonTurcotte

Total Posts 1

View Posts

I,

I found a great template for my new website (http://www.styleshout.com/templates/preview/MarketPlace1-0/index.html) and I want to know the best way to start creating a new skin ? Create from scratch, copy from an existing skin.

At the moment, i'm a little bit confused with all element from the css files.

Thanks for you help and congratulation Joe for your great job.

6/23/2009 8:40:33 AM

Joe Audette

Total Posts 18439

View Posts

Re: Best way to start a new skin

Hi Yvon,

I would copy an existing styleshout skin and use it as a starting point.

The main thing to realize is that css is basically comprised of

selector {style rules}

in mojoportal you will mostly have to use different selectors than what the template uses based on css classes available in markup rendered by mojoportal when you view the page, so the idea is to harvest the style rules and put them in mojoportal appropriate selectors.

you do have some control of the outer wrapping divs and css classes in layout.master but most other things are determined by the cms but it does provide plenty of class names that can used in your selectors, you may need to view the source of the page and study the markup and classes to figure out the selector you need.

I will say that most of the styleshout skins have the same selectors but different style rules, so starting with an existing styleshout skin should have a lot fo the correct selectors already there and you just have to replace the style rules based on the new design.

Hope it helps,

Joe

7/8/2009 3:03:23 PM

Nux

Total Posts 183

View Posts

Re: Best way to start a new skin

Hi Yvon,

I'm working on my second site now, and I must say that building your own skin is the most difficult thing to do (for me) on mojoportal.
Specially your first site but I will tell you how I work:

1. Create the correct xhtml/css without mojoportal. If everything is ok, you have a good base to start with.
Tip: if you use a background for your site, don't put it in the body {}, but setup your html with <body class="pagebody"> (like the skins in mojoportal) and put the background on that class, cause else you will get problems with your WYSIWYG.

2. Now take an existing layout.master (that way, you have all mojoportal tags already in the document) and write your tags around those in the master file.

3. Mostly you have 1 css file if you start with your own setup, and mojoportal has much more css files for the skin. But I don't use them.
If you work with the StyleSheetCombiner, you can tell mojoportal which css files must be included and how. So I start with one css for my own skin.
I follow a bit the logics of mojoportal to split the css for colors, layout, ... but not that much. Cause I think there are to much css files in mojoportal, but that is my opinion (sorry Joe). If that works, and your own css is correct, so you have styles for the most normal things in html (a, p, H1-H4, ...) you will see that the site looks probably fine. Then you need some "fine tuning" for other things. Joe has done a great job with creating the correct id's/classes, so you can go far with tuning your site with css. Except the external things (UI Widgets) I have done what I want with my site.

I repeat, that is my approach and it works fine for me. Also important: I use firefox and firebug to check everything. That combination is really a "must have" for making your own skin.

So, I hope you understand how I work and good luck.
RSV4Aprilia.net is example of my work with mojoportal, so you see that everything is possible

Stef

7/9/2009 9:55:20 AM

Joe Audette

Total Posts 18439

View Posts

Re: Best way to start a new skin

Hi Stef,

Those are some good tips! I certainly agree it can be unwieldy having too much granularity of css files and I assume many designers have their own preferences on how to organise them so that was certainly part of the reason I implemented the stylesheet combiner and the use of the style.config file to allow designers to organise things as they see fit. I think people often look at the existing skins and think that skins must be organized a certain way because all the included ones are organised in a similar way, but the only reason that is true is because I happened to be the person who made most of the included skins and I just do it the same thing every time. I originally organized the css files based on some recommendations in a book I read and then I just kept doing it the same way. The authors of the book noted that this organization made it easy to make re-usable styles that could be plugged in, like you could keep all the color related stuff in stylecolors.css and then you can change the color scheme easily while keeping the same layout just by swapping in a new version of the file.

However I admit also that I have not followed this rigorously and over time have kind of just added new stuff to the bottom of stylelayout.css because its too tedious to always separate it when I'm adding new stuff to all the included skins.

At any rate I like these tips and thought it would be good to make this post easy to find so I have started a new page here http://www.mojoportal.com/skinning-tips-and-tricks.aspx and linked to this post.

Best,

Joe

7/10/2009 2:01:34 AM

Nux

Total Posts 183

View Posts

Re: Best way to start a new skin

Joe, thanks for the credits .

About that many css files: it is up to the creator of the skin to use it or not. I don't use it, but I'm happy to know that I can use them if needed.
Like I said, if you make rules for the standard tags (which I think is a must for a site), you get far with your site. If you want more, you can do it and that is the most important thing to know!

7/3/2011 11:38:40 PM

Nathan Allen

Total Posts 26

View Posts

Re: Best way to start a new skin

I would like to see a blank skin maby just the files needed to make a skin and the xhtml dummy file pointing to the correct css files to mod if that makes sense basically in what i have in mind you start with a blank skin with just the bar nesaty open it with expressions studio ... or you fav editor after your happy with its looks you just copy it to the skin folder and test it .... i know this may be a pipe dream but still would be nice... the xhtml does nuthing but to serve as a visual aid for design

any ways

thanks m8t

7/4/2011 9:09:16 AM

Joe Audette

Total Posts 18439

View Posts

Re: Best way to start a new skin

I recommend don't start from scratch, start with an existing skin and maybe after you have mastered understanding how the skinning system works and which things are required and not required then you could possibly start from almost scratch. But is is far easier to not start from scratch, just chop out things you don't want one at a time and if it causes an error then you know it was a required element.

I would start with a non-artisteer skin, choose the existing skin that is the closest approximation to the layout you want and the menu structure you want not based on colors since colors can be easily changed from CSS but doing layout from scratch requires a lot more understanding. Then copy and rename the skin and make small changes at a time and check the results in the browser as you go.

You can't really use design tools to directly create mojoPortal skins, you could use a design tool and make an html page with a design and then learn how to make a skin based on that design.

You can use as many or as few CSS files in making a skin as you prefer and they will be combined and minified by our CSS Handler. So you can organize your CSS any way you like or re-organize it from an existing skin.

The bottom line is skinning efficiently requires a strong understanding of CSS and the viewing the source of the page to see the markup and know what you can use for CSS selectors.

Re: Best way to start a new skin

hi,

I want to build website with customization

So,I need to know what is the required classes (CSS) must exist

Best Regards

7/6/2011 3:03:46 PM

Aaron W

Total Posts 115

View Posts

Re: Best way to start a new skin

The best thing to do is follow the links that Joey supplied above. Those will get you started.

1/23/2012 12:42:16 AM

patel.vipul444

Total Posts 16

View Posts

Re: Best way to start a new skin

Hi Joe,

as you stated i started with artisteer-30verticalmenu2 theme and completed two projects.

http://www.trimax.in

http://www.rsrtc.rajasthan.gov.in

but now i want to use non-artisteer theme in my 3rd project, so can u please say which theme closely matches to artisteer-30verticalmenu2 ?

and also layout is always 3 column, what about One fourth and (2/3 - 1/3 combinations) , i want to build it in my code, so can you say is it possible? simply i want to give more options(not only left,right,center) while editing page. or basically i can say row-wise layout.

i already done with normal aspx and css combinations, now i want to integrate it in mojoportal.

hope my question is not silly......

Thanks for mojoportal....

vipul patel

1/23/2012 6:49:38 AM

Joe Audette

Total Posts 18439

View Posts

Re: Best way to start a new skin

Hi Vipul,

It is possible to use up to 5 content panels and you can position the extra 2 anywhere you want in layout.master. But that won't really give a rows and columns kind of layout. For that I recommend to just use one content instance in the center panel and then do layout inside that content using content templates. Keep in mind that each content instance you add to a page is requiring additional hits to the database to get the page content so it isn't really optimal to put lots of instances on a page, it can be more efficiaent to use a single content instance and do layout inside that instance.

You can find some non-Artisteer skins in the extra-skins.zip download on our codeplex download page.

Hope that helps,

Joe