Themes: Structure of a Theme

Posted by: timgnoOn 2011/1/19 17:37:48 5151 reads
Building some layouts, I realized that the usual templates as zetagenesis, Suico, and others, there are several css files. Google for SEO does not accept the inclusion in a row on top of the style.css file, and so I decided to adopt a simple method for all themes. Only three css files that are placed on the head of the line in the file themes.html or files meta.html in this way:

<{* Xoops style sheet *}>
<link rel="stylesheet" type="text/css" media="screen" href="<{xoAppUrl xoops.css}>" />
<{* Layout theme style sheets *}>
<link rel="stylesheet" type="text/css" media="screen,projection,print" href="<{xoImgUrl css/layout.css}>" />
<{* Canvas theme style sheet *}> <{* for production *}>
<link rel="stylesheet" type="text/css" media="screen" title="Color" href="<{xoImgUrl css/style.css}>" />


and in any such occasions and for sites that fit the phone, you can add the print.css file in this way:

<{* print style sheet experimental *}>
<link rel="stylesheet" type="text/css" media="print" href="<{xoImgUrl css/print.css}>" />


Starting with the basic structure, we can define the files:
- xoops.css ... becomes the basis of the style of the theme for all the html tags and classes and IDs xoops.
- layout.css ... all the classes and id for the structure of the template.
- style.css ... all variants that may relate to jquery, mootool, and other libraries that need a style.

For example in my new theme I'm using instead of the title tag a class that makes me see your content on a popup near the mouse, which shows the description of the tag title "anchor" using jquery can change at will in the style.css file and so this class for other features that I want to take on my theme.

I think that all those who create new themes should deliver this kind of structure of the template.

If you have other ideas, send a comment.

timgno of TXMod Xoops