largeur de la side-bar

JoséJosé Member
Je voudrais augmenter la largeur de la side-bar sans diminuer la largeur de mes articles. je veux donc augmenter la largeur totale de la page et je ne trouve pas. merci de votre aide

José

Réponses

  • Bonjour José,

    il nous faut plus d'informations :
    [list=*]
    [*]ta version de PluXml[/*]
    [*]le nom et la version du thème que tu utilises[/*]
    [*]la résolution cible pour l'affichage de ton site[/*]
    [/list]

    Un lien vers ton site simplifierai encore plus les potentielles réponses.

    En supposant que tu utilises le thème par défaut de la dernière version, la "largeur totale de la page" se modifie en rajoutant le code suivant dans le fichier theme/defaut/css/themes.css

    .container {
    max-width: XXXXpx;
    }

    avec XXXX supérieur à 1280 (qui est la valeur par défaut)

    Cependant, comme les largeurs de la sidebar et des articles sont calculées proportionnellement, cela ne risque pas de te convenir complètement si tu ne veux pas modifier la largeur des articles.

    Il te faudra aussi éditer les différents templates que tu utilises (pas seulement les deux donnés en exemple ci-après) pour ajuster la largeur de chacun des contenus à ta convenance, cf .http://plucss.pluxml.org/#grid

    ligne 9 pour article.php : <div class="content col sml-12 med-8">
    ligne 3 pour sidebar.php : <aside class="aside col sml-12 med-4">

    (pour rappel, le total des deux valeurs "med-X" doit être 12)
  • JoséJosé Member
    Merci beaucoup pour cette réponse

    j'utilise la dernière version , avec le thème par défaut , en local pour le moment

    dans un premier temps , j'ai bien augmenter la largeur avec

    .container {
    max-width: XXXXpx;
    }

    mais comme tu le dis cela n'est pas satisfaisant, j'ai donc laissé à 1280 px

    voici la solution que j'ai trouvé mais je doute qu'elle soit très élégante:

    je redistribue les colonnes dans les fichiers theme/defaut/css/themes.css/sidebar.php en ajoutant "lrg" à 5 et pour article.php lrg-7

    <aside class="aside col sml-12 med-4 lrg-5">

    comme ce n'est pas suffisant, c'est là que je doute, j'ai modifié les paramètres du pluccss, en forçant les valeurs négatives

    .grid {
    overflow: hidden;
    margin-left: -8.5rem;
    margin-right: -10.5rem;
    }

    merci de ton avis

    José
  • C'est une autre possibilité :) PluCSS est assez flexible pour cela

    Attention cependant à la gestion des marges de la classe "grid", car elle peut être réutilisée ailleurs si l'on souhaite ajouter des colonnes à un élément (ce n'est à priori pas le cas dans le thème par défaut) et cela désorganiserait celles-ci.

    Tu peux vouloir aussi réduire la valeur du padding du "container" de theme.css pour gagner un peu plus d'espace.

    .container {
    padding-left: 15rem;
    padding-right: 15rem;
    }

    (en ligne 61 à l'origine)

    Nota : plutôt que de modifier le fichier plucss.css, il vaut mieux ajouter les modifications dans theme.css. Ce qui te permet de mettre à jour plucss.css sans que cela ne casse ton thème par la suite.
  • JoséJosé Member
    Ok super, c'est le type de réponse qui me convient, merci.

    Dans la hiérarchie des mises en forme , est ce que cela veut dire que le css l'emporte sur le plucss ?
  • Oui, car il est listé en second dans l'en-tête <head> de la page HTML. Le navigateur va appliquer le code des fichiers CSS dans l'ordre de lecture de ceux-ci s'il y en a plus d'un.

    Donc s'il y a deux balises identiques mais avec des propriétés différentes sur chaque fichier CSS, c'est la dernière lue qui sera appliquée. (Il est même possible d'avoir une feuille de style différente en fonction du "média" utilisé, mais on déborde du sujet)

    Dans notre cas, on applique une base "plucss.css" commune à nos sites, qui sera modifiée par "theme.css", personnalisant ainsi l'affichage du site en fonction des gouts du propriétaire :)
  • JoséJosé Member
    Merci beaucoup pour ces détails.

    la question est résolue

    José
Connectez-vous ou Inscrivez-vous pour répondre.