Modification d'un thème wordpress

Bonjour à tous,

Je dois modifier un thème wordpress , afin de voir quelle class ou quelle div je dois modifier j'utilise donc l'inspecteur , jusque là tout va bien je trouve l'élément à modifier et la je vois que certaine propriété ne son pas dans le fichier CSS à part.

Catastrophe

Bon du coup je cherche un peu dans les fichier du thème mais au bout d'une heure toujours pas trouver.

Avez vous une solution pour que je puisse trouver quelle fichier charge quel élément de la page grâce à l'inspecteur de Firefox ?

Bonjour,
dans le pannel d'administraton, tu vas dans l’éditeur et en bas tu as le fichier style.css
Modifié par JENCAL (07 Jun 2018 - 12:02)

C'est ça le souci , ce que je veux modifier n'est pas dans le css

bin.. tu veux "rajouter" du css ç'est ça ??

Fin en gros j'ai une div beaucoup trop haute, je veux la réduire mais le CSS qui gère ça est dans cette même balise donc je voudrais changer dans la balise mais impossible de trouver
Modifié par Tryno (07 Jun 2018 - 13:25)

Si la régle CSS est dans la balise dans un attribut style, tu n'as pas d'autre choix que d'aller la modifier avec du javascript.
style a la plus haute priorité en CSS
Fais voir à quoi ressemble la balise si tu peux
Modifié par bazooka07 (07 Jun 2018 - 13:43)

OK donc plus qu'a chercher parmi les innombrables fichier JS



J'ai juste cacher l'ip , enfin une partie
Modifié par Tryno (07 Jun 2018 - 13:49)

Ou alors avec un !important cela fonctionne et tu te fais moins chié :

https://codepen.io/JUSEN/pen/oyzPNV
Modifié par JENCAL (07 Jun 2018 - 13:51)

Pas forcément.
En Javascript, le dernier a toujours raison.
Tu rédiges le code Javascript qui fait le taff et tu le mets juste avant la balise fermante </body>

D'ailleurs il n'est pas dit que que ce soit un de ces nombreux fichiers js qui mette le bazar.
Dans ton navigateur tapes sur Ctrl-U pour afficher le source de la page HTML. Si tu retrouves le fautif, c'est le gars qui a pondu le template HTML qui a faux. Si tu ne vois pas le fautif, c'est bien un script JS et c'est plus compliqué à retrouver et si le script vient d'un CDN, tu ne pourras pas le modifier.
Modifié par bazooka07 (07 Jun 2018 - 13:52)

OK bon je vais essayer le !important

Et si ça marche pas je vais essayer le script

J'avais essayer de désactiver le JS pour isolé certain truc mais en fait vaux mieux pas ça affiche plus rien après
Modifié par Tryno (07 Jun 2018 - 13:54)

Le !important c'est mort mais merci quand même ^^

T'aurais pas une loupe de trop par hasard ?

Contrairement à ce que je pensais, il n'y a pas d'attribut style dans les balises.

Normalement dans l'inspecteur tu dois pouvoir retrouver la règle CSS à modifier.

Parfois la règle ne vient pas du parent, mais de l'aieul au dessus, voire d'un ancêtre
Quand tu places ta souris sur <img> il faut regarder toutes les règles qui s'appliquent même celles qui sont plus bas que l'écran

Tu veux faire quoi exactement ?

Tu peux jouer aussi sur la priorité des règles css sans avoir recours à !important
http://jeremie.patonnier.net/post/2009/08/18/La-preseance-des-selecteurs-CSS

bazooka07 a écrit :

Tu veux faire quoi exactement ?

oué j'ai pas très compris moi non plus ^^

bon je vais recommencer mon explication , je vais l'accompagner de screen ça va peut-être aider

J'ai installer un thème Wordpress (Suffice)

Cependant la grande div avec le background bleu est bien trop grosse pour le site donc j'aimerais réduire au moins sa hauteur

J'ai trouver le code qui gère donc cette div

		<div id="heading">
		<div id="wp-custom-header" class="wp-custom-header"><img src="http----------------------------------wp-content/uploads/2018/06/cropped-CYFFLE-1.jpg" width="1920" height="1079" alt="Lycée Cyfflé" srcset="http------------------------------------------------wp-content/uploads/2018/06/cropped-CYFFLE-1.jpg 1920w,  http:-------------------------------------------------wp-content/uploads/2018/06/cropped-CYFFLE-1-300x169.jpg  300w,  http:-------------------------------------------------wp-content/uploads/2018/06/cropped-CYFFLE-1-768x432.jpg  768w, http----------------------------------------wp-content/uploads/2018/06/cropped-CYFFLE-1-1024x575.jpg 1024w,  http:-----------------------------------------------------/wp-content/uploads/2018/06/cropped-CYFFLE-1-750x420.jpg  750w" sizes="(max-width: 1920px) 100vw, 1920px" /></div>	</div>

Cependant je cherchais au départ comment trouver lequel fichier à générer ce code html afin de le modifier donc je voulais savoir si on pouvait via l'inspecteur trouver le fichier source du code sélectionné
Modifié par Tryno (07 Jun 2018 - 14:25)

Pour la hauteur défini par l'image , j'ai essayé, c'est non cela zoom a mort mais pas de changer de hauteur.
Le style.css ne contient pas de #wp-custom-header ou autre class qui suivent

Première possibilité: Fait mais aucun dossier sous ce nom ou même un dérivé ne s'y trouve.

Deuxième possibilité: Faut que je trouve du coup
Modifié par Tryno (07 Jun 2018 - 14:33)

Woops je penser moi même je pensais que c'étais un header xD
Je vais rediriger ma recherche alors

		/*===================================
		=            Sliders            =
		===================================*/
		if ( typeof Swiper !== 'undefined' ) {
			/*----------  Main Slider  ----------*/
			$( document.body ).on( 'suffice_main_slider', function(){
				var sliderClass = '.slider .swiper-container';
				
				new Swiper( sliderClass, {
					slidesPerView: 1,
					nextButton: '.swiper-button-next',
					prevButton: '.swiper-button-prev',
					pagination: '.swiper-pagination',
					paginationClickable: true,
					autoplay: 4000,
					speed: 1000,
					autoHeight: true,
					
					onInit: function(){
						$( sliderClass ).css({
							'visibility': 'visible'
						});
					}
				});
				
				new Swiper( '.blog-post-container .swiper-container', {
					nextButton: '.post-carousel-controls .next',
					prevButton: '.post-carousel-controls .prev'
				});
				
			});

Après avoir fouiller encore les méandre insondable du thème j'ai trouver ce code , je pense que c'est ça

Si je reprends la démo proposée par Woolsale, il y a un bien un attribut style qui est généré par du javascript.
Rechercher
<div class="swiper-wrapper" style="height: 497px; transform: translate3d(-1363px, 0px, 0px); transition-duration: 1000ms;">
Très certainement les 497px sont calculés par rapport aux images que tu fournis
Dans la balise <img :> vire le height=".." pour commencer

Alors j'ai bien trouver un swiper.jquery.js

J'ai un AutoHeight: auto
Et un setWrapperSize: false

Au tout début du fichier

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

Modifié par Tryno (07 Jun 2018 - 15:06)