Les articles sur plusieurs colonnes

Nous allons modifier l'affichage des articles de la page d'accueil et des catégories (topics) en ajoutant la variable {story_counter} au fichier du thème responsable de l'affichage de l'article et via css

Modifier le storytext.thtml

<div class="story{story_counter}">
    <span class="story-icons">
        {email_icon}
        {print_icon}
        {pdf_icon}
        {edit_icon}
    </span>
    <h1>{story_title_link}</h1>
    <div class="story-information">
        <p>{story_date}</p>
        <p>{lang_contributed_by} {start_contributedby_anchortag}{contributedby_author}{end_contributedby_anchortag}</p>
        <p>{lang_views} {story_hits}</p>
    </div>
    <div class="story-body">
        {story_anchortag_and_image}{story_text_no_br}
    </div>
    <div class="story-footer">
        <p>{page_selector}</p>
        <p>{readmore_link} {post_comment_link}</p>
        <p>{plugin_itemdisplay}{comments_with_count} {trackbacks_with_count}</p>
    </div>
</div>

Ajouter les nouvelles classes dans le fichier style.css

.story3 , .story5, .story7, .story9, .story11, .story13, .story15{
  float:left;
  width:48%;
  padding:10px 10px 10px 0px;
  background:transparent;
  color:#000000;
}
.story2, .story4, .story6, .story8, .story10, .story12, .story14, .story16{
  float:left;
  width:48%;
  padding:10px 10px 10px 0px;
  background:transparent;
  color:#000000;
}

Si vous souhaitez ajouter du contenu en dessous des articles, créer un page statique commençant par

<div style="clear:both;"></div>

Et pour trois colonnes

.story3 , .story5, .story7, .story9, .story11, .story13, .story15, .story2, .story4, .story6, .story8, .story10, .story12, .story14, .story16{
  float:left;
  width:31%;
  padding:10px 15px 10px 0px;
  background:transparent;
  color:#000000;
}
Connecté en tant que : Guest (Guest)
astuces/accueil-2-colonnes-et-plus.txt · Dernière modification: 2009/04/23 23:02 par ::Ben
 

Download geeklog

Last version 1.8.1

Espace Membre





Devenir membre
Enregistrez-vous

Mot de passe oublié ?

Change language

Categories

  • Geeklog (38)
  • Plugins (53)
  • Thèmes (16)
  • My cart

    Votre panier (0 article)

    Votre panier est vide!

    0.00 EUR

    Visual Theme Switcher

    Test out available themes by selecting from one of the 6 available themes or give the Visual Switcher a try:

    Follow us on twitter

    En ligne

    Visiteurs: 9