Feuilles de styles utilisateur site par site

Thomas · Message par **Thomas** » 30 août 2005, 00:39

Je préfère mettre la remarque dans cette catégorie du forum plutôt que la catégorie "Firefox" car l'utilisateur débutant n'en aura rien à faire...

Je vois depuis un moment que Firefox 1.5 apportera les feuilles de styles utilisateur site par site via userContent.css.

Je me demandais si ça marcherai mieux que l'extensions URIID.

Ce soir j'avais le temps alors je me suis renseigné et j'ai recommencé mon ancien essai.

3 heures plus tard, voilà la première ébauche :

Je mettrais le code à disposition de tout le monde quand j'estimerai avoir fini. Il y a encore des bugs comme par exemple en haut la ligne blanche mais ça c'ets ç cause de l'image donc je n'y peux rien. En bas à gauche il y a deux barres verticales noires mais je n'arrive pas à m'en débarasser et ça m'énerve

Et j'aimerai bien rendre mieux les commentaires et mettre plus en valeur la description du bug dans la page deudit bug.

++

Message par **pascal** » 30 août 2005, 02:56

joli

PsyDk · Message par **PsyDk** » 30 août 2005, 11:22

Ça révèle le fait que bugzilla.mozilla.org est quand même super laid

Message par **Benoit** » 30 août 2005, 11:56

Incroyable

Tu as pensé à soumettre le résultat à Gerv ? Il pourrait au moins servir de feuille de style alternative si le style actuel est préféré pour des raisons de nostalgie ou d'efficacité (je n'en sais rien, je ne connais pas les raisons du non-redesign de cette partie du site, peut-être simplement le manque de temps au fond).

Thomas · Message par **Thomas** » 30 août 2005, 12:03

J'ai fini ... quasiment. Tout les pseudos onglets que j'ai pu voir s'affichant à l'a manière de mozilla.org, les commentaires sont stylés, mais IL Y A TOUJOURS CES DEUX BANDES NOIRES A GAUCHE DU PIED DE PAGE

Je n'arrive pas à savoir d'où elle viennent

PS : le code HTML est un vrai ordure, heureusement que les sélecteurs de CSS3 sont là

Thomas · Message par **Thomas** » 30 août 2005, 13:39

Premier jet

A copier/coller dans votre userContent.css

Prière de ne pas diffuser encore ce code au cas où ça vous viendrais à l'esprit. je voudrais d'avoir déceller les derniers bugs et trouver comment enlever ces **** de barres noires en bas

Code : Tout sélectionner

/*
*
* @author       Thomas Bassetto <tbassetto@gmail.com>
* @version      1.1 (08/30/05)
*
* The contents of this file are subject to the Mozilla Public License
* Version 1.1 (the "License"); you may not use this file except in
* compliance with the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS"
* basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See the
* License for the specific language governing rights and limitations
* under the License.
*/


