This is an old revision of the document!


Table of Contents

Mise en page générale

Ajout d'une bannière

Soit :

dans le header.tpl

ligne 41 :

remplacer :

<div id="theHeader">{PAGE_BANNER}</div>

par :

<div id="theHeader">
  <a href="{U_HOME}" title="{GALLERY_TITLE}">
    <img src="/chemin/vers/votre/banière.png" alt="{GALLERY_TITLE}">
  </a>
</div>

Soit :

ajouter dans administration –> Général –> Bannière des pages le code :

<a href="{U_HOME}" title="{GALLERY_TITLE}">
        <img src="/chemin/vers/votre/banière.png" alt="{GALLERY_TITLE}">
      </a>

Ajout d'informations en pied de page

Vous devez aller dans template/yoga/footer.tpl (yoga ou le template que vous utilisez)

Vous pouvez rajouter des informations entre :

<div id="copyright">
 <!-- BEGIN debug -->
 {lang:generation_time} {debug.TIME} ({debug.NB_QUERIES} {lang:sql_queries_in} {debug.SQL_TIME}) -
 <!-- END debug -->

et ce code

</div> <!-- copyright -->
</div> <!-- the_page -->
 
<!-- BEGIN debug -->
  {debug.QUERIES_LIST}
<!-- END debug -->
</body>
</html>

Entre ces deux blocs, il y a déjà l'annonce de PhpWebGallery et le contact webmestre. Vous pouvez ajouter votre texte avant ou après l'annonce.

FIAT LUX ! sur les thèmes (Photon)

Qu'est que Photon?

La réponse scientifique est là : Photon / Wikipédia

Mais pour la majorité d'entre nous, Photon c'est avant tout ceci: Photon

8-)

Pour que l'adresse mail du Webmestre soit visible par tous

Aller dans include/page_tail.php ligne 38 et remplacer

if (!$user['is_the_guest'])

par

if (1 = 1)

NB. : Ne venez pas vous plaindre que vous recevez des spams…

Ajout d'espace entre ":" dans le titre des page

Dans template/yoga/header.tpl en ligne 25

Rajouter les espaces après {GALLERY_TITLE} et avant {PAGE_TITLE} comme ceci :

<title>{GALLERY_TITLE} : {PAGE_TITLE}</title>

Attention si vous mettez plusieurs templates à disposition de vos visiteurs il faut modifier le header.tpl de chaque template.

Masquer la "Connexion rapide" dans la barre de menu

Suivant ce que vous voulez obtenir:
dans template-common/local-layout.css (à créer/modifier) ⇒ Tous les templates
dans template/yoga/local-layout.css (à créer/modifier) ⇒ Tous les thèmes de yoga
dans template/yoga/clear/theme.css (à modifier) ⇒ uniquement pour clear de yoga

FORM#quickconnect {
  display: none;
}

Ouverture des liens du menu dans une nouvelle fenetre

dans template/yoga, ouvrir menubar.tpl

remplacer ligne 9 :

<li><a href="{links.link.URL}">{links.link.LABEL}</a></li>

par:

<li><a target="_blank" href="{links.link.URL}">{links.link.LABEL}</a></li> <!-- MyPWG -->

ATTN: Cette astuce n'est plus conforme aux recommandations du W3C.

Changer la couleur du fond lors du survol d'une catégorie ou d'une miniature

Il faut modifier/créer un fichier local-layout.css dans /template-common/

#content UL.thumbnails SPAN.wrap2:hover {
  background-color: AntiqueWhite;
  color: black;
}
#content UL.thumbnailCategories DIV.thumbnailCategory:hover {
  background-color: AntiqueWhite;
  color: black;
}
 
#content UL.thumbnailCategories DIV.thumbnailCategory:hover A {
  background-color: AntiqueWhite;
  color: black;
}

Fonctionne sous IE et FF.
“Joli” sous yoga/dark et yoga/clear!!\\
Et vous pouvez rajouter ceci:

border-color: yellow;    /* thumbnails border color when mouse cursor is over it */

si vous désirez avoir une couleur de bordure differente
exemple:

#content UL.thumbnailCategories DIV.thumbnailCategory:hover {
  background-color: #30302f;
  color: #black;
  border-color: #8e0d16;    /* thumbnails border color when mouse cursor is over it */
}

Changer la couleur de la galerie, quelques exemples

Pour ceux qui ont vraiment du mal avec le charabia css, quelques exemples à la volée, fait pour le yoga-dark: Auparavant, faire une copie de sauvegarde des fichiers à modifier par sécurité. Dans le fichier template/yoga/theme/dark/thème.css:

ligne 5 = couleur des nombres dans le menu, légende des catégories de la page de droite.
ligne 9 = couleur du titre de la page d accueil, des titres des menus autres que les catégories
ligne 21 = couleur de l encadrement général.
ligne 24 = couleur du fond général 
ligne 28 = couleur du fond du cadre avec tous les thumbnails des catégories.
ligne 72 = couleur de l encadrement des imagettes des catégories et des sous-catégories.
ligne 90 = couleur des titres des menus de gauche, des rubriques à l intérieur des blocs du menu, titre des catégories et sous-catégories, des pages pictures, de la barre de navigation.
ligne 94 = couleur du lien quand la souris passe dessus.

Autre exemple, mais valable pour toutes les variantes de yoga: dans le fichier template/yoga/default-color.css (faire une copie du fichier avant)

ligne 27 = couleur de fond des formulaires (mot de passe, nom d user, formulaire de recherche.
ligne 85 = couleur des titres italiques (exemple: dans la page de recherche)

A votre bon coeur pour compléter cette liste. !!! pensez au nouveaux qui débarquent sur ce super programme !

Liens étoilés au survol

Dans template/yoga/theme/dark/theme.css
Cherchez:

/* links */
A, .rateButton {color: #9900FF;}
a:hover { text-decoration:none; color:#FF33ff;}

Complétez par: background:url(adresse_relative_vers_votre_fond)

Comme ceci par exemple:

/* links */
A, .rateButton {color: #9900FF;}
a:hover { text-decoration:none; color:#FF33ff;background:url(adresse_relative_vers_votre_fond);}

Autre exemple pour tous vos liens:

/* links */
A {color: #9900FF;background:url(adresse_relative_vers_votre_fond);}
.rateButton { color: #9900FF; }
a:hover { text-decoration:none; color:#FF33ff;}

Voici un exemple sur lequel il y a un fond étoilé sur les liens survolés http://alexpomp42.ifrance.com/album/

Faire tomber un coeur ou autre sur son blog [1.6.1] (mais l'image ne se multiplie pas )

Alors voilà vous avez envie de faire tomber un coeur ou autre sur votre album photo un peu comme celui la http://alexpomp42.ifrance.com/album/ c'est très simple je vais vous aidez a réaliser cette effet a votre album photo

  • A télécharger

Pour commancer vous devez telecharger ce fichier sur votre pc: http://alexpomp42.ifrance.com/album/template/yoga/theme/pink/images/base.js

  • Modifier le fichier base.js

Une fois le fichier sur votre pc vous devez l'ouvrir avec WordPad (ça fonctionne bien) puis vers la 11eme lignes vous devez trouver cette ligne là

url_gif[0]= “urldevotregifsanslaterminaison.gif”;

Vous devez modifier cette ligne par le gif de votre choix de préference pas trop gros c'est bien plus jolie ^^ mais attention vous ne devez pas mettre la terminaison de votre gif soit eviter de mettre à la fin de votre url le .gif ou .jpg ou autre selon le format de votre image (penser a heberger votre image surtout )

ce qui devrait donner: url-gif[0]=“http://idata.over-blog.com/0/25/69/93/papillon-gif-006”;

une fois que vous avez mis l'url de votre gif vous fermez et vous enregistrez le nouveau base.js avec a l'interieur votre gif a faire tomber sur votre album photo

  • Herberger votre fichier base.js

Après avoir modifié votre fichier base.js vous devez l'herberger

  • Le faire apparaitre sur votre album photo

Vous devez vous rendre dans le dossier Template/yoga/header.tpl , une fois que vous avez ouvert le fichier header.tpl vous devez ajouter (moi je l'ai mis au debut en 4eme ligne environ)

[quote]<script src=“urldevotrebase.js” type=“text/javascript”></script>[/quote]

a vous de modifier ensuite urldevotrebase.js par la vraie url bien sur

FIXME : On évitera de donner des conseils avec des url et on préfèrera conseiller des adresses relatives pour éviter un tas de corrections en cas de changement d'hébergeur.

Merci.

Faire tomber un gif sur votre album photo qui se multiplie

C'est pratiquement pareil que pour faire tomber un gif sans qu'il se multiplie

  • Telechargement

Attention ce n'est pas le meme fichier que dans mon autre article donc vous devez télécharger ce fichier au format .js http://alexpomp42.ifrance.com/album/template/yoga/theme/pink/images/base1.js

  • Modifier le fichier base1.js

Vous devez ouvrir le fichier ci-dessus une fois téléchargé, une fois ouvert avec le logiciel WordPad par exemple vous devez trouver environ a la 8ème ligne une ligne qui resemble a ca var url_gif= “urldevotregif.gif”; adresse de l'image Il vous suffit de modifier l'urldevotreimage par la vrai url et cette fois ci par contre il faut bien mettre la terminaison de l'url soit le .gif vous devez vous retrouver avec une ligne une fois modifiée qui resemble a ça: var url_gif= “http://ddata.over-blog.com/xxxyyy/0/25/69/93/coe32.gif”; adresse de l'image

Une fois votre url modifié, enregistrez la base1.js . Pensez a bien heberger vos gif surtout

  • Heberger la base1.js

Maintenant vous devez heberger la base1.js

  • Faire apparaitre le gif sur votre album photo

c'est la meme procedure que pour l'autre méthode que j'ai donner juste au dessus il vous suffit d'aller dans Template/yoga/hearder.tpl et de modifier le fichier hearder.tpl

Vous devez ajouter dans ce fichier cette ligne (chez moi elle se trouve sur la 4eme ligne environ)

<script src=“urldevotrebase1.js” type=“text/javascript”></script>

Modifier votre urldevotrebase1.js par la vrai url

Cette méthode est aussi compatible avec les blogs qui accepte le javascript sur mon blog j'ai mis le script dans mon entête

Alexpomp http://alexpomp42.ifrance.com/album/

FIXME : On évitera de donner des conseils avec des url et on préfèrera conseiller des adresses relatives pour éviter un tas de corrections en cas de changement d'hébergeur.

Merci.

Changer le curseur de base par un curseur personnel

Voila pour ceux qui veulent mettre un curseur personnel sur leur album photo c'est possible

Dans la partie de votre css Template/yoga/theme/dark/theme.css

dans la partie body

/* backgrounds */
BODY {
  background-color: #fffffF;color:#0000ff;}

Ajouter comme ci-dessous

/* backgrounds */
BODY {
  background-color: #fffffF;color:#0000ff; cursor:url("urlducurseur");} 

Quand vous avez fait ca vous avez un joli curseur sur votre album photo mais quand vous allez passer sur un liens par contre vous allez malgré tout avoir le curseur de base soit une main si je me trompe pas c'est pour ca que ceux qui veulent aussi avoir un curseur sur les liens il faut aussi modifier la ligne a/hover de votre css comme si dessous :

 a:hover { text-decoration:none; color:#FF33ff;}

ajouter comme ci-dessous

 a:hover { text-decoration:none; color:#FF33ff; cursor:url("urldecurseur");}

Si vous mettez seulement votre curseur dans la partie body il fonctionnera quand même ou inversement si vous le mettez seulement dans la ligne a:hover De faire comme ca vous permet de mettre un curseur soit identique sur vos liens soit differents au passage sur vos liens (sur mon album il est identique)

Des conseils:

- Pensez a héberger vos curseurs pour eviter de les perdres si le site d'ou ils proviennent bug

- Un curseur se termine soit par .cur soit par .ani

- Pensez a modifier urlducurseur par la vraie url de votre curseur surtout ^^

- Suite a une remarque que l'on ma faite et que je savais et j'ai oublier de vous dire que les curseurs sont seulement visible sous IE car sous FF vous ne les verez pas ^^ (et oui meme si FF est super bien il a ces defauts ^^)

FIXME : On évitera de donner des conseils avec des url et on préfèrera conseiller des adresses relatives pour éviter un tas de corrections en cas de changement d'hébergeur.

Merci.

Adresse de site qui propose des curseurs:

http://dessinsonweb.free.fr/ http://www.website-promo.net/conseil/co … erpent.htm http://www.ticklishdesigns.com/cursgem.phtml http://patmax.info/curseurs/ http://dessinsonweb.free.fr/FMu.htm http://www.nollizua.com/curseurs.htm http://www.freegaia.com/ico-cur.php http://chez.marjo.vivi.free.fr/mescurseurs.htm http://www.toulouse-renaissance.net/c_o … mgcurs.htm http://www.clicpartout.com/curseurs/curseurs-animes.php http://curseurs.eurogif.com/

Favicon

  • Création d'un Favicon

Pour ceux qui veulent créer eux même leur favicon j'ai trouvé un site qui n'est pas trop mal http://www.chami.com/html-kit/services/favicon/ avec ce site vous allez pouvoir créer votre propre favicon par rapport à un gif ou même une image de grande taille

Une fois créé vous allez trouver sur le disque dur de votre pc un fichier ayant le nom favicon.ico, il vous suffit s'il n'a pas ce nom de le modifier en favicon.ico puis de l'héberger dans template-common pour remplacer celui qui ci trouve déja comme ça après vous avez même pas à vous occuper de la partie ci-dessous normalement mais vous pouvez toujours allez vérifier si la ligne est bien présente

  • Mettre un favicon sur votre album photo

Dans le template/yoga/header.tpl vous devez avoir cette ligne là

<link rel=“shortcut icon” type=“image/x-icon” href=”{pwg_root}template-common/favicon.ico”>

ATTENTION le favicon n'est pas visible sous IE, sous FF très visible par contre. PS : Pour une visibilité du favicon sous IE, le mettre aussi à la racine du site.

Mode de fonctionnement (Comportement)

Un menu "Liens" différent pour les invités et pour les utilisateurs enregistrés.

(testé sur PWG 1.6.1 et template Yoga)

fichiers à modifier :

include/menubar.inc.php
include/config_local.inc.php
template/yoga/menubar.tpl



  • Ouvrir include/menubar.inc.php et remplacer :
//-------------------------------------------------------------- external links
if (count($conf['links']) > 0)
{
  $template->assign_block_vars('links', array());
 
  foreach ($conf['links'] as $url => $label)
  {
    $template->assign_block_vars(
      'links.link',
      array(
        'URL' => $url,
        'LABEL' => $label
        )
      );
  }
}

par :

//-------------------------------------------------------------- external links
if ((count($conf['links']) > 0) or ((!$user['is_the_guest'] ) and (count($conf['userlinks']) > 0)))
{
  $template->assign_block_vars('links', array()); /* Signifie mettre un seul titre dans les 2 cas */
}
if (count($conf['links']) > 0)
{
  foreach ($conf['links'] as $url => $label)
  {
    $template->assign_block_vars(
      'links.link',
      array(
        'URL' => $url,
        'LABEL' => $label
        )
      );
  }
}
 
if ( !$user['is_the_guest'] )
    {
        if (count($conf['userlinks']) > 0)
        {    
            foreach ($conf['userlinks'] as $url => $label)
            {
                    $template->assign_block_vars(
                        'links.userlink',
                        array(
                            'URL' => $url,
                            'LABEL' => $label
                            ));
            }
        }    
    }




  • Ouvrir config_local.inc.php (ou le créer, s'il n'existe pas) et écrire :
$conf['links'] = array(
   'http://www.monsitepublic.com' => 'Mon site public'
   );
$conf['userlinks'] = array(
   'http://www.monsiteprive.com' => 'Mon site privé',
   'http://www.monautresiteprive.com' => 'Mon autre site privé'
   );

($conf['links'] renvoie vers un lien accessible à tous, tandis que $conf['userlinks'] établit des liens réservés aux utilisateurs enregistrés)
Penser à ajouter au besoin les balises php qui doivent englober le code.

<?php
// le code php
?>




  • Ouvrir menubar.tpl, remplacer :
<!-- BEGIN links -->
<dl id="mbLinks">
  <dt>{lang:Links}</dt>
  <dd>
    <ul>
      <!-- BEGIN link -->
      <li><a href="{links.link.URL}">{links.link.LABEL}</a></li>
      <!-- END link -->
    </ul>
  </dd>
</dl>
<!-- END links -->

par :

<!-- BEGIN links -->
<dl id="mbLinks">
  <dt>{lang:Links}</dt>
  <dd>
    <ul>
    <!-- BEGIN link -->
    <li><a href="{links.link.URL}">{links.link.LABEL}</a></li>
    <!-- END link -->
    <!-- BEGIN userlink -->
    <li><a href="{links.userlink.URL}">{links.userlink.LABEL}</a></li>
    <!-- END userlink -->
    </ul>
  </dd>
</dl>
<!-- END links -->

Miniatures qui débordent (1.6.*)

Il faut modifier/créer un fichier local-layout.css dans /template-common/
Exemple :

/* Set some sizes according to your maximum thumbnail width and height */
#content UL.thumbnails SPAN,
#content UL.thumbnails SPAN.wrap2 A,
#content UL.thumbnails SPAN.wrap2 LABEL,
#content DIV.thumbnailCategory DIV.illustration {
  width: 152px;			/* max thumbnail width + 2px */
}
#content UL.thumbnails SPAN.wrap2,
#content DIV.thumbnailCategory DIV.description {
  height: 152px;		/* max thumbnail height + 2px */
}
#content DIV.comment BLOCKQUOTE {
  margin-left: 172px;		/*maximum thumbnail width + ~10px */
}

Adaptez ces marges (margin-left:), hauteurs (height:) et largeurs (width:), selon la taille de vos miniatures.

Désactiver la page upload des miniatures

Dans upload.php, ligne 205 en principe, cherchez:

  if ( sizeof( $error ) == 0 )
  {
    $query = 'insert into '.WAITING_TABLE;
    $query.= ' (storage_category_id,file,username,mail_address,date,infos)';
    $query.= ' values ';
    $query.= '('.$page['cat'].",'".$_FILES['picture']['name']."'";
    $query.= ",'".htmlspecialchars( $_POST['username'], ENT_QUOTES)."'";
    $query.= ",'".$_POST['mail_address']."',".time().",'".$xml_infos."')";
    $query.= ';';
    pwg_query( $query );
    $page['waiting_id'] = mysql_insert_id();
  }
}

et remplacez par:

  if ( sizeof( $error ) == 0 )
  {
    $query = 'insert into '.WAITING_TABLE;
    $query.= ' (storage_category_id,file,username,mail_address,date,infos)';
    $query.= ' values ';
    $query.= '('.$page['cat'].",'".$_FILES['picture']['name']."'";
    $query.= ",'".htmlspecialchars( $_POST['username'], ENT_QUOTES)."'";
    $query.= ",'".$_POST['mail_address']."',".time().",'".$xml_infos."')";
    $query.= ';';
    pwg_query( $query );
    $page['waiting_id'] = mysql_insert_id();
    $page['upload_successful'] = true;
  }
}

Désactiver l'acces à la page d'enregistrement

  • Identifiez le template utilisé par les visiteurs (guest).

Par défaut, et pour l'exemple, supposons qu'il s'agisse du template yoga.

  • Donc, vous devez modifier yoga/menubar.tpl.


1 - Remplacez (vers la ligne 62):

<dl>
  <dt>{lang:identification}</dt>
  <dd>
    <!-- BEGIN hello -->
    <p>{lang:hello}&nbsp;{USERNAME}&nbsp;!</p>
    <!-- END hello -->
    <ul>

par:

<dl class=identification>
  <dt class=identification>{lang:identification}</dt>
  <dd class=identification>
    <!-- BEGIN hello -->
    <p>{lang:hello}&nbsp;{USERNAME}&nbsp;!</p>
    <!-- END hello -->
    <ul class=identification>


2 - Créer ou compléter template-common/local-layout.css avec :

.identification { display: none; }
#menubar DL.identification { display: none; }
FORM#quickconnect { display: none; }


  • Gardez à l'esprit que vous venez de masquer le moyen de vous identifier.

Vous pouvez toujours vous identifier par ./identification.php
(ne pas oubliez ce point pour passer en Administrateur, lequel doit utiliser un template différent pour pouvoir se déconnecter si nécessaire !!! Utilisation du PC d'un ami par exemple.)

Modifier la taille du texte

Dans un local-layout.css, il faut mettre le code qui suit.

  • Si le local-layout.css est dans template-common, ça touche tous les modèles,
  • S'il est dans template/toto, ça ne touche que le template toto.
#menubar UL, #menubar HR, #menubar FORM, #menubar P, #menubar .totalImages {font-size: 100%;}
 
A:link, A:visited, {font-size:9pt;}
A:hover, A:active {text-decoration: underline; font-size:9pt;}
 
#the_page { font-family:arial; font-size:9pt;}

Mise en page de la page principale ("Category" ou "Index")

Placer un logo au dessus du menu à gauche.

Dans chaque template mis à disposition des membres, modifiez par exemple \menubar.tpl

ajoutez après ceci:

<!-- $Id: menubar.tpl 1369 2006-06-19 18:16:39Z chrisaga $ -->
<div id="menubar">

quelque chose comme ceci:

<A HREF="{U_HOME}" TITLE="{GALLERY_TITLE}"><IMG SRC='doc/logo_pwg.png' ALT='PWG Logo' 
STYLE='margin: 0px 2em 5px 4em;' /></A>

Pour l'exemple on a repris le logo de pwg qu'on a choisi de placer dans /doc/ mais ceci devrait être plus spécifique à chaque site, bien entendu.
Ceci n'est que pour vous donner une idée.
A la place de {U_HOME} vous pouvez mettre l'URL de votre site principal.
A celle de {GALLERY_TITLE}, vous aurez bien votre idée.
Si le résultat visuel n'est pas idéal, vous aurez une meilleure proposition, sans doute.

Une autre solution basée header.tpl n'est pas exclue.

Ajouter un Edito

Dans content.css au début

#content {

devient

#content, #edito {

pour positionner les marges, et à la fin, ajouter

.Edito {
  text-align: left;
  padding: 5px;
}

et dans index.tpl, juste après

<!-- $Id: index.tpl 1386 2006-06-24 09:19:40Z chrisaga $ -->
{MENUBAR}

dans le template yoga, vous ajoutez :

<div id="edito">
  <div>
    <h2>Edito</h2>
    <p class="Edito">Mettez ici ce que vous voudrez ou remplacez par {PAGE_BANNER} si vous voulez que ce qui apparait dans le header apparaisse dans l'edito</p>
  </div>
</div>

L'Edito uniquement sur la page principale

Une astuce de Jirian. Problem with edito

1. Dans template/yoga/index.tpl remplacer ceci:

<div id="edito">
  <div>
    <h2>Edito</h2>
    <p class="Edito">Mettez ici ce que vous voudrez ou remplacez par {PAGE_BANNER}
    si vous voulez que ce qui apparait dans le header apparaisse dans l'edito</p>
  </div>
</div>

Par:

<!-- BEGIN edito -->
<div id="edito">
  <div>
    <h2>Edito</h2>
    <p class="Edito">Mettez ici ce que vous voudrez ou remplacez par {PAGE_BANNER}
    si vous voulez que ce qui apparait dans le header apparaisse dans l'edito</p>
  </div>
</div>
<!-- END edito -->


2. Dans index.php ajouter:

//-------------------------------------------------------- Edito
if (('categories' == $page['section']) and (!isset($page['category'])) {
  $template->assign_block_vars('edito',array());
}

après ceci:

//------------------------------------------------------ main part : thumbnails
if (isset($page['thumbnails_include']))
{
  include(PHPWG_ROOT_PATH.$page['thumbnails_include']);
}


Many thanks to Jirian.

Changer le nombre de colonnes de droite sur la page d'accueil des catégories

Dans template-common, créer un local-layout.css et coller:

/* Category thumbnails on main page */
#content UL.thumbnailCategories LI {
  width: 33.3%;		/* 49.9% for 2 per line, 33.3% for 3 per line*/
}

Mettre 24.5% pour quatre colonnes. A mon avis, trois colonnes au maximum, si on veut garder un bon look à la galerie.

Ensuite coller le bloc suivant pour diminuer un peu la largeur du menu de gauche.

/* Set the width of the menubar for the galery */
#menubar {
  width: 14em;
}
#content {
  margin-left: 16em;	/* = #menubar width + 2em */
}

Bien mettre 2 d'écart entre width et margin left.

Changer l'espacement des miniatures

Suivant ce que vous voulez obtenir:
dans template-common/local-layout.css (à créer/modifier) ⇒ Tous les templates
dans template/yoga/local-layout.css (à créer/modifier) ⇒ Tous les thèmes de yoga
dans template/yoga/clear/theme.css (à modifier) ⇒ uniquement pour clear de yoga

.thumbElmt { 
  margin: 2% 4% 2% 4%; 
}

Pour augmenter l'espacement, prenez un nombre plus grand (vous pouvez aussi exprimer ces valeurs en “em”, “px” et autres) .

Changer l'espacement des miniatures des catégories en page d'accueil

Aller dans template-common, créer un local-layout.css et coller le bloc suivant, en mettant les valeurs choisies:

#content UL.thumbnails SPAN.wrap2,
#content DIV.thumbnailCategory DIV.description {
  height: 160px;        /* max thumbnail height + 2px */
}
#content DIV.comment BLOCKQUOTE {
  margin-left: 170px;        /*maximum thumbnail width + ~10px */
}

Comme indiqué ci-dessus, cette modif aura effet sur tous les templates

Déplacer le menu "Liens"

Pour chaque template utilisé dans menubar.tpl (exemple yoga)

Déplacez (ligne 3 et les lignes suivantes ci-dessous):

<!-- BEGIN links -->
<dl>
  <dt>{lang:Links}</dt>
  <dd>
    <ul>
      <!-- BEGIN link -->
      <li><a href="{links.link.URL}">{links.link.LABEL}</a></li>
      <!-- END link -->
    </ul>
  </dd>
</dl>
<!-- END links -->

Avant (ou mieux après), ceci:

<dl>
  <dt>{lang:title_menu}</dt>
  <dd>
    <ul>
      <!-- BEGIN summary -->
      <li><a href="{summary.U_SUMMARY}" title="{summary.TITLE}" {summary.REL}>{summary.NAME}</a></li>
      <!-- END summary -->
      <!-- BEGIN upload -->
      <li><a href="{upload.U_UPLOAD}">{lang:upload_picture}</a></li>
      <!-- END upload -->
    </ul>
  </dd>
</dl>

Cette astuce est applicable à d'autres blocs <dl>…</dl> si nécessaire.

Doubler et ajouter en haut des vignettes les liens vers les pages suivantes

dans /template/yoga/index.tpl, avant

{MONTH_CALENDAR}
{THUMBNAILS}
{CATEGORIES}

insérez

<!-- BEGIN cat_infos -->
<!-- BEGIN navigation -->
<div class="navigationBar">
{cat_infos.navigation.NAV_BAR}
</div>
<!-- END navigation -->
<!-- BEGIN comment -->
<div class="additional_info">{cat_infos.comment.COMMENTS}</div>
<!-- END comment -->
<!-- END cat_infos -->

Vous aurez ainsi les liens vers les pages suivantes et précédentes au dessus et au dessous des vignettes. Attention, vous doublerez aussi le commentaire de la catégorie.

Pour enlever le commentaire, il suffit de remplacer

<div class="additional_info">{cat_infos.comment.COMMENTS}</div>
 par 
<!--<div class="additional_info">{cat_infos.comment.COMMENTS}</div>--> 

Cinématiques de fonctionnement

Inscrire des utilisateurs soi-même et les prévenir de cette bonne nouvelle

Quand on a une galerie familiale, c'est souvent le webmestre du site qui crée les différents comptes utilisateurs pour l'ensemble de la famille.

Voici un exemple de quelques étapes pour le faire aisément:

  1. Création des users: Dans la partie administration/Identification/Utilisateur, ajouter les x nouveaux utilisateurs
  2. Renseigner les emails des nouveaux utilisateurs: en MySql avec phpMyAdmin par exemple, faire la mise à jour des mails dans la table #_users
  3. Envoyer par mail aux nouveaux utilisateurs leur nom d'utilisateur et leur mot de passe: Faire une demande de password avec l'email des nouveaux utilisateurs (http://tonsite/tonreppwg/password.php)
  4. Envoyer par mail aux nouveaux utilisateurs un message de bienvenue: Dans la partie administration/Général/Notification Inscrire à la notification les nouveaux utilisateurs et envoyer une notification avec un message personnalisé (Le site doit avoir au moins une photo) Cette action peut être faite avant l'envoi du mot de passe par mail:-)

Astuces en cours de révision

Toutes…

# Mise en Page générale

  • Changer la couleur des polices et autres…
  • Masquer le titre de la galerie
  • Positioner la marge de la page

# Mise en Page de “Category”

  • Activez vos liens
  • Largeur du menu
  • Modifier les crochets qui encadrent les nombres
  • Ajouter un ou des lien(s) vers d'autre(s) site(s)

# Mise en Page de “Picture”

  • Donner une position fixe aux miniatures précédente/suivante de la page “picture”
  • Modifier l'apparence des légendes de la page “picture”
  • Masquer les champs “Enregistré le”, “Dimensions”, “Fichier”, “Poids”, “Mots-clefs” sous les photos
  • Masquer certaines informations sous les photos ( Auteur, Créée le, Enregistrée le, etc.)
  • Modifier le choix d'informations affichées par défaut sous la photo de taille moyenne

# Mode de fonctionnement (Comportement)

  • Afficher le nombre de commentaires des utilisateurs (seulement s'il en existe)
  • Miniatures coupées
  • Gestion manuelle des sites distant
  • Intégrer la vignette dans la base de données
 
Back to top
fr/personnalisation/branche_1.6.1155334380.txt.gz · Last modified: 2009/03/07 22:13 (external edit)
 
 
github twitter newsletter Donate Piwigo.org © 2002-2022 · Contact