Hi,

The Custom Css Class option in the Module Settings of many modules allows for adding a custom css class to the div that wraps around the module content and title.

Example rendered markup if mycustomclass is set in the "Custom CSS Class" option of an HTML Module instance:

<div class="art-Post-inner panelwrapper htmlmodule mycustomclass" >
  <a id="module1" />
  <h2 class="art-PostHeader moduletitle">Module Title</h2>
  <div class="modulecontent">
    <p>Hello, Welcome to my website!</p>
  </div>
  <div class="modulefooter" />
  <div class="cleared" />
</div>

The content of the module (what you type in the editor) is enclosed in the modulecontent div. If you want to style P elements that are children of your custom class, you have the following in your CSS:

.mycustomclass p{font-size: 14px;}

To change the layout on the homepage but not others, you need to enable the "Allow Setting Skin for Page" option in Site Settings. You would then be able to select a different skin on each page.

HTH,
Joe D.

Hard coding style into content using the style attribute is contrary to the idea of having a skinnable site (and it makes the page heavier using inline styles because there is a lot of duplication of style rules). If you change the skin that hard coded style is still there because it is in the content. Whereas if you stick with external CSS files you can change everything about your design by changing the skin.

One of the most important purposes of CSS style sheets is separation of style from content.

We are just using best practices that all designers should know and use.

I'm overdue to update the road map page, actually the current version of mojoPortal already supports editing CSS files in the browser as well as uploading and downloading skins as zip files, and copying/renaming skins.

I'm not sure yet if I will ever implement support for editing the layout.master or theme.skin files in the browser since it would be difficult to validate those files and mistakes could break the site. But with the upload and download functionality one could easily download the skin to edit those files and test on a local copy of the site then upload it again when satisfied with the changes.

Look under Administration > Advanced Tools > Design Tools

One new thing I have done for the coming release is that I made it possible for users in roles that can manage skins to choose a user specific skin from their profile even if the per user skins feature is not enabled for other users.

So the quick edit workflow for CSS changes (after the coming release) would be

1. copy the current site skin into a new version name like skinname_vx where x is a version number you increment.

2. Click the button in design tools to set a cookie so the CSS is not cached for you specifically (this is far better than disabling the cache for the whole site from user.config

3. change the skin from your user profile to the new version

4. edit the CSS files as needed

5. when you are satisfied with the result then click the button again to disable the cache blocking and then go set the site to use the new version of the skin, and go back to your profile and set your skin back to the site default.

next time you need another change just repeat the process.

In general though major skin design work would probably flow better working locally on a copy of the site and editing with your text editor of choice.

Best,

Joe