Modif css [xswatch4 & xswatch4enabled] - Mon XOOPS (https://www.monxoops.fr)

S'inscrire

Modif css

Pascal C. 431
29/06/2021 17:08

#1

Pascal C. 431
29/06/2021 17:08

Salut salut....

Je tenter de mettre mes doigts dans le theme mais j'ai vraiment du mal a comprendre la structure des themes bootstrap.

J'aurai besoin d'ombrer mon texte dans le slider.tpl afin de le rendre lisible.

Je voulais modifier la variable en créant une en lui ajoutant un petit text-shadow..

Mais modifier le fichier mincss s'avère être une vrai aventure, il est tout en bazar et je m'y paume...

Du coup, j'ai abandonné cette option et je pensais simplement forcer directement les valeurs de la ligne de texte dans le fichier slider.tpl, ce qui semble plus simple.

J'ai donc modifié :

Citation :

<h1>37 ans d'expérience </h1>

par
Citation :

<h1><FONT color="#FFFFFF" ; text-shadow: black 0.1em 0.1em 0.2em >mon texte</FONT></h1>

Et si mon texte passe bien en blanc... pas d'ombrage.
et je ne trouve pas mon erreur. Vous voyez où j'ai pu merder du coup?

Sinon, la vrai règle à adopter ne serait-elle pas que je crée une dans my_css.css ?

Re : Modif css

Alain T 608
29/06/2021 17:23

#2

Alain T 608
29/06/2021 17:23

Ton explication n'est pas très claire mais j'ai globalement compris ta demande...

Dans la doc fournit, tu peux lire :
Citation :

# Personnalisation et surcharge des définitions Bootstrap
Ajoutez vos propres définitions CSS et surchargez celle de Boostrap
Utilisez à la racine du thème, sous /css le fichier my_css.css

Ne il faut que tu surcharges ici et pas ailleurs.
Surtout, ne JAMAIS toucher au fichier bootstrap.min.css, JAMAIS !

C'est "slidetext" qui transforme l'aspect du texte.
Tu peux soit surcharger, mais je pense que ce n'est pas conseiller,
le mieux est de créé une définition supplémentaire, du genre :


.mon-slidetext{

text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;

}

Ensuite, tu changes dans le slider.tpl la ligne :


<h2 class="slidetext"><{$xoops_sitename}></h2>

par


<h2 class="mon-slidetext"><{$xoops_sitename}></h2>

Evidemment, pense à supprimer le cache de ton navigateur, sans quoi il ne relira pas par défaut ton fichier css modifié.

Suis-je assez clair par rapport à ta demande ?

Re : Modif css

Pascal C. 431
29/06/2021 20:33

#3

Pascal C. 431
29/06/2021 20:33

Merci Alain...
Oui, tu sembles bien avoir cerné mon soucis. Et effectivement je n'ai pas été clair et mon texte est plein de fautes qui plus est. Je m'en excuse.

Je regarde mieux demain au calme et te fais un retour. Mais je ne suis pas certain d'avoir bien compris

Lorsque tu parles de slider.txt, ne veux tu pas dire slider.tpl
Si oui, je n'ai pas de ligne Citation :

<h2 class="slidetext"><{$xoops_sitename}></h2>

et ne trouve nulle part une référence "slidetext"

Voici mon slider.tpl


<{if $xoops_page == "index"}>

    <!-- remove "vert" class for standard horizontal scroll -->

    <div id="sliderCarousel" class="carousel slide carousel-fade" data-ride="carousel">

        <ol class="carousel-indicators">

            <li data-target="#sliderCarousel" data-slide-to="0" class="active"></li>

            <li data-target="#sliderCarousel" data-slide-to="1"></li>

        </ol>

        <div class="carousel-inner">

            <div class="carousel-item active">

                <img class="d-block w-100" src="<{$xoops_imageurl}>images/slides/slider1.jpg" alt="First slide"><br>

<div class="carousel-caption hidden-xs">

                <h1>[b]mon_titre_1[/b]</FONT></h1>



                <p>[b]mon_accroche_1[/b]</p>



                <p><a href="http://www.mapage.com" class="btn btn-large btn-primary"><{$smarty.const.THEME_READMORE}></a></p>

            </div>

            </div>

            <div class="carousel-item">

                <img class="d-block w-100" src="<{$xoops_imageurl}>images/slides/slider2.jpg" alt="Second slide"><br>

<div class="carousel-caption hidden-xs">

                <h1>[b]mon_titre_2[/b]</h1>



                <p>[b]mon_accroche_2[/b]</p>



                <p><a href="http://www.mapage.com/" class="btn btn-large btn-primary"><{$smarty.const.THEME_READMORE}></a></p>

            </div>



            </div>



        </div>

        <{* horizontal controls

        <a class="carousel-control-prev" href="#sliderCarousel" role="button" data-slide="prev">

            <span class="carousel-control-prev-icon" aria-hidden="true"></span>

            <span class="sr-only"<{$smarty.const.THEME_CONTROL_PREVIOUS}>/span>

        </a>

        <a class="carousel-control-next" href="#sliderCarousel" role="button" data-slide="next">

            <span class="carousel-control-next-icon" aria-hidden="true"></span>

            <span class="sr-only"<{$smarty.const.THEME_CONTROL_NEXT}>/span>

        </a>

        *}>

    </div>

<{/if}>

Je voudrais en fait ombrer les textes en gras dans le "quote" ci-dessus.
Soit "mon_titre_1" & "mon_accroche_1"

Re : Modif css

Nicolas 65
29/06/2021 22:25

#4

Nicolas 65
29/06/2021 22:25

Salut,

Je vais bientôt proposer un module pour gérer les slides, voir sujet dans "Développement de modules" qui va être fait prochainement.

Je te conseille de tester ceci dans le style principale de ton thème :


.carousel-caption {

    position: absolute;

    bottom: 35px;

    right: 0;

    left: 0;

    z-index: 10;

    padding-top: 20px;

    padding-bottom: 20px;

    color: #fff;

    text-align: center;

    background-color: #444444a6;

    width: 100%;



}

.carousel-item {

    position: relative;

    display: none;

    float: left;

    width: 100%;

    margin-right: -100%;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    transition: -webkit-transform 0.6s ease-in-out;

    transition: transform 0.6s ease-in-out;

    transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;

    height: 500px;

    min-width: 800px;

  }

Cela va ajouter un bandeau gris qui permet de voir le texte.

Petite démo sur ce site de développement : Démo

Nicolas

Re : Modif css

Pascal C. 431
30/06/2021 08:14

#5

Pascal C. 431
30/06/2021 08:14

Merci pour ton aide Nicolas, j'ai hâte de tester ton module.

Le bandeau est une très bonne idée, mais j'aimerais mieux pouvoir ombrer mon texte dans ma situation.

Mais je ferais tout de même un essai pour voir ce que ça peut donner, et me rabattrait probablement sur cette solution si je ne parviens pas à ombrer mon texte.

Re : Modif css

Nicolas 65
30/06/2021 09:00

#6

Nicolas 65
30/06/2021 09:00

Salut,

Avec ces deux classes CSS tu peux facilement ajouter une modification sur le texte.
Dans .carousel-caption tu peux essayer de rajouter ceci :


text-shadow: 0.1em 0.1em 0.2em black

Le module est dispo en test ici : Démo

Re : Modif css

Alain T 608
30/06/2021 09:13

#7

Alain T 608
30/06/2021 09:13

Citation :

Pascal Coulougnon a écrit :
Lorsque tu parles de slider.txt, ne veux tu pas dire slider.tpl
Si oui, je n'ai pas de ligne Citation :
<h2 class="slidetext"><{$xoops_sitename}></h2>
et ne trouve nulle part une référence "slidetext"

Oui, c'est bien slider.tpl, désolé. J'ai corrigé.

Pour le reste, je me suis basé sur ce que je vois ici :
https://github.com/XOOPS/XoopsCore25/b ... s/xswatch4/tpl/slider.tpl

Re : Modif css

Pascal C. 431
30/06/2021 10:53

#8

Pascal C. 431
30/06/2021 10:53

Merci à vous 2, je regarde tout ça.

J'irais aussi voir ton module lorsque je me serais dépègué de mon ombrage Nicolas

Re : Modif css

Pascal C. 431
30/06/2021 15:34

#9

Pascal C. 431
30/06/2021 15:34

Alain, je pense avoir appliqué strictement ce que tu décris. Je suis même allé chercher le slider.tpl de ton lien pour être certain de partir sur une bonne base (j'ai simplement changer les transitions en fader).
Mais la modif ne semble pas prise en compte.

Par défaut, le texte est déjà ombré (mais pas assez pour moi).
J'ai effectué la modif dans css/my_css.css

Puis également modifié la ligne dans slider.tpl

et là, je perds les ombrages et la couleur de texte passe en bleu... Il semblerait que ma commande ne fasse pas appel au fichier css/my_css.css

Visible ici : http://xoopstest.lumieresdefrance.com/
- La première image (ou je n'ai rien modifié) est OK
- la seconde avec les modifs semble perdre toutes les valeurs.

J'ai pourtant bien vidé mes caches navigateur & xoops. Je ne comprends pas, et pourtant je suis là dessus depuis ce matin.

Citation :

Alain T a écrit :

Oui, c'est bien slider.tpl, désolé. J'ai corrigé.

Pour le reste, je me suis basé sur ce que je vois ici :
https://github.com/XOOPS/XoopsCore25/b ... s/xswatch4/tpl/slider.tpl

Re : Modif css

Nicolas 65
30/06/2021 22:11

#10

Nicolas 65
30/06/2021 22:11

Salut,

Tu as le point qui manque dans ton fichier CSS my_css.css


mon-slidetext{

    text-shadow: 5px 5px 13px #000000;

    color: #FFFFFF;

    font-size: 50px;

}

Ca devrait être mieux comme ceci :


.mon-slidetext{

    text-shadow: 5px 5px 13px #000000;

    color: #FFFFFF;

    font-size: 50px;

}

Nicolas (ForMuss)

Modif css

Modif css

Re : Modif css

Re : Modif css

Re : Modif css

Re : Modif css

Re : Modif css

Re : Modif css

Re : Modif css

Re : Modif css

Re : Modif css

Re : Modif css

Re : Modif css

Re : Modif css

Re : Modif css

Re : Modif css

Re : Modif css

Re : Modif css

Re : Modif css

Re : Modif css

Discussions récentes

Commentaires récents