Before to present in detail my new theme, (i would say my first experience in full CSS/XHTML and without table, let me tell you how was the steps to arrive in this final result ans before that, a quickly recall on my sites.
The original news is in french langage
hereSynopsis:
0) Introduction
1) Starting theme - Idea
2) False columns
3) Mainly "div"
4) Mitres, part 1: Rounded without image
5) Mitres, part 2: How to color the active mitre
6) W3C validation
7) Downloading the theme
0) IntroductionAfter my first web site, (intranet), my first project with XOOPS (not visible), (2003, June, I think), i used to enjoy to work on projects via this fantastic CMS et this fantatic communauty ("inégalable et inégalée").
Read more...
My first public site was
the
Ligue Rhône-Alpes de volleyball, and i worked on the theme (
Read french news).
This theme is avalaible in download section
here.
I continude 2 sites "vitrine" in multilangage french / english. Theses sites don"t appear as XOOPS sites but..., click on bottom "login", you will find lements that you know!
These sites are
Laboratoire de Dynamique des Machines et des Structures (
Read french news) and a specific software named
ROTORINSA.
Then, i realized the whole updating of (core, modules and theme) the nice site of the asocation's conservation of the Asian elephant,
Elefantasia, managed by Gilles.
For my new last site, after reading the Christian's News
Xoopsing a xhtml/css template in 10mn, i'm said myself : Why not me ?
So, I have try it, just a challenge, not really need for my new site, just a challenge!
[pagebreak]
First at all, i spend just 14 days ans 10 mn, so, just 14 days more than Christian !
I was inspired with these sites:
-
Pompage.net-
Alsacréation and
here-
peutetreunereponse.netMy objective was (without objet ive fir the site, just theme onjective):
- Create an origianl theme,
- Just use CSS/XHTML
- Tableness (without table)
- W3C validation
- Use nice mitres
- Rounded mitres
- Colorisation of active mitre
1) Starting theme - IdeaI really appreciate the theme presented here and available
here.
So, i started on the idea of a blocnote theme, with 2 colomn, without right colomn.
2) False columnsRead this news:
colonnes factices.
This method is so fun for my theme.
Top 1 + mitres (external links)
Top 2 + mitres (internal links)
Mainly image (repeat y)
Bottom
3) Mainly "div" <div id="conteneur">
<div id="navigation">
// mitres location for external links
div>
<div id="navigation2">
// mitres location for internal links
div>
<div id="logo">
// here logo url
div>
<div id="gauche">
// Boucle left blocs
div>
<div id="centre_gd">
<div id="centre_gauche">
// Boucle blocs center left
div>
<div id="centre_droite">
// Boucle blocs center right
div>
div>
<div id="centre">
// Boucle blocs center center
<div id="content">Display the module contentsdiv>
div>
<div id="blocnote_bottom">
// bottom of the page
div>
div>
[pagebreak]
4) Mitres, part 1: Rounded without imageA method exists to use mitres:
portes coulissantes, but i used another one, but
this one (Example 2, Horizontal).
It's a fantastic cheat ("Astuce"). With this, you can create a lot mitres without images. when you have understand the method, (css method), il is easy to create mitres with a lot of combinaisons :
- color,
- size (width) (small, normal and large mitres)
- dark mitres or not
I will try to explain to you:
<div id="navigation">
<ul>
<li>
<a class="menumini" href="http://monsite.fr/lien1.html" title="Mon lien 1">
<b class="BoxOnglet"><span class="BoxContenu couleur4">Lien 1span><b class="b4 couleur4">b><b class="b3 couleur4">b><b class="b2 couleur4">b>b>
a>
li>
ul>
div>
With this css lines (read the comments):
// localsation of mitres on the page
#navigation {
padding-left: 300px;
background: transparent no-repeat;
margin: 0px;
height: 4em; /* cache overflow:hidden de IE5/Mac */
overflow: hidden; /* */
background-image: url(images/fonds_blocnote_top.png);
height: 45px;
}
#navigation ul {
margin:0px;
padding:0;
list-style-type:none;
background:transparent;
}
#navigation li {
display:block;
float:left;
margin:15px 2px 0px 0px;
}
.BoxOnglet, .BoxOngletFonce {
background:transparent;
}
// mitres for dark text
.BoxOnglet span {
text-align: center;
color: #FFCC33;
margin: 0px;
font-family: verdana;
font-size: 80%;
font-weight: normal;
}
// Mitres for not dark text
.BoxOngletFonce span {
text-align: center;
color: #093F7D;
margin: 0;
font-family: verdana;
font-size: 80%;
font-weight: normal;
}
// Cheat for the rounded mitres
// b1 étant la base la plus large et b4 la plus petite
.b1, .b2, .b3, .b4 {
display:block;
font-size:xx-small;
/* cache overflow:hidden de IE5/Mac */
/* */
overflow: hidden;
/* */
}
.b1, .b2, .b3 {height:1px;}
.b2, .b3, .b4 {
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
}
.b1 {margin:0px 5px; background:#FFFFFF;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0 1px;}
// mitres contour
.BoxContenu {
display:block;
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
}
// normal size mitres
a.menu {
display:block;
text-decoration:none;
width:6.5em;
}
// small sire mitres
a.menumini {
display:block;
text-decoration:none;
width:3.5em;
}
// large size mitres
a.menugrand {
display:block;
text-decoration:none;
width:9.5em;
}
a.menu:hover, a.menumini:hover, a.menugrand:hover {
background:transparent;
cursor:pointer;
text-decoration: none;
}
a.menu:hover span, a.menumini:hover span, a.menugrand:hover span {
padding-top:8px;
}
// Color mitres
.rouge {background:#cc3333;}
.bleu {background:#093F7D;}
.jaune {background:#FFCC33;}
.comite{background:#3662a2;}
[pagebreak]
5) Mitres, part 2: How to color the active mitreOk, now, we have nice mitres, but i would have red color when mitres is active.
For modules:
<{if $xoops_dirname == 'wordpress'}>
<{if $xoops_dirname == 'xhld0'}>
For a mitres on a file:
Home page
<{if $SCRIPT_NAME == "/index.php"}>
Login/inscription
<{if ($xoops_requesturi|truncate:24:"":true) == "/user.php?xoops_redirect"}>
Why ?
Cause it's possible to have a redirection on this page.
At last, i put a test to replace "login/inscription" by "My accounting" when the member is connected.
<{if $xoops_isuser}>
// Onglet "My accounting"
<{else}>
// Onglet "login/inscription"
<{/if}>
6) W3C ValidationsXHTML ValidationCSS Validation7) Downloading the themeThis new theme is available in free download
here.