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).
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).