|
|
| Ligne 9 : |
Ligne 9 : |
| | | | |
| | Il est possible d'utiliser une feuille de style personnalisée (cf. préférences de Brief). | | Il est possible d'utiliser une feuille de style personnalisée (cf. préférences de Brief). |
| − |
| |
| − | === Feuille de style personnalisée ===
| |
| − |
| |
| − | {{Attention|Cette feuille de style ne marche qu'avec Firefox 2. Celle qui marchera avec Firefox 3 est à créer !}}
| |
| − |
| |
| − | ''Feuille de style personnalisée pour affichage des auteurs dans la présentation compacte des titres de modifs.''
| |
| − |
| |
| − | ''Le texte ci dessous est à placer dans un fichier nommé par exemple :''
| |
| − | : Brief_1.1-auteur_visible.css
| |
| − |
| |
| − | ''Puis indiquer dans les préférences de Brief où est enregistré ce fichier.''
| |
| − |
| |
| − | ==== Le code source ====
| |
| − | <pre>
| |
| − | body {
| |
| − | background: #fafcff;
| |
| − | font-family: Verdana, Helvetica, Arial, sans-serif;
| |
| − | font-size: 10px;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* ---------------------- Header ---------------------- */
| |
| − |
| |
| − | #header {
| |
| − | background: #314a59 url('chrome://brief/skin/header-bkg.png') repeat-x;
| |
| − | color: #ffffff;
| |
| − | text-decoration: none;
| |
| − | display: block;
| |
| − | padding: 5px 5% 5px;
| |
| − | overflow: auto; /* Clears contained floats */
| |
| − | }
| |
| − |
| |
| − | #feed-image {
| |
| − | border: none;
| |
| − | float: right;
| |
| − | margin: 0 10px 10px;
| |
| − | }
| |
| − |
| |
| − | #feed-title {
| |
| − | font-size: 20px;
| |
| − | font-weight: bold;
| |
| − | }
| |
| − |
| |
| − | #feed-subtitle {
| |
| − | font-size: 13px;
| |
| − | margin-top: 3px;
| |
| − | }
| |
| − |
| |
| − | #feed-content {
| |
| − | margin: 20px auto 0;
| |
| − | padding: 0 10px 10px;
| |
| − | max-width: 80em;
| |
| − | }
| |
| − |
| |
| − | #message {
| |
| − | font-size: 20px;
| |
| − | color: #4a6e85;
| |
| − | text-align: center;
| |
| − | display: none;
| |
| − | margin-top: 100px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* --------------------------- Article ------------------------ */
| |
| − |
| |
| − | /* .article-container may have "starred", "read", and "collapsed"
| |
| − | attributes. The first two are self-explanatory while "collapsed"
| |
| − | means that the article's content is folded (headlines-only mode) */
| |
| − | .article-container {
| |
| − | background: url('chrome://brief/skin/unread-entry-bkg.png') repeat-x;
| |
| − | background-color: #ffffff;
| |
| − | border-top: 1px #abbfc9 solid;
| |
| − | border-right: 1px #e1e5da solid;
| |
| − | border-left: 1px #e1e5da solid;
| |
| − | padding-bottom: 1px; /* Without this, the article is sometimes cut-off */
| |
| − | overflow: visible; /* This is for the the expand/collapse dropmarker which is
| |
| − | taken outside the box using negative margins */
| |
| − | position: relative;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* ---------------------- Article header ---------------------- */
| |
| − |
| |
| − | .article-header {
| |
| − | min-height: 3.5em;
| |
| − | padding: 6px 5px 0 0;
| |
| − | }
| |
| − |
| |
| − | .article-title-link {
| |
| − | color: #00394f;
| |
| − | font-size: 13px;
| |
| − | font-weight: bold;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* ---------------------- Article controls ---------------------- */
| |
| − |
| |
| − | .article-controls {
| |
| − | font-family: Arial, sans-serif;
| |
| − | font-size: 12px;
| |
| − | display: table-cell; /* The only way I could find out to keep the buttons aligned
| |
| − | was to use vertical-align. For this we need table-cell. */
| |
| − | float: right;
| |
| − | margin-top: -5px;
| |
| − | }
| |
| − |
| |
| − | /* Never change padding of the buttons as it would break many themes */
| |
| − | .article-controls > button {
| |
| − | opacity: 0.8;
| |
| − | min-width: 0;
| |
| − | vertical-align: middle;
| |
| − | }
| |
| − |
| |
| − | .article-controls > button:hover {
| |
| − | opacity: 1.0;
| |
| − | }
| |
| − |
| |
| − | .star-container {
| |
| − | float: left;
| |
| − | margin: -6px 2px 0 0;
| |
| − | width: 24px;
| |
| − | height: 3.0em;
| |
| − | }
| |
| − |
| |
| − | .star-image {
| |
| − | padding: 5px 0 0 5px;
| |
| − | }
| |
| − |
| |
| − | .expand-button {
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: -35px;
| |
| − | height: 6em;
| |
| − | width: 42px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* ---------------------- Article subheader ---------------------- */
| |
| − |
| |
| − | .article-subheader {
| |
| − | font-family: "Lucida Grande", Verdana, sans-serif;
| |
| − | color: #477900;
| |
| − | font-size: 12px;
| |
| − | padding: 0 25px 0 40px;
| |
| − | overflow: auto; /* Clears contained floats */
| |
| − | }
| |
| − |
| |
| − | .article-authors, .article-date {
| |
| − | text-align: right;
| |
| − | float: right;
| |
| − | }
| |
| − |
| |
| − | .article-authors {
| |
| − | margin-top: 2px;
| |
| − | clear: right;
| |
| − | }
| |
| − |
| |
| − | .article-updated {
| |
| − | color: #de5b00;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* ---------------------- Article content area ---------------------- */
| |
| − |
| |
| − | .article-content {
| |
| − | font-family: "Lucida Grande", Verdana, sans-serif;
| |
| − | font-size: 12px;
| |
| − | line-height: 1.4;
| |
| − | color: #272727;
| |
| − | margin-top: 15px;
| |
| − | padding: 0 25px 35px;
| |
| − | overflow: auto;
| |
| − | }
| |
| − |
| |
| − | .article-content a {
| |
| − | color: #0a1f72;
| |
| − | }
| |
| − |
| |
| − | .article-content a:visited {
| |
| − | color: #444b66;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* ---------------------- Adjustments for read articles ---------------------- */
| |
| − |
| |
| − | .article-container[read] {
| |
| − | background-image: url('chrome://brief/skin/read-entry-bkg.png');
| |
| − | }
| |
| − |
| |
| − | .article-container[read] > .article-header > .article-title-link {
| |
| − | font-weight: normal;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* ---------------------- Adjustments for headlines view ---------------------- */
| |
| − |
| |
| − | .article-container[collapsed] {
| |
| − | background-image: none;
| |
| − | background-color: #ebf5ff;
| |
| − | border-right-color: #e1e8ef;
| |
| − | border-left-color: #e1e8ef;
| |
| − | min-height: 5.5em;
| |
| − | }
| |
| − |
| |
| − | .article-container[collapsed][read] {
| |
| − | background-color: #f5faff;
| |
| − | }
| |
| − |
| |
| − | .article-container[collapsed]:last-child {
| |
| − | border-bottom: 1px solid #abbfc9;
| |
| − | }
| |
| − |
| |
| − | .article-container[collapsed] .article-title-link {
| |
| − | font-size: 12px;
| |
| − | }
| |
| − |
| |
| − | .article-container[collapsed] .article-controls {
| |
| − | background-color: #ebf5ff;
| |
| − | position: absolute;
| |
| − | top: 1px;
| |
| − | right: 5px;
| |
| − | margin: 0;
| |
| − | padding-left: 10px;
| |
| − | }
| |
| − |
| |
| − | .article-container[collapsed][read] .article-controls {
| |
| − | background-color: #f5faff;
| |
| − | }
| |
| − |
| |
| − | .article-container[collapsed] .article-date,
| |
| − | .article-container[collapsed] .feed-name {
| |
| − | font-size: 12px;
| |
| − | color: #5c7933;
| |
| − | }
| |
| − |
| |
| − | .article-container[collapsed] .article-date {
| |
| − | margin: 12px 8px 0;
| |
| − | clear: right;
| |
| − | }
| |
| − |
| |
| − | .article-container[collapsed] .feed-name {
| |
| − | margin: 0 8px;
| |
| − | max-width: 170px;
| |
| − | height: 1.3em; /* Height of a single line */
| |
| − | overflow: hidden;
| |
| − | float: right;
| |
| − | }
| |
| − |
| |
| − | .article-container[collapsed] > .article-subheader {
| |
| − | display: block !important;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* ---------------------- Adjustments for the selected articles -------------------- */
| |
| − |
| |
| − | .article-container[selected] {
| |
| − | border-top-color: #1474d6;
| |
| − | border-right-color: #1474d6;
| |
| − | border-left-color: #1474d6;
| |
| − | }
| |
| − |
| |
| − | /* Non-selected articles don't have bottom border, so if we added one now the article
| |
| − | would shift. Therefore, we change the top border color of the NEXT article. */
| |
| − | .article-container[selected] + .article-container {
| |
| − | border-top-color: #1474d6;
| |
| − | }
| |
| − |
| |
| − | .article-container[selected]:last-child {
| |
| − | border-bottom: 1px solid #1474d6;
| |
| − | }
| |
| − | </pre>
| |
Pour installer Brief, ça fonctionne comme toute extension pour Firefox. Cliquer sur le bouton Ajouter à firefox depuis cette page :
Pour y ajouter un fil RSS, il faut d'abord indiquer dans le logiciel Brief dans quel dossier de Marque-pages on les range.
Il est possible d'utiliser une feuille de style personnalisée (cf. préférences de Brief).
