Question about custom css classes

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.
This thread is closed to new posts. You must sign in to post in the forums.
6/30/2010 7:35:35 AM
Gravatar
Total Posts 4

Question about custom css classes

Hi, i've noticed that there's no help for Custom Css Class (or i haven't found it). Just wanted to know how does it work ? When I add Html Content, at the bottom of the settings, there's a place where I can write the name of my css class but even if I write the right name, it doesn't seem to work. Thanks !

 

I also want to change the layout.Master only for the home page, how can I do this ?

6/30/2010 1:22:08 PM
Gravatar
Total Posts 2210

Re: Question about custom css classes

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.

5/25/2011 5:53:15 AM
Gravatar
Total Posts 76

Re: Question about custom css classes

 

Was there any reason why you choose to use this round about way than making it possible to directly using a style tag on the custom CSS option?

It would be really easy if it was possible to use the style attribute to apply styles instead of having to actually modify the CSS files on the server.

Thanks.

5/25/2011 6:10:22 AM
Gravatar
Total Posts 18439

Re: Question about custom css classes

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.

5/25/2011 10:14:14 AM
Gravatar
Total Posts 1204
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Question about custom css classes

Also, in case you didn't know, the mojoPortal roadmap includes a plan to be able to more easily change skins and CSS right from an administrative interface in the browser. When that is implemented (no time frame available yet) it will definitely make the whole skinning process quite a bit simpler and more convenient, especially for those working in a hosted environment.

Jamie

5/25/2011 12:47:03 PM
Gravatar
Total Posts 18439

Re: Question about custom css classes

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

5/25/2011 12:51:26 PM
Gravatar
Total Posts 18439

Re: Question about custom css classes

Going back to the original question again another good reason for using a CSS class instead of a style attribute is that the style attribute only applies to the specific element it is on, so adding a style attribute on the container div means one could only style the container. Whereas a CSS class on the container div can be used as part of a selector for styling any child element, not just the container div.

Best,

Joe

5/26/2011 10:09:32 AM
Gravatar
Total Posts 76

Re: Question about custom css classes

Thanks Joe, Jamie...I understand now..

And Joe,thank you for giving the option to access the skin files from the Admin panel. It's of great help.

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