Themes: My 1st site in CSS/XHTML: An experiment explained in detail

Posted by: alain01On 2006/5/22 14:14:49 8731 reads
Resized ImageBefore 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...


Resized Image Resized ImageResized Image
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.







Resized ImageThen, 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



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

Resized Image
Top 1 + mitres (external links)

Resized Image
Top 2 + mitres (internal links)

Resized Image
Mainly image (repeat y)

Resized Image
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 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 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 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

Resized ImageXHTML Validation


Resized ImageCSS Validation




Resized Image7) Downloading the theme

This new theme is available in free download here.