AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


2 résultats trouvés pour 303030

(Ylkhana) Demande de personnalisation de boîte MP - Mar 27 Mar 2018 - 2:14

Ma demande



Salut les codeurs !

Pour commencer, j'aimerais remercier celles et ceux qui vont se pencher sur ma commande. :)
Si ça peut vous rassurer, ça ne devrait pas être bien bien compliqué, j'ai déjà le modèle que je veux... Mais pas dans le bon template. Pis comme je suis pas douée, bah j'arrive pas à le mettre à l'autre place - j'ai un peu trop peur de tout faire péter, en fait. ><


Schéma(s) et Eléments


Schémas : Tag 303030 sur Never Utopia - graphisme, codage et game design Xps1
Tailles des éléments : la taille du forum est de 1050px
Effets voulus : aucun
Version de votre forum : PHPBB2


Ressources


Les images de bases présentes dans le screenshot me vont très bien. :)


Autres précisions ?


Dans le fond... Dans le bloc à gauche, je verrais bien le nom de l'expéditeur et la date, dans celui du milieu le titre et à gauche, le checkbox. :)
Voici le code actuel, dans mon template topics_list_box :
Code:
    <!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
    <script type="text/javascript">
    function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
      var all_checked = true;
      for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
          if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
          }
      }
      document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
    }
    function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
      for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
          if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
          }
      }
    }
    </script>
    <!-- END multi_selection -->
    <link href='http://fonts.googleapis.com/css?family=Lobster|Great+Vibes' rel='stylesheet' type='text/css' />
    <table class="sujets" width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap" style="padding:0; background-color:transparent; background-image:none;">
  <div class="battycat_background">
    <div class="battycat_titre"><div class="secondarytitle"> <h2>{topics_list_box.row.L_TITLE} </h2></div></div></div></th>
      </tr>
      <tr>
        <td valign="middle" align="center">
          <table class="sujets_list" cellspacing="0" cellpadding="0">
            <tbody>
    <!-- END header_table -->
    <!-- BEGIN header_row -->
    <!-- END header_row -->
    <!-- BEGIN topic -->
              <tr>
                <td valign="middle" align="center" colspan="2">
                  <table class="sujet" cellspacing="7" cellpadding="0">
                    <tbody>
                      <tr>
                        <td valign="middle" align="left" width="210">
                          Composé par
                          <span class="sujet_auteur">
                            {topics_list_box.row.TOPIC_AUTHOR}
                          </span>
                          <br />
                          <span class="sujet_stats">
                            Réponses : {topics_list_box.row.REPLIES} | Vues : {topics_list_box.row.VIEWS}
                          </span>
                        </td>
                        <td valign="middle" align="center" width="320">
                          <div class="sujet_type">{topics_list_box.row.TOPIC_TYPE}</div>
                          <a class="sujetlink" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
                          {topics_list_box.row.PARTICIPATE_POST_IMG}
                        </td>
                        <td valign="middle" align="right" width="210">
                          {topics_list_box.row.LAST_POST_IMG} {topics_list_box.row.LAST_POST_TIME}
                          <br />
                          Derniêre réponse par
                          <span class="sujet_last_auteur">
                            {topics_list_box.row.LAST_POST_AUTHOR}
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
    <!-- END topic -->
    <!-- BEGIN no_topics -->
        <tr>
                <td valign="middle" align="center" colspan="2">
                  <table class="sujet" cellspacing="7" cellpadding="0">
                    <tbody>
                      <tr>
                        <td valign="middle" align="center">
                          <span class="sujets_font">
                            {topics_list_box.row.L_NO_TOPICS}
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
              </td>
      </tr>
    <!-- END no_topics -->
    <!-- BEGIN bottom -->
      <tr>
        <td align="left">
                <span class="sujets_font">
                  {PAGINATION}
                </span>
              </td>
        <td align="right">
                <a href="#top" class="sujets_font">
                  {L_BACK_TO_TOP}
                </a> 
              </td>
      </tr>
    <!-- END bottom -->
    <!-- BEGIN footer_table -->
            </tbody>
          </table>
        </td>
      </tr>
    </table>
    <!-- END footer_table -->
    <!-- BEGIN spacer -->
    <br class="gensmall" />
    <!-- END spacer -->
    <!-- END row -->
    <!-- END topics_list_box -->

Pour les couleurs, puisque la plupart doivent être dans le CSS :
- Background: #303030
- Liens: #67717A
- Texte : #ABAAAA

Merci d'avance !
Utahime

Minishiro

[Astuce] Fonctionnement des codes hexadécimaux - Mar 25 Déc 2012 - 0:07


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Bonjour!

Ah, les codes hexadécimaux! Ces bé-bêtes donnent du fil à retordre à bien des codeurs, expérimentés comme débutants, et nombreux sont ceux qui doivent se fier à des générateurs de code pour produire la couleur idéale, souvent par essais et erreurs. Eh bien, l'astuce que je vous sers aujourd'hui ne remplacera certes pas lesdits générateurs, mais peu à peu, vous serez probablement capable de les utiliser moins souvent, voire pas du tout dépendant des situations. :)

Pour ceux qui ne le savent pas, il y a quatre façon de générer des codes de couleur sur le web.
white, black, blue, etc. → ce sont les noms des couleurs en anglais.
rgb(XXX,XXX,XXX) → ce sont les quantités de rouge, vert et bleu dans la couleur, représentées par une valeur allant de 0 à 255.
rgba(XXX,XXX,XXX,0.X) → même principe que le rgb, mais avec la transparence en nombre décimal entre 0 et 1.
#XXXXXX → codes hexadécimaux.


Les codes hexadécimaux sont nommés ainsi car ils comportent, vous l'aurez deviné, 6 chiffres ou lettres. Les deux premiers chiffres donnent la quantité de rouge, les seconds de vert et les derniers de bleu, comme ceci:
#XXXXXX


En effet, les couleurs primaires sur le web ne sont pas les mêmes que celles des arts plastiques (magenta, cyan et jaune). Les codes hexadécimaux vont de 00 à FF de la manière suivante:
00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 2A, 2B, 2C, 2D, 2E, 2F, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 3A, 3B, 3C, 3D, 3E, 3F, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 4A, 4B, 4C, 4D, 4E, 4F, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 5A, 5B, 5C, 5D, 5E, 5F, etc.


00, c'est le noir, c'est l'absence absolue de la couleur. FF, c'est la saturation maximale. Ainsi:
#000000 = noir
#FF0000 = rouge
#00FF00 = vert
#0000FF = bleu
#FFFF00 = jaune
#00FFFF = cyan
#FF00FF = rose
#FFFFFF = blanc


Lorsque les codes de rouge, vert et bleu sont les mêmes, la saturation de la couleur est nulle; ces codes correspondent aux différentes nuances de gris.

#000000 = noir
#111111 = gris 1
#222222 = gris 2
#333333 = gris 3
#444444 = gris 4
#555555 = gris 5
#666666 = gris 6
#777777 = gris 7
#888888 = gris 8
#999999 = gris 9
#AAAAAA = gris 10
#BBBBBB = gris 11
#CCCCCC = gris 12
#DDDDDD = gris 13
#EEEEEE = gris 14
#FFFFFF = blanc
#000000 = noir
#101010 = gris A
#202020 = gris B
#303030 = gris C
#404040 = gris D
#505050 = gris E
#606060 = gris F
#707070 = gris G
#808080 = gris H
#909090 = gris I
#A0A0A0 = gris J
#B0B0B0 = gris K
#C0C0C0 = gris L
#D0D0D0 = gris M
#E0E0E0 = gris N
#F0F0F0 = gris O
#0F0F0F = gris AA
#1F1F1F = gris BB
#2F2F2F = gris CC
#3F3F3F = gris DD
#4F4F4F = gris EE
#5F5F5F = gris FF
#6F6F6F = gris GG
#7F7F7F = gris HH
#8F8F8F = gris II
#9F9F9F = gris JJ
#AFAFAF = gris KK
#BFBFBF = gris LL
#CFCFCF = gris MM
#DFDFDF = gris NN
#EFEFEF = gris OO
#FFFFFF = blanc


Lorsque tous les chiffres d'un code sont les mêmes, il est possible de n'en mettre que les trois premiers (note: ça ne fonctionne pas en BBCode). Les majuscules sont facultatives:


Voyons donc comment ces belles informations peuvent vous être utiles! :) Supposons que nous partons d'un rouge:

Finalement, ce rouge est trop vif et trop pâle. Nous voudrions le rendre plus foncé.

Et puis, il est encore trop vif, nous allons ajouter du vert et du bleu pour en baisser la saturation.

Comme nous avons ajouté de la couleur, elle est à nouveau trop pâle.

Et puis, ça serait bien que ça tire un peu sur le bourgogne, nous allons donc ajouter du bleu.

Et on aimerait que ça soit encore un peu plus foncé.

Et voilà! Bon, certes si vous êtes daltonien, il se peut que vous ne voyez pas ou peu la différence des nuances entre ces différentes étapes, mais sinon vous devriez le voir. :)

En espérant que ça serve! ^^


Revenir en haut

La date/heure actuelle est Jeu 28 Mar 2024 - 16:03