Changeset 2111

Timestamp:

03/09/10 16:01:08 (14 years ago)

Author:

philippe

Message:

1.3.5 : added user css management option

Location:

plugins/colorbox

Files:

• _define.php (modified) (1 diff)
• _public.php (modified) (1 diff)
• locales/en/help/advanced_help.html (modified) (1 diff)
• locales/fr/help/advanced_help.html (modified) (1 diff)

plugins/colorbox/_define.php

@@ -15 +15 @@
      /* Description*/         "ColorBox like effect on images using jquery ColorBox plugin",
      /* Author */             "Philippe aka amalgame and contributors",
-     /* Version */            '1.3.4',
+     /* Version */            '1.3.5',
      /* Permissions */        'admin'
 );

plugins/colorbox/_public.php

@@ -41 +41 @@
           '<style type="text/css">'."\n".
           '@import url('.$url.'/themes/'.$s->colorbox_theme.'/colorbox_theme.css);'."\n".
-          "</style>\n".
+          "</style>\n";
           
+          $public_path = $core->blog->public_path;
+          $public_url = $core->blog->settings->public_url;       
+          
+          $colorbox_user_path = $public_path.'/colorbox/themes/';
+          $colorbox_user_url = $public_url.'/colorbox/themes/';
+          
+          if (file_exists($colorbox_user_path.$s->colorbox_theme.'/colorbox_user.css')){
+          echo
+          '<style type="text/css">'."\n".
+          '@import url('.$colorbox_user_url.$s->colorbox_theme.'/colorbox_user.css);'."\n".
+          "</style>\n";
+          }
+          
+          echo
           '<script type="text/javascript" src="'.$url.'/js/jquery.colorbox-min.js"></script>'."\n".
           

plugins/colorbox/locales/en/help/advanced_help.html

@@ -211 +211 @@
     <h4>Included themes</h4>
     <p>ColorBox ships with 6 themes to choose its modal window's appearance. Others will be added later.</p>
-    <p>Lightbox Classic theme is special : it is designed to look exactly like the former plugin, and has no view counter and no slideshow commands. If however you wish to activate these functions, follow instructions in
-      <em>themes/3/colorbox_common.css</em>
-      .</p>
-    <p></p>
+    <p>Lightbox Classic theme is special : it is designed to look exactly like the former plugin, and has no view counter and no slideshow commands.</p>
     <h4>Modifying themes</h4>
     <h5>Principle</h5>
-    <p>ColorBox modal window can be entirely styled using CSS, and all images modified. Plugin ships with a stylesheet named
-      <em>colorbox_common.css</em>
-      . It is the one you must not touch !</p>
-    <p>In each theme you will find a stylesheet that you may wish to modify, it is named
-      <em>colorbox_theme.css</em>
-    </p>
-    <p>In each theme there is also a directory named
-      <em>images</em>
-      : in there, you may modify your modal window navigation icons.</p>
-    <h5>Structure</h5>
-    <p>A theme is made of a numbered directory with the following content:</p>
-    <ul>
-      <li>a file named
-        <em>colorbox_theme.css</em>
-        with all ColorBox selectors that you can modify</li>
-      <li>a directory named
-        <em>images</em>
-        containing all images (CSS sprites or icons)</li>
-    </ul>
-    <h5>CSS</h5>
-    <p>You may position all blocks to your liking and style them.</p>
-    <p>Important : if you change images linked in the stylesheet, put them in the themes
-      <em>images</em>
-      folder and link them as follows:</p>
-    <pre>background:url(index.php?pf=colorbox/themes/x/images/image_name.png)...</pre>
-    <p>where x is the theme number.</p>
+    <p>ColorBox modal window can be entirely styled using CSS, and its navigation images modified.</p>
+    <p>ColorBox allows to define for each theme a personnal stylesheet, stored in your public folder, and whose rules will overwrite existing theme rules.</p>
+    <p>Here is how to do it:</p>
+    <h5>Create a personnal Colorbox themes directory</h5>
+    <p>First create a directory, at the root of your plugin folder, containing the following hierarchy :</p>
+    <pre>colorbox/themes/x/</pre>
+    <p>where
+      <em>x</em>
+      is the number of the theme you wish to modify. In this directory you will store all your modifications on the theme. Repeat this operation and change
+      <em>x</em>
+      if you wish to modify several themes.</p>
+    <h5>Create your stylesheet</h5>
+    <p>Add now in directory
+      <em>x</em>
+      a stylesheet named
+      <em>colorbox_user.css</em>
+      with
+      <strong>only</strong>
+      the rules you want to apply
+      <strong>instead of</strong>
+      theme rules, i.e.</p>
+    <pre>#cboxOverlay{background-color:red;}</pre>
+    <p>if you only wish to change modal window background color.</p>
+    <h5>Add images</h5>
+    <p>If you wish to modify modal window navigation graphics, place your images in the personnal directory, and refer to them in <em>colorbox_user.css</em>.</p>
     <h3>Goodie</h3>
     <p>ColorBox display more than images, here are some instructions to start playing with:</p>