@-moz-document url-prefix(https://bugzilla.mozilla.org)
{

    body {
        background: #FFF url(http://www.mozilla.org/images/body_back.gif) repeat-x !important;
        color: #000 !important;
        margin: 0.5em !important;
        line-height: 1.3em !important;
        font-family: Verdana, arial, sans-serif !important;
    }

    #banner {
        background: #455372 url("http://mozilla.org/images/header_bl.png") bottom left repeat-x !important;
        position: relative !important;
        height: 6em !important;
        padding: 0 !important;
        margin-top: 0 !important;
        border: 0 !important;
    }
    #banner img { display:none; !important }

    #banner-name span {
        display: block !important;
        width: 200px !important;
        height: 55px !important;
        background: transparent url("http://www.bugzilla.org/img/bugzilla.gif") no-repeat !important;
        text-decoration: none !important;
        margin-top: 0 !important;
    }
    #banner-version {
        margin-top: O !important;
        margin-left: 18px !important;
        color: #FFF !important;
        background: transparent !important;
        text-align: left !important;
    }
    #banner-version a {
        color: #fff !important;
    }
    #banner .outro {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        padding: 5px !important;
        background: transparent url("http://mozilla.org/images/header_tr.gif") no-repeat top right !important;
        margin-right: O !important;
    }
    #banner .intro{
        position: absolute !important;
        bottom: 0 !important;
        right: 0 !important;
        padding: 5px !important;
        background: transparent url("http://mozilla.org/images/header_br.gif") no-repeat bottom right !important;
        margin-right: 0 !important;
    }

    td[width="50%"] + td[width="50%"] {
        padding-bottom: 150px !important;
        background: url(http://www.bugzilla.org/img/buggie.png) no-repeat 50% !important;
    }
    img[src="ant.jpg"] {
        display: none;
    }

    font[size="+1"] {
        font-size: small !important;
    }

    hr {
        height: 1px !important;
        background-color: #000 !important;
        color: #000 !important;
        margin: 2em 0 !important;
    }

    body, td, th, input {
        font-family: verdana, sans-serif;
        font-size: small;
    }

    li h1, li h2, li h3, li h4, li h5, li h6 {
        border: none;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 1em 0 0.2em 0 !important;
        border-bottom: 1px solid #ccc !important;
        font-family: arial, verdana, sans-serif !important;
    }
    h1 { font-size: 160% !important; font-weight: normal !important; }
    h2 { font-size: 150% !important; font-weight: normal !important; }
    h3 { font-size: 120% !important !important; }
    h4 { font-size: 100% !important !important; }
    h5 { font-size: 90% !important !important; }
    h6 { font-size: 90% !important; border: 0 !important; }
    hr {
        height: 1px !important;
        background-color: #000 !important;
        color: #000 !important;
        margin: 2em 0 !important;
    }

    :link { color: #039 !important; }
    :visited { color: #636 !important; }
    :link:hover, :visited:hover { color: #333 !important; }
    :link:active, :link:active { color: #000 !important; }

    #steps:before {
        line-height: 0.1 !important;
        font-size: 1px !important;
        background: transparent url("http://www.mozilla.org/images/key-point_tr.gif") no-repeat top right !important;
        margin: -15px -15px 0 -15px !important;
        height: 5px !important;
        display: block !important;
        border: none !important;
        content: url("http://www.mozilla.org/images/key-point_tl.gif") !important;
    }
    #steps {
        background: #e4ecec url("http://www.mozilla.org/images/key-point_back.gif") right repeat-y !important;
        padding: 15px !important;
        margin-bottom: 1em !important;
        border: 0 !important;
    }
    #steps h2 {
        margin-top: 15px important;
    }
    #steps:after {
        display: block !important;
        clear: both !important;
        padding-top: 15px !important;
        line-height: 0.1 !important;
        font-size: 1px !important;
        content:  url("http://www.mozilla.org/images/key-point_bl.gif") !important;
        margin: -15px !important;
        height: 8px !important;
        background: transparent url("http://www.mozilla.org/images/key-point_br.gif") scroll no-repeat bottom right  !important;
    }
    
    form {
        margin: 0 !important;
        display: inline !important;
        border: O !important;
    }

    label {
        font-weight: bold !important;
        color: #OOO !important;
        font-size: 85% !important; 
    }

    input {
        font-size: 85% !important;
        border:    1px solid #9097A2 !important;
        background: #D9DBE1 !important;
        padding: 2px !important;
    }
    input:hover,
    input:focus {
        background: #fff !important;
    }

    input[type="submit"],
    input[type="submit"]:hover,
    input[type="submit"]:focus {
        background: #6A7389 !important;
        color: #fff !important;
        padding: 1px 4px !important;
        border-right: 1px solid #283043 !important;
        border-bottom: 1px solid #283043 !important;
        border-top: 1px solid #9097A2 !important;
        border-left: 1px solid #9097A2 !important;
    }

    #useful-links {
        background: #C4EFA1 !important;
        padding: 10px !important;
        margin-bottom: 0.5em !important;
        -moz-border-radius: 10px !important;
        margin: auto !important;
        border: 0 !important;
    }

}

