Comment modifier la taille des titres et contenu de es modules [Réglé]
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
Reprise du message précédent
Pour la transparence, Xela ta fourni la ligne et le fichier <a href="/forum/topic-17155-1+mettre-module-articles-et-pages-transparent.php#m161315">https://www.phpboost.com/forum/topic-17155-1+mettre-module-articles-et-pages-transparent.php#m161315</a>Aurélien Reffay Membre non connecté
Booster Roquette
- Booster Roquette
- Voir le profil du membre Aurélien Reffay
- Inscrit le : 31/10/2016
- Site internet
- Groupes :
Oui Cela m'a indiqué la ligne de code mais comme je l'ai indiqué plus haut, avec cette ligne de code, cela rend transparent tout les modules (Articles, pages, modules gauche et droite). Moi c'est juste le module articles et pages que je veux rendre transparent comme sur mon site "<a href="http://www.s-os-hightech.fr">s-os-hightech.f</a>r".
Cordialement.
Jarjar37
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
- faire plus de modification pour faire porter la couleurs sur une classe que le "global".
- faire une surcharge dans le CSS des modules (mettre la ligne de code dans les fichiers articles.css et pages.css).
Aurélien Reffay Membre non connecté
Booster Roquette
- Booster Roquette
- Voir le profil du membre Aurélien Reffay
- Inscrit le : 31/10/2016
- Site internet
- Groupes :
Je choisi la deuxième possibilités et j'ai déjà fait la manipulation et voyant que cela ne marchait pas j'ai posé la question sur le forum.
Voici ce ce j'ai entré :
#module-articles hr {
margin-top: 10px;
}
.pages-pagination {
float: right;
width: 33%;
margin-bottom: 10px;
}
.article-articles.article-several h2,
.article-articles.article-several .more {
margin: 0;
}
.article-articles.article-several .content {
padding: 0 0.5em 0 0.5em;
}
.article-articles.article-several img {
padding: 0 0 0.5em 0;
}
span.contents + hr {
margin: 35px 0 20px 0;
clear: both;
background: transprent;
}
.form-field-action-link ul {
margin: 0;
list-style-type: none;
}
.form-field-action-link i {
font-size: 2.3rem;
}
.fa-pagebreak:before { content: "\f0f6"; }
J'ai même mis le code en bas du fichier mais rien à faire que ce soit dans articles.css et pages.css.
Cordialement.
Jarjar37
Mipel Membre non connecté
- Administrateur
- Voir le profil du membre Mipel
- Inscrit le : 04/04/2016
- Site internet
- Groupes :
- Equipe Rédaction
- Equipe Modération
Citation :
span.contents + hr {
margin: 35px 0 20px 0;
clear: both;
background: transprent;
}
margin: 35px 0 20px 0;
clear: both;
background: transprent;
}
Tu as écris background: transprent; ? il faut écrire transparent, il manque le second a
Merci de penser à joindre le rapport système de votre site, il peut nous aider à mieux répondre à vos questions.
Aurélien Reffay Membre non connecté
Booster Roquette
- Booster Roquette
- Voir le profil du membre Aurélien Reffay
- Inscrit le : 31/10/2016
- Site internet
- Groupes :
Merci Mipel, j'avais pas vu le "a" manquant, j'ai corrigé l'erreur mais cela n'a toujours aucun effet.
Cordialement.
Édité par Aurélien Reffay Le 16/03/2018 à 18h58
Jarjar37
Mipel Membre non connecté
- Administrateur
- Voir le profil du membre Mipel
- Inscrit le : 04/04/2016
- Site internet
- Groupes :
- Equipe Rédaction
- Equipe Modération
Citation :
Merci Mlle
Heu là non, c'est raté. je suis un monsieur, et depuis 60 ans passés !
Merci de penser à joindre le rapport système de votre site, il peut nous aider à mieux répondre à vos questions.
Aurélien Reffay Membre non connecté
Booster Roquette
- Booster Roquette
- Voir le profil du membre Aurélien Reffay
- Inscrit le : 31/10/2016
- Site internet
- Groupes :
Désolé c'est le correcteur orthographique qui à mis Mlle !
Cordialement.
Jarjar37
Mipel Membre non connecté
- Administrateur
- Voir le profil du membre Mipel
- Inscrit le : 04/04/2016
- Site internet
- Groupes :
- Equipe Rédaction
- Equipe Modération
de plus la propriété du css n'est pas "backgound: transparent" mais bien background-color: transparent;
il manque le -color
Merci de penser à joindre le rapport système de votre site, il peut nous aider à mieux répondre à vos questions.
Aurélien Reffay Membre non connecté
Booster Roquette
- Booster Roquette
- Voir le profil du membre Aurélien Reffay
- Inscrit le : 31/10/2016
- Site internet
- Groupes :
Je viens de faire la modification et cela malheureusement ne change rien.
Cordialement.
Jarjar37
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
background: transparent;sur cette classe au lieu de la classe que l'on t'a indiqué...
là, tu ajoute un background sur le trait qui sépare le content. donc aucun effet sur le conteneur et c'est bien normal.
c'est la classe
.globalqui porte le background.
xela Membre non connecté
- Modérateur
- Voir le profil du membre xela
- Inscrit le : 26/12/2015
- Groupes :
- Equipe Rédaction
alors j'ai fait un peu le tour sur vos 2 sites, résultat :
- problème sur le template body ou tpl frame
soshightech :
Code HTML :
"‡" n'a rien a faire là.
ilogic :
Code HTML :
"
_" le saut de ligne et l'underscore n'ont aucune raison d’être là.
Du coup, vous avez dû ajouter dans body :
Code CSS :
body { position: relative; height: auto; min-height: 100%; background: url(images/arriereplantabledemixagepoursiteweb.jpg); background-color: rgba(0, 0, 0, 0); font-size: 1.3em; font-family: 'Open Sans', sans-serif; }
et idem dans le header :
Code CSS :
#header { background: url(images/arriereplantabledemixagepoursiteweb.jpg); margin: auto;
Tout ça pour palier ce pb de caractères en trop vu précédement.
et à tout ça, il y dans le code css :
Code CSS :
#header, #global { background-color: #FAFAFA; }
Résultat final : rien ne marche quand vous tentez des modifications sur articles.css par exemple.
Autre pb : votre menu avec Accueil est mal placé.
Début de solution :
1. On enlève les caractères qui servent à rien dans le body.tpl ou le frame.tpl (je ne sais pas ce que vous avez modifié)
2. Replacer votre menu Accueil plus bas ou déplacer le compteur de visite.
3. Enlever "background: url(images/arriereplantabledemixagepoursiteweb.jpg);" de body dans design.css L15
4. Enlever "border-color: #E1E1E1;" de "#top-header, #global" dans design.css L64
5. Modifier design.css L78 :
Code CSS :
#header { background: url(images/arriereplantabledemixagepoursiteweb.jpg); background-repeat: round; margin: auto; }
On obtient :
Maintenant, vous souhaitiez appliquer une transparence uniquement sur 2 modules ce qui sous entend que, pour tout ce qui entoure ces modules , vous ne voulez aucun background (ou celui qui est déja actif en #global) ? Car sur le site soshightech le background url(image) est appliqué sur tous les éléments du site.
Donc je vais vous faire une proposition sans vraiment savoir ce que vous voulez réellement (exemple sur le module articles) :
1. Modification de articles.css L43 :
Code CSS :
#module-articles { font-size: 15px; background: url(/templates/base/theme/images/arriereplantabledemixagepoursiteweb.jpg); background-repeat: repeat; background-repeat: round; color: white; }
2. On va modifier la couleur globale en modifiant design.css L60 (exemple) :
Code CSS :
#header, #global { background-color: #333232; }
On obtient :
Voilà, je ne sais pas si cela répond à vos attentes mais je peux dire une chose : j'ai réalisé toutes les modification à l'aide de l'inspecteur de la console du navigateur (car je n'avais bien-sûr pas accès à vos fichiers).
Techniquement au niveau du code, qu'est ce qui m'a permis d'arriver à ce résultat ?
- La doc design de Phpboost est un bon support pour comprendre le fonctionnement et la structure des fichiers css.
- Les différents liens et conseils postés par les membres du forum ou l'équipe Phpboost.
- Quand des liens vers des tutos ou docs sur d'autres sites sont postés, ils sont à lire et à relire sans modération.
Grâce à ça, j'ai pu me servir de la propriété : "background-repeat: round;" pour améliorer l'affichage dans le header. Mais vous pouvez faire plein d'autres choses, à vous de trouver maintenant .
NB : Je suis pas graphiste donc j'espère ne pas avoir trop de "coquilles" dans ce post. En revanche, en tant que rédacteur, j'espère que mes explications sont assez claires .
Cordialement,
Xela.
Édité par xela Le 17/03/2018 à 23h23
Aurélien Reffay Membre non connecté
Booster Roquette
- Booster Roquette
- Voir le profil du membre Aurélien Reffay
- Inscrit le : 31/10/2016
- Site internet
- Groupes :
Les caractères indiqués dans body.tpl ou frame.tpl je ne vois pas comment ils sont arrivées là, sinon oui vous avez été très claire, j'ai tout compris à part une chose, pourquoi vous me dites que le menu avec Accueil (Si c'est un problème visuel étant malvoyant j'aimerais bien que l'on m'explique svp) car je ne vois pas où est le problème.
Merci de votre compréhension et merci à vous pour le temps passé sur ces modifications.
Cordialement.
Édité par Aurélien Reffay Le 17/03/2018 à 03h04
Jarjar37
xela Membre non connecté
- Modérateur
- Voir le profil du membre xela
- Inscrit le : 26/12/2015
- Groupes :
- Equipe Rédaction
actuellement l'affichage du background url(image) du header est "coupé" par votre menu Accueil ou laffichage du compteur de visites est mal placé; ce n'est pas très esthétique :
Cordialement,
Xela.
Aurélien Reffay Membre non connecté
Booster Roquette
- Booster Roquette
- Voir le profil du membre Aurélien Reffay
- Inscrit le : 31/10/2016
- Site internet
- Groupes :
C'est bon les modifications ont étés apportées.
Encore une fois merci à vous.
Cordialement.
Édité par Aurélien Reffay Le 17/03/2018 à 13h28
Jarjar37
xela Membre non connecté
- Modérateur
- Voir le profil du membre xela
- Inscrit le : 26/12/2015
- Groupes :
- Equipe Rédaction
si cela vous convient, vous pouvez passer le sujet en réglé.
Cordialement,
Xela.
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie