[Aide Codage] Coup de Pouce Nouveau thème :)

Hello !
J'ouvre donc une nouvelle demande d'aide pour Ladie's Coffee
Juste je prévient tout de suite, je serai absente de Mercredi soir à Dimanche soir, mais je suis la aujourd'hui, demain et je reviens après

Alors, j'ai donc plusieurs soucis à régler :
1 - Je voudrais que mon header ne disparaisse pas quand on scroll la page
2 - Je voudrais que ma barre de nav apparaissent des le début et reste fixe en haut du forum
3 - je voudrais mettre les sous forum les un sous les autres avec le petit icône fichier sur la ligne correspondante et pas sur une ligne a part entière

C'est tout...pour le moment... ( c'est déjà pas mal !^^)

Zioup, je remets le lien du forum de test (sous hide)


On va donc commencer par ça :

1 - Je voudrais que mon header ne disparaisse pas quand on scroll la page

On va ajouter ceci dans la CSS :

Code:

#headerbar-top.is-sticky {
    background: transparent;
    position: relative;
    box-shadow: none;   
}

.headerbar-top > .wrap:first-child{
    padding-top: 27px;
}

.is-sticky #logo {
    display: block;
    height: auto;
    width: auto;
    opacity: 1;
    transform: inherit;
}



Ensuite, pour ceci :

2 - Je voudrais que ma barre de nav apparaissent des le début et reste fixe en haut du forum

Dans la CSS, on va ajouter ceci :

Code:

ul.navbar.navlinks {
    position: fixed;
    top: 42px;
    left: 0;
    width: 100%;
    background-color: #EDD293;
    font-variant: small-caps;
    visibility: visible;
}

ul.navbar.navlinks li {
    margin-top: 0;
}

On essaie déjà tout ça ?

Oups ! Effectivement, avec le lien c'est mieux ^^

Pour le header il ne disparait plus ! mais il se décale quand même... capricieux celui la !

Pour la barre de Nav'  c'est bon !!

On va essayer d'ajouter ça dans la CSS

Code:

.is-sticky#headerbar-top.w-toolbar {
    top: 0;
}

Super ça marche !!

Super ^^

Du coup, il nous reste ce souci :

3 - je voudrais mettre les sous forum les un sous les autres avec le petit icône fichier sur la ligne correspondante et pas sur une ligne a part entière

Est-ce que tu as jeté un oeil à ce tuto ? Je pense qu'il peut répondre à ton besoin

Alors, en fait mes catégories viennent du LS de Mäven : https://tambouille-raleuses.forumactif.com/t163-toutes-versions-categories-simples-avec-liens-de-sous-forums-en-colonne

Du coup, ça fonctionne pareil ?
Je reprend la parti :

Code:

<div class="sous_forums">
    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
  </div>

J'ajoute

Code:

<span data-elt="sousForums"> ...</span>

et le JS, ça ne va pas faire "d'interférence" entre les 2 méthodes ^^ ?

Ok je vois

on va garder le LS de Mäven comme ça, mais on va l'adapter un peu

Dans le template "index_box", on va rassembler ça :

Code:

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}

dans une balise :

Code:

<span>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>

ensuite, dans la CSS, on va remplacer ça

Code:

.sous_forums a {
    display: block;
    font-size: 11px;
}

par ça

Code:

.sous_forums a {
    display: inline-block;
    font-size: 11px;
}

et ça

Code:

.sous_forums a::before {
    content: " ※ ";
    font-size: 11px;
}

par ça

Code:

.sous_forums > span::before {
    content: " ※ ";
    font-size: 11px;
}

Ici, on va indiquer que la taille de la typo est à 0 (pour cacher la virgule)

Code:

.sous_forums {
    border-right: 4px double #6B390D;
    font-variant: small-caps;
    text-align: left;
    width: 20%;
    font-size: 0;
}

Enfin, on va ajouter ceci

Code:

.sous_forums > span {
    display: block;
    font-size: 11px;
}

Je te laisse tester ?

Hello !
Les sous forum se mettent cote à cote du coup (http://testladiescoffee.kanak.fr/) ^^'

Bon, on va etre obligé d'utiliser du js :/

Du coup, on va ajouter ce js qu'on va appeler sur toutes les pages du forum

Code:

$(document).ready( function(){

    // On parcourt chaque groupe de sous-forum
    $('.sous_forums').each( function(){
        // On stocke dans une variable l'élement actuellement parcouru
        var $this = $(this);
   
        // Pour chacun d'eux, on remplace les ',' par des retours à la ligne
        $this.html(
            $this.html().replace(/, /g,'<br /> ')
        )
    });
   
    // On parcourt chaque lien ayant pour class "gensmall"
    $('a.gensmall').each( function(){
        // On regarde si ce lien a un "title" et on stocke cette info dans une variable
        var texte = $(this).attr('title');
       
        // Si texte existe
        if(texte){
            // On remplace nos balises disgracieuses par des espaces et on sauvegarde tout ça dans la variable texte
            texte = texte.replace(/\<\/a\>/gi, '').replace(/\<br \/\>/gi, '').replace(/\<br >/gi, '');
           
            // On met ensuite l'attribut "title" à jour avec le contenu de la variable "texte"
              $(this).attr('title', texte); 
        }       
    }); 
   
});

et dans le template, on peut remettre ça :

Code:

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}

à la place de ça :

Code:

<span>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>

et dans la CSS, on va remplacer ça :

Code:

.sous_forums > span::before {
    content: " ※ ";
    font-size: 11px;
}

par ça

Code:

.sous_forums > a::before {
    content: " ※ ";
    font-size: 11px;
}
.sous_forums > a + a::before {
    display: none;
}


Coucou !!
J'espere que tu as passé un bon week end

Super ça fonctionne !! Mais il y a quand même un décalage entre la petite image du dernier message (qui est maintenant un petite étoile ^^) et le nom du sous forum, comment ça se fait ? tu crois qu'on peut tout aligner ?


J'ai aussi un autre petit soucis que je n'arrive pas a régler
Je n'arrive pas a virer le changement de couleur au passage de la souri sur le qeel ...

Et autre question pour ne pas oublier ^^
Saurais tu ou aller pour changer la couleur des "barres" dans les widgets (de meilleurs posteurs et "ceux qui commencent le plus de sujets") ? J'ai fouillé, mais je ne trouve pas ^^

Coucou



ici :

Code:

.sous_forums a {
    display: inline-block;
    font-size: 14px;
}

on va ajouter le vertical align :

Code:

.sous_forums a {
    display: inline-block;
    font-size: 14px;
    vertical-align: middle;
}

ça devrait régler ton souci avec les liens et les étoiles

-----

Pour la couleur du qeel au hover, essaie ça :

Code:

.qeel table.forumline tr:hover td {
    background-color: #F0E9D7;
}

-----

Pour les couleurs des barres, c'est de la CSS

Code:

.mod-top-row .mod-top-pct{
    background: red;
}

Je te laisse remplacer le "red" par la couleur de ton choix

Encore une fois, trop efficace Miettes, tu gères !!
Merci beaucoup ! je ne vois plus de question la tout de suite
Je vais attendre un peu les avis de chacun dans le brainstorming et puis je pense que je pourrais tout passer sur mon forum officiel, en espérant ne pas avoir trop de bug au passage de l'un à l'autre !!
(Pour les badges, l'idée est toujours d'actu mais j'attend que Linoa la graphiste, revienne de vac sur Art of the fruits )

ça marche

On peut classer du coup ?

Coucou ! oui c'est bon tu peux classer !
Encore merci !!

Hello

Super ! Du coup, direction les archives ^^