@-moz-document url-prefix(https://bugzilla.mozilla.org/query.cgi),
               url-prefix(https://bugzilla.mozilla.org/userprefs.cgi)
{

    table[cellpadding="10"] {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        width: auto !important;
        position: absolute !important;
        top: 61px !important;
        right: 6px !important;
        margin: 0 !important;
        padding: 0 15px 0 0 !important;
        z-index: 90;
    }
    td.selected_tab {
        border: 0 !important;
        background: #FFF url("http://www.mozilla.org/images/header_tab.gif") 100% -200px no-repeat !important;
        -moz-border-radius-topleft: 10px;
        -moz-border-radius-topright: 10px;
        padding: 0 6px 0 10px !important;
        margin: 0 1px 0 0 !important;
        border-bottom: 1px solid #fff !important;
        border-bottom: 1px solid #fff;        
    }
    td.unselected_tab {
        border: 0 !important;
        background: transparent url("http://www.mozilla.org/images/header_tab.gif") 100% -600px no-repeat !important;
        padding: 0 6px 0 0 !important;
        margin: 0 1px 0 0 !important;
        border-bottom: 1px solid #515358 !important;
    }
    td.unselected_tab a {
        float: left !important;
        display: block !important;
        padding: 4px 4px 4px 10px !important;
        background: transparent url("http://www.mozilla.org/images/header_tab.gif") 0% -600px no-repeat !important;
        font-weight: bold !important;
        color: #000 !important;
        text-decoration: none !important;    
        margin: 0 !important;
    }
    td.unselected_tab:hover a { background-position: 0% -400px !important; }
    td.unselected_tab:hover { background-position: 100% -400px !important; }    
    td.spacer {
        display: none !important;
    }
   
}

@-moz-document url-prefix(https://bugzilla.mozilla.org/show_bug.cgi)
{

    td[align="left"][valign="middle"] + td[align="left"][valign="middle"]:before {
           content: "Description : " !important;
           color: #c00 !important;
           font-weight: bold !important;
    }    
    
    td[align="left"][valign="middle"] + td[align="left"][valign="middle"] {
           font-weight: bold !important;
           font-size: 12O% !important;
           border-bottom: 1px #000 dashed !important;
           margin-top: 2em !important;
           text-align: center !important;
    }
    
    a[href="query.cgi"],
    a[href="enter_bug.cgi"] {
        padding: 5px !important;
        margin-top: 60px !important;
    }
    
    pre[id^="comment_text"] {
        font-family: verdana, sans-serif !important;
        font-style: normal !important;
        background: url(http://www.mandarindesign.com/images/quote.gif) no-repeat !important;
        text-align: justify !important;
        padding-left: 20px !important;        
    }
    
    .bz_comment {
        background: #FAF4C8 !important;
        border-right: 1px solid #E3DE9F !important;
        border-bottom: 1px solid #E3DE9F !important;
        text-align: center !important;
        line-height: 1.1em !important;
        padding: 2px 1px 5px 1px !important;
        color: #A19D68 !important;
        margin: 0 0.5em 1em 0 !important;
    }
    
}

calimo · Message par **calimo** » 31 août 2005, 21:51

Les images n'existent plus

En fait, ça ne peut que marcher mieux que URIID (qui est d'ailleurs quasi-impossible à trouver

)

FF_Olivier · Message par **FF_Olivier** » 31 août 2005, 22:39

Toto a écrit :mais IL Y A TOUJOURS CES DEUX BANDES NOIRES A GAUCHE DU PIED DE PAGE

Je n'arrive pas à savoir d'où elle viennent

Dans https://bugzilla.mozilla.org/skins/standard/global.css :

Code : Tout sélectionner

#footer form
    {
        background: #FFFFE0;
        border: 1px solid #000;   <-- mettre à 0px bien sûr
    }

Grâce au DOM (Examiner, la loupe puis Object - CSS style rules) !

Thomas · Message par **Thomas** » 31 août 2005, 23:43

FF_Olivier a écrit :Dans https://bugzilla.mozilla.org/skins/standard/global.css :
Code : Tout sélectionner
#footer form
    {
        background: #FFFFE0;
        border: 1px solid #000;   <-- mettre à 0px bien sûr
    }
Grâce au DOM (Examiner, la loupe puis Object - CSS style rules) !

T'as essayé? J'avais vu avec le DOM Inspector que ça venait de là aussi mais border: 0 ne marchait pas.

En attendant il existe une version 1.11 qui corrige l'erreur

http://navigosaure.net/carnet/index.php ... e-par-site

Calimo : moi j'ai encore les images

FF_Olivier · Message par **FF_Olivier** » 01 sept. 2005, 00:57

Toto a écrit :T'as essayé? J'avais vu avec le DOM Inspector que ça venait de là aussi mais border: 0 ne marchait pas.

J'ai essayé en dynamique dans le DOM même, les deux barres noires disparaissent (en fait, ce sont les border-left et border-right accolés).

PS (5 min. plus tard) : je viens de modifier le userContent.css section @-moz-document url-prefix(https://bugzilla.mozilla.org), j'ai ajouté :

Code : Tout sélectionner

#footer form { border: 0px !important; }

...et ça marche.

Thomas · Message par **Thomas** » 01 sept. 2005, 01:09

je suis persuadé que ça marchait pas chez moi

FF_Olivier · Message par **FF_Olivier** » 01 sept. 2005, 01:12

Bah, l'important c'est que ça marche

!
Ou alors, c'est un pb de version : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8b4) Gecko/20050828 Firefox/1.0+

calimo · Message par **calimo** » 01 sept. 2005, 09:44

En fait les images sur ton blog sont ok, mais celles dans le premier message du sujet renvoient une erreur 404...

Thomas · Message par **Thomas** » 01 sept. 2005, 11:42

calimo a écrit :En fait les images sur ton blog sont ok, mais celles dans le premier message du sujet renvoient une erreur 404...

Aaaah, ok ! Je croyais les images utilisées par la feuille CSS !

Effectivement celles là étaient obsolètes.

Thomas · Message par **Thomas** » 01 sept. 2005, 11:43

FF_Olivier a écrit :Bah, l'important c'est que ça marche !
Ou alors, c'est un pb de version : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8b4) Gecko/20050828 Firefox/1.0+

Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8b4) Gecko/20050828 Firefox/1.0+

Pareil sauf que je sus sous Windows et que c'est en Français

Geckozone

Feuilles de styles utilisateur site par site

Feuilles de styles utilisateur site par site

Qui est en ligne ?