plugins/colorbox/locales/fr/help/advanced_help.html

@@ -212 +212 @@
     <h4>Thèmes livrés</h4>
     <p>ColorBox propose 6 thèmes pour choisir l'apparence de la fenêtre modale. D'autres seront ajoutés par la suite.</p>
-    <p>Le thème Lightbox Classic est particulier : il est conçu pour avoir le même aspect visuel que l'ancien plugin d'Olivier Meunier, et ne comporte pas de compteur de vues ni de commandes pour le diaporama. Si vous devez rajouter ces options, modifiez la feuille de style
-      <em>themes/3/colorbox_common.css</em>
-      en suivant les indications dans les commentaires.</p>
-    <p></p>
+    <p>Le thème Lightbox Classic est particulier : il est conçu pour avoir le même aspect visuel que l'ancien plugin d'Olivier Meunier, et le compteur de vues ainsi que le diaporama sont masqués.</p>
     <h4>Modification des thèmes</h4>
     <h5>Principe</h5>
-    <p>La fenêtre modale de ColorBox peut être entièrement stylée en CSS, et les images modifiées. Le plugin embarque une feuille de style nommée
-      <em>colorbox_common.css</em>
-      . C'est celle qu'il ne faut pas toucher !</p>
-    <p>En revanche il y a dans chaque thème une feuille de style que vous pouvez modifier, elle se nomme
-      <em>colorbox_theme.css</em>
-    </p>
-    <p>Dans chaque thème, il y a également un répertoire
-      <em>images</em>
-      : c'est là que vous pouvez modifier les boutons de navigation de la fenêtre modale</p>
-    <h5>Structure</h5>
-    <p>Un thème est constitué d'un dossier numéroté comportant la structure suivante :</p>
-    <ul>
-      <li>un fichier
-        <em>colorbox_theme.css</em>
-        avec tous les sélecteurs que vous pouvez modifier comme bon vous semble</li>
-      <li>un répertoire
-        <em>images</em>
-        contenant les icônes de navigation (sprites CSS ou icônes)</li>
-    </ul>
-    <h5>CSS</h5>
-    <p>Vous pouvez positionner tous les blocs différemment et les styler à votre guise.</p>
-    <p>Attention : si vous changez les images liées par la feuille de style, veillez à les placer dans le répertoire
-      <em>images</em>
-      du thème et à indiquer leur chemin comme suit :</p>
-    <pre>background:url(index.php?pf=colorbox/themes/x/images/nom_de_l_image.png)...</pre>
-    <p>où x est le numéro du thème que vous modifiez</p>
+    <p>La fenêtre modale de ColorBox peut être entièrement stylée en CSS, et les images modifiées.</p>
+    <p>ColorBox permet de définir une feuille de style personnalisée, stockée dans votre répertoire de médias, et dont les règles écraseront les règles de même nom du thème utilisé.</p>
+    <p>Voici comment procéder :</p>
+    <h5>Créer un répertoires de thèmes personnels</h5>
+    <p>Commencez par créer, à la racine de votre répertoire de médias, les répertoires nécessaires pour obtenir l'arborescence suivante :</p>
+    <pre>colorbox/themes/x/</pre>
+    <p>où
+      <em>x</em>
+      est le numéro du thème que vous souhaitez modifier. C'est dans ce répertoire que vous stockerez toutes vos modifications sur le thème. Répétez l'opération en changeant
+      <em>x</em>
+      si vous devez modifier plusieurs thèmes.</p>
+    <h5>Créer votre feuille de style</h5>
+    <p>Ajoutez maintenant dans le répertoire
+      <em>x</em>
+      une feuille de style nommée
+      <em>colorbox_user.css</em>
+      avec
+      <strong>seulement</strong>
+      les règles que vous voulez voir appliquer
+      <strong>à la place</strong>
+      de celles du thème, par exemple</p>
+    <pre>#cboxOverlay{background-color:red;}</pre>
+    <p>si vous ne souhaitez changer que la couleur de fond de la fenêtre modale</p>
+    <h5>Modifications des images</h5>
+    <p>Si vous voulez modifier les boutons de navigation de la fenêtre modale, placez dans le répertoire du thème personnel les images nécessaires, et faites référence à ces images dans<em>colorbox_user.css</em>.</p>
     <h3>Goodie</h3>
     <p>ColorBox peut afficher autre chose que des images, voici quelques indications pour commencer à jouer avec :</p>