Changing the theme of the webpage

Question

I know this is nowhere related to coding question but before I start working on the scenario I would like to get some guidance.

The scenario is to give the option to change the theme of the page. What I have decided is, give common class for multiple elements like

• h1 tag for all main titles of the page
• .image class for all the images of the page
• class for p tag for the content of the page
• and so on....

So I will create multiple stylesheet with these class names with different color.

But the difficulty comes with the positioning of the each elements. I tought of giving inline style to each element to define the position related stuffs. For example

.image {border:grey solid 1px /*this border color will be different in each stylesheet*/}

<div class="image" style="float:right; margin:6px"><img src="" /> </div>

So like this all other elements will be having inline css for the aligning purpose.

Do you think this is the best way to achieve the theme scenario??

PS - User has access to customize the theme. (We are giving edit panel). This is not actually web page, it is a product module (Just like how we change the color of the Powepont graphs and charts).

Answer 1

Not really... I think you should load a default "blank' theme for the basic styles and general styles. Than load another stylesheet depending on what theme the user has chosen. In that theme you specify the theme-specific styles (like the border-color from your example).