Modif css
Pascal Coulougnon
Pascal Coulougnon

Modif css

Pascal Coulougnon 278
29/06 17:08
#1
Pascal Coulougnon 278
29/06 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
Alain T

Re : Modif css

Alain T 360
29/06 17:23
#2
Alain T 360
29/06 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-shadow1px 1px 2px red0 0 1em blue0 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 Coulougnon
Pascal Coulougnon

Re : Modif css

Pascal Coulougnon 278
29/06 20:33
#3
Pascal Coulougnon 278
29/06 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
        
<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>
        <
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
Nicolas

Re : Modif css

Nicolas 59
29/06 22:25
#4
Nicolas 59
29/06 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 {
    
positionabsolute;
    
bottom35px;
    
right0;
    
left0;
    
z-index10;
    
padding-top20px;
    
padding-bottom20px;
    
color#fff;
    
text-aligncenter;
    
background-color#444444a6;
    
width100%;

}
.
carousel-item {
    
positionrelative;
    
displaynone;
    
floatleft;
    
width100%;
    
margin-right: -100%;
    -
webkit-backface-visibilityhidden;
    
backface-visibilityhidden;
    
transition: -webkit-transform 0.6s ease-in-out;
    
transitiontransform 0.6s ease-in-out;
    
transitiontransform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
    
height500px;
    
min-width800px;
  }


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 Coulougnon
Pascal Coulougnon

Re : Modif css

Pascal Coulougnon 278
30/06 08:14
#5
Pascal Coulougnon 278
30/06 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
Nicolas

Re : Modif css

Nicolas 59
30/06 09:00
#6
Nicolas 59
30/06 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-shadow0.1em 0.1em 0.2em black


Le module est dispo en test ici : Démo
Re : Modif css
Alain T
Alain T

Re : Modif css

Alain T 360
30/06 09:13
#7
Alain T 360
30/06 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 Coulougnon
Pascal Coulougnon

Re : Modif css

Pascal Coulougnon 278
30/06 10:53
#8
Pascal Coulougnon 278
30/06 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 Coulougnon
Pascal Coulougnon

Re : Modif css

Pascal Coulougnon 278
30/06 15:34
#9
Pascal Coulougnon 278
30/06 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
Nicolas

Re : Modif css

Nicolas 59
30/06 22:11
#10
Nicolas 59
30/06 22:11
Salut,

Tu as le point qui manque dans ton fichier CSS my_css.css
mon-slidetext{
    
text-shadow5px 5px 13px #000000;
    
color#FFFFFF;
    
font-size50px;
}

Ca devrait être mieux comme ceci :
.mon-slidetext{
    
text-shadow5px 5px 13px #000000;
    
color#FFFFFF;
    
font-size50px;
}
Nicolas (ForMuss)