Fork me on GitHub

Rapport de message :*
 

Re: Modifier l'apparence de mon site

Titre du sujet : Re: Modifier l'apparence de mon site
par alain01 sur 08/05/2020 11:52:42

Ok, alors,
plusieurs remarques !
Tout d'abord,
ton investissement en apprentissage de Boostrap 4 est un très bon investissement !
Si tu maîtrises les surcharges, tu vas pouvoir relooker les templates des modules à ta convenance, et ça, c'est cool !

Ensuite, pour ton slidojumb,

plusieurs questions :

<div class="col-5">
            <{if 
$xoops_page == "index"}>
                <{include 
file="$theme_name/tpl/jumbotron.tpl"}>
            <{/if}>
Si tu n'es pas sur la page d'index, que veux tu afficher ?
Si tu ne met pas un
<{else}>
tu vas te retrouver avec une largeur de colonne imposée de 5/12 vide en dehors de la page d’accueil !!!

Ensuite, je comprends ton soucis de hauteur.
En fait, il faut raisonner en conteneur ("div").
Ici tu as un conteneur principal qui utilise la classe "slidojumb" qui contient 2 conteneurs :
- div col (qui a pour largeur la largeur du conteneur père - ce que prends le conteneur suivant (col-5)
- div col-5

Remarque :
sans tester, je pense que tu peux fusionner 2 conteneurs ici :
<div class="slidojumb">
        <
div class=row>
pourrait devenir :
<div class="row slidojumb">
évidemment avec le bon nombre de fermeture de div.

Je pense que ton soucis (raisonne en conteneur), est que soit ton image n'est pas assez haute soit réduit le texte dans ton jumbotron.

Pour mieux comprendre ce qui se passe, je t'invite à commenter la partie slider pour la remplacer par une seule image responsive en ayant en tête 1 chose :
Citation :
Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
it scales with the parent element = la dimension de l'image se cale par rapport au son parent (son conteneur).

Astuce que j'utilise :
pour bien voir la taille des conteneurs, en mode dev design jajoute parfois une classe à un conteneur:

Exemple ici :
<div class="col">
devient pour la phase de dev
<div class="col bg-info">


Allez, bon courage !
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

94 Personne(s) en ligne (75 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 94 | Plus ...