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

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

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

Resized Image

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.

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 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"}>

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

XHTML Validation

Resized Image

CSS Validation

Resized Image

7) Downloading the theme

This new theme is available in free download here.

New theme - stardust

Bassman Themes have released a new theme for Xoops 2.0X - stardust theme.

This theme is based on a layout designed by the talented designer Midnite and features an anime-style background.

Some compromises had to be made to fit the Xoops framework into the layout. The right column is alongside the left, and appears even if there are no right blocks selected. Also, any center column module content over 400px wide will scroll sideways to fit. I think it's worth it as the actual design is fairly unique.

Resized Image

More Midnite themes to come from Bassman Themes!

View & download from Bassman Themes

mytechniker

mytechniker.de is a german community engineer study portal
based on xoops 2.2.4, with seo and fullcache
you can find news, encyclopedia, forum and more.

Techniker Informatik

regards
sven

CBB 3.04 RC3 Released

CBB 3.04 RC3 is released, mainly for further improvement on performance (memory usage) and compliant xthml/css.

We look forward to your help with debug and your ideas for better layout. In RC4, skalpa and me will work on output clean-up and cosmetic changes, as well as changes according to new features in XOOPS 2.014.

Download: CBB 3.04 RC3

Changelog 3.04 RC3
May 20th, 2006
=============
1 Fixed bugs in print.php (reported by ideiafacil)
2 Code correction for performance and cleaning up
3 Partial improvement on permission precision
4 Improvement on category/forum structured display for permission admin and block edit pages
5 Improvement on compliant xhtml

Gabbly as a Module Released!

What is Gabbly?
Gabbly is one of these new systems that allows you to chat in almost any browsers with a chat block plug-in, this I have taken and included as a Xoops module.
This means you can take a team of people from your site and send them to other sites to discuss it.
The FAQ’s are included, yet you can find all info on Gabbly.com
There is a Demo Here
And you can Download It Here as module.
There are no admin controls and it is only an Iframe of what is store on Gabbly.

5 new paid themes from Xdigitalnet

Here are the latest Paid Themes from our Site http://templates.xdigitalnet.com

Please dont forget to make your request on the forums,to expand the library best Zeroram

Mxdirectory 3.0 RC1 released !

If you're using xdirectory or mxdirectory2 (which is really a beta) it's time to change gears!

Mxdirectory 3.0 RC1 has just been *RE-posted to the dev site (see my comment below re: Homer):
Check out the project HERE
View it HERE

Just some of the features / changes....

Read more... | 1809 bytes more | 91 comments

New themes at TemasWeb.com

This are the newest themes at TemasWeb.com:

We frequently publish new themes of the highest quality and for all needs.

Good XOOPS for all!

Google Map Module Version 0.4

At last after me being lazy and a fair few modifications I have made the module capable of using the Googlemap V2 which has the capabilities of heaps more features along with the main function of displaying a fair chunk of Europe.

Please read the readme as there is a sqlupdate to run as google have changed the way the zoom levels work so that in time they can add greater zooms with higher quality photos.

If there are any problems please let me know and I will try fix them. Either comment below or there is a forum here

Download the module from here

Installation:

1. Just unpack and upload to modules directory as usual
2. Install in module administration
3. Configure module in prefs
4. Obtain an api for your site from google. Link is given in the config page.
5. Add your categories and points from the module menu.

Upgrading:
1. Upgrade module in xoops admin
2. Run update script to adjust zoom levels http://www.yousite.com/modules/googlemaps/admin/sqlupdate.php
3. Login as admin and in preferences / google maps set a map type otherwise the sidebar will not display

Change log

Version 0.4
-Added code to handle V2 of the google API making europe maps available
-Added ability to choose a map type to display as default
-Fixed Shifted sidebar to the side of the map to help if categories get too big

How to display random pictures from the Xoops Myalbum module in a block with a fade out effect.

Recently, I had to find a way to display pictures from the Xoops Myalbum module in a random way with a fade out effect.

You will find on my homepage an example of the final rendering (in the right column)

The myalbum module already come with a block wich enable you to display random pictures but it is necessary to reload the page to see the pictures change.

Read more... | 540 bytes more | 8 comments

« 1 ... 308 309 310 (311) 312 313 314 ... 553 »

Login

Username

Password

Remember me

Search

Advanced Search

Donat-O-Meter

Stats
Goal:	$15.00
Due Date:	Sep 30
Gross Amount:	$0.00
Net Balance:	$0.00
Left to go:	$15.00

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

New theme - stardust

mytechniker

CBB 3.04 RC3 Released

Gabbly as a Module Released!

5 new paid themes from Xdigitalnet

Mxdirectory 3.0 RC1 released !

New themes at TemasWeb.com

Google Map Module Version 0.4

How to display random pictures from the Xoops Myalbum module in a block with a fade out effect.

Login

Search

Recent Comments

Re: XOOPS 2.7.3 FINAL (ready for PHP 8.6)

Re: XOOPS 2.7.3 FINAL (ready for PHP 8.6)

Re: XOOPS 2.7.1 Final Releaesed

Re: XOOPS 2.7.1 Final Releaesed

Re: XOOPS 2.7.1 Final Releaesed

Donat-O-Meter

Archives

News archives