Design Concepts,Truelly Skinable Website

[1DMF]

Hello,

I've got a new project in the pipeline which needs to be 'skinable' including change to company name, logo etc...

I wan't to do this correct from the off and so would like some advice....

Let's say we have a company logo on the left now to make a site skinable, I assume you should design everything regarding colour scheme, fonts, etc... via CSS but normally you would still have in the XHTML an <img> tag, but if I want to make this site fully skinable, would it be better to use a div with a class? i.e.

The HTML template wouldn't need to be altered for the img tag, as i would use

<div class="companylogo"></div>

.... then the css would be

.companylogo {
background: url(companylogo.jpg);
height: 200px;
width: 200px;
border: 0px;
}

Should I try to keep in mind this type of design concept throughout, thus having a site that can be skinned / white labelled by simply editing one CSS file.

At what point should CSS NOT be used for dynamic / changable 'CONTENT', as I understood CSS was 'DESIGN' not 'CONTENT' but the two can blur as i've just shown.

should I have a separate database system for configuration data, i.e. my HTML will use a template system when I can use my 'CGI' program of choice to replace 'Company Name' via a database, so I then edit the database to white label for another company, or can this be done via CSS and more importantly SHOULD it be done via CSS.

if you had a <div class='companyname'> tag where the company name could be inserted, how would you change that content via CSS?

.companyname {

what goes here?

}

and last but not least, what is the diference between using class vs ID with CSS, i.e.

.myclass{

}
#myid{

}

thanks 1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Foamcow]

They don't blur though.
You are proposing adding content using CSS which is what you shouldn't do.

i.e. the logo is content and not 'decor' so it should be inserted via the HTML.

If you want to change what the logo looks like then change the source file for it but keep the same name for the file.

Likewise you wouldn't change the company name via CSS as it's content so should be changed in the markup.

There is no blurring of the roles other than you are asking how to alter content using CSS. It can be done as you have described but it breaks the model of standards based design.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucesterhire

 

[Foamcow]

an ID is a unique identifier for an element. It must be unique as it defines a target for that element.

A class, on the other hand, is a way to assign a set of style rules to multiple elements. It is an identifier of the the style rules.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucesterhire

 

[1DMF]

Thanks foamy, this is where I thought I was bluring the concepts and confusing myself - nothing new there!

However, to make something skinable as I require I think I need to break the rules!!!

Having to edit the HTML Template for each white lablled site stops it from being a Template by nature, however if i use my idea say for the logo, the HTML pages will always be the same, and not need editing because the 'CONTENT' controlled by one simple CSS file.

Also should a design layout or template change need to be made, it could easily be pushed out to all the sites using it without each individual site needing to be manually editited one at a time!

This is where I keep finding myself at odds with the standards, functionality vs symantics, I want the functionality of having a one HTML template fits all, but the standards don't allow for it.

The dilema continues - lol

-------------------------------------------
I see what you mean with the ID vs Class, multiple items can have the same class, they cannot have the same ID.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[ca8msm]

I really don't see the dilemma. As FoamCow suggested above, if you used an image tag like:

<img src="companylogo.jpg" />

Then, all you would need to do is make sure that the company's logo is named companylogo.jpg. Any manipulation to the actual content (i.e. company name, brief etc) would be pulled from the database not the CSS file.

You are basically creating a simple form of a CMS and I don't recall any of the systems I've seen getting any content from a CSS file.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[Foamcow]

You don't have to edit the HTML.


Imagine you put a logo in like so...

<img src="logo.jpg" />

Who's to say what exactly logo.jpg is?

You could put a totally different logo in there for each site. So long as the file was called 'logo.jpg' you wouldn't have to touch the HTML.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucesterhire

 

[1DMF]

i guess what i need is actually...

<img src="logo.jpg" class="companylogo">

<style>
.companylogo {

width:100px;
height:100px;
border:2px;

blah blah

}
</style>

if sizes, borders and other DESIGN attributes change, that can be dealt with via CSS the fact there is CONTENT of type image does not.

of course that means all sites have to have the logo called the same with the same file format (unlikely!), which 'could' also cause confusion and could acidently overwite the wrong image as they are all called the same and have no identifying factor to them, but at least the HTML won't need editing.

it's not as flexible as my suggestion, as the design team will enevitably change a logo , call it my_new_logo.gif and now I have to edit the html because the file type has changed from jpg to gif - HTML breaks!

if i then make a change to the standard template because the FSA make a rule change and lets say a disclaimer needs adding or a word needs changing, then push it out to all the sites , now they all break because the file extension is wrong.

once again flexibility needs to override symantics!

The only way I can see round this is to hold a master config file with the filename of the company logo...

<img src="<tmpl_var name='companylogo'>" class="companylogo">

my example is based on the fact I use PERL and the TEMPLATE module!

this way i have symantics, flexibility and complete Processing->Content->Design separation, the ultimate goal!

so I process via PERL, use the template module to have dynamic content via a template system that enables presentation separation from the PERL code, while also meeting CONTENT->DESIGN symantics and standards.

What do you think ?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Foamcow]

Using a config file or database table would be the most logical solution to what I think you are doing.

If you don't want to give other users access to the whole HTML file, then why not use an include that just pulls in the img tag for the logo? That's probably unnecessary over-engineering thoguh.

Equally though, you could either:
1. Ask the design team to follow a simple set of guidelines. i.e. save the logo as a jpg and call it logo.jpg

2. Change the file format and name yourself. It's no different to changing the HTML or CSS.

Which brings me to another point. You are willing to change the CSS so why not willing to change a file reference in the HTML?

Depending on the context of the logo you may be better using an ID, but that's just personal choice. If you only have 1 element on the page using a class then why not target it via it's ID?

I don't quite follow what you are saying regarding changing wording or adding disclaimers. Surely through use of an include file you could roll out a change across many sites in a few moments? The disclaimer should be text afterall, making any change quick and easy.

Don't take this the wrong way (as if you would ) but I think you have a propensity to over complicate things in the pursuit of an early goal. I've learned that it's often much more practical to do things the manual way (i.e. edit well crafted HTML) than it is to devise some system that will fit all eventualities.

In my opinion, no templating system can ever meet the requirements of every single site unless all the sites follow a set of basic rules that allow them to fit.
What you can do though, is build a templating system that is flexible enough to allow you to adapt it to specific situations. A system that gives you the sponge and filling and just needs a bit of icing and the cherry on top.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucesterhire

 

[1DMF]

Yup I do tend to over engineer things, but I still want to go down the route of one HTML file fits all.

I can't be doing with having tonnes of HTML files all different from each other when they are all the same site underneath and need to push out changes to all without the headache of having to remember what was different in each file on each site.

I will be using includes and the design of the site hasn't even been decided or discussed, so what will be done with which technology is all abit up in the air, before the design has even been discussed or a single piece of code writtem, I've decided to think about the appoach, hence this discussion - so it certainly isn't in the persuit of an early goal! - the game hasn't been decided, the rules aren't defined and the players aren't even on the pitch, so no goal in sight yet!!!

In my opinion, no templating system can ever meet the requirements of every single site unless all the sites follow a set of basic rules that allow them to fit.

exactly! - they will all be the same site, just branded as if they were not, with different company name, logo, colours etc..., but all exactly the same! - that's why i want a template system with one set of master XHTML templates.

I think you've given me enough food for thought, as always a pleasure talking with you foamy - just one thing though...... I hate glacia cherries!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.