 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 here
Synopsis:
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) Introduction
After 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
theLigue 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 namedROTORINSA.
 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.net
My 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 - Idea
I 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 columns
Read 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 contents</div>
</div>
<div id="blocnote_bottom">
// bottom of the page
</div>
</div>
[pagebreak]
4) Mitres, part 1: Rounded without image
A 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 1</span><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 mitre
Ok, 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 Validations
 XHTML Validation
 CSS Validation
7) Downloading the theme
This new theme is available in free download here.
|
