5160 sujets

Le Bar du forum

Bonjour

Je veux modifier le design d'un site existant qui est basé sur Wordpress mais avec un thème Bootstrap et le problème c'est que le fichier Bootstrap.css est trop compliqué à modifier ! J'aimerais savoir si il y a un moyen de rapatrier le fichier de manière qu'il soit plus clair et lisible.

Merci
Salut,

En espérant que tu es sous Bootstrap 3, tu peux modifier "relativement" facilement les valeurs en passant par leur outils en ligne : http://getbootstrap.com/customize/... tu peux même décocher les élèments dont tu n'as pas besoin pour alléger le fichier... royal non ?! Smiley ravi
Dans ton cas, vu que tu utilises un thème pour wordpress, il n'est pas certain que l'outil de @Grotam fonctionne...
Si tu pouvais nous donner plus de précision ça serait bien Smiley smile
Vu que bootstrap est compilé à partir de fichier less tu peut les télécharger et ainsi tu pourras modifier facilement les variables et autres mixins.

Voici la documentations Less : http://lesscss.org/.
Et sinon tu peut tout simplement mettre ton bootstrap.css dans ton projet et en en plus rajouter un fichier style.css dans lequel tu mets les propriétés que tu aura modifiées et rajoutées.
Il te suffit juste d'appeler ton fichier css après bootstrap, pour qu'il ait le dernier mot.
Bonjour,

Grâce à l'outils Firebug (sous Firefox), ou juste en faisant un clic droit sur ce que tu souhaites modifier et Examiner l'élément (sous Firefox toujours), tu peux voir quel élément est utilisé dans le CSS. C'est toujours un début ! Tu vas pouvoir comprendre petit à petit comment fonctionne bootstrap...

Sinon la solution de @thej8 est bonne également.

Peace
bonjour !
je rempile sur ce sujet avec mes questions bêtes, et après quelques recherches sur le web...

Je suis en train de construire un site sur Wordpress 3.9 et j'ai pris un thème conçu avec/pour Bootstrap, Inkness pour ne pas le nommer. Du coup, pour personnaliser le design de mon thème, je me retrouve avec des fichiers CSS différents, et notamment bootstrap.min.css qui est tout simplement illisible (tout est en lignes continues), alors que bootstrap.css est ordonné comme n'importe quelle feuille de style CSS.
Quand j'utilise 'Examiner l'élément' de Firefox et que je regarde ce qui est 'Calculé', il arrive qu'un attribut (une grandeur de police p. ex.) soit présent en première ligne (actif) mais qu'apparemment d'autres sont également actifs via les CSS bootstrap (.min.css ou .cc) ... comment faire ? lequel changer ? et si je dois changer ça dans bootstrap.min.css, existe-t-il une manière simple d'afficher ce fichier avec l'ordonnancement habituel ? (je précise que j'édite mes fichiers avec Smultron).

Vous donniez également la solution de déclarer style.css en-dessous de Bootstrap <--- où exactement et de quelle manière (un exemple en toutes lettres me serait fort utile) ?

d'avance grand merci pour vos réponses.
Tita
Administrateur
Bonjour,

bootstrap.min.css est la version sans retours-chariot (et donc illisible) de bootstrap.css
L'un peut normalement© être remplacé par l'autre ou bien un outil comme (mots-clefs unminify CSS ou beatify CSS) a CSS decompressor online to un-minify my code?
Ce sera au moins lisible et les numéros de ligne seront utiles.

Quand toutes les instructions et règles sont sur 1 seule ligne et que bien entendu plusieurs ciblent le même élément, l'ordre de prise en compte est celui de la spécificité de leurs sélecteurs (un id a plus de poids qu'un élément dans un sélecteur CSS). "Examiner l'élément" dans Firefox (onglet Inspecteur puis à droite "Règles" et pas Calculé... qui est pratique pour d'autres choses) aussi bien que Firebug, DevTools et Inspecteur affichent les règles de la plus spécifique à la moins spécifique soit de haut en bas soit l'inverse. Et ce qui est hérité des éléments parents aussi, en partant d'html et body
Administrateur
TitaCrea a écrit :
Vous donniez également la solution de déclarer style.css en-dessous de Bootstrap &lt;--- où exactement et de quelle manière (un exemple en toutes lettres me serait fort utile) ?

On ne sait pas si ce thème WP utilise (comme il devrait) la fonction WP wp_enqueue_style() ou un appel aux CSS "en dur" dans le header de la page façon <link href="chemin/nom.css" (etc)> , difficile de dire comment modifier correctement l'appel aux fichiers CSS à moins de connaître ce thème
tout d'abord un grand merci pour vos réponses rapides !! Smiley cligne

je sens que je suis au bon endroit pour progresser et comprendre certains éléments qui restent flous.... moi être autodidacte et je procède beaucoup par essai-erreur, et parfois ... ben ça coince pour un détail !

et avec vos réponses, j'ai d'autres questions qui émergent, bien sûr Smiley lol

- keske DevTools ? j'ai fait une recherche Google et je trouve ça : "DevTools Tweaks extends the features of the built-in Firefox Devtools" > DevTools Tweaks est une extension Firefox, mais kesk'un 'built-in' ? (ah le jargon anglophone, pas simple pour nous pôvres francophones...)

- ne connaissant pas bien la structure WP (je suis totalement débutante autodidacte en PHP) et où est déclaré quoi, dans quel fichier du thème Inkness dois-je chercher pour voir si la déclaration CSS est en 'dur' ou pas ? j'ai ouvert le fichier functions.php du thème et effectué une recherche sur ww_enqueue_style. voici ce que j'ai trouvé :

function inkness_scripts() {
	wp_enqueue_style( 'inkness-fonts', '//fonts.googleapis.com/css?family=Open+Sans:300,400,700,600' );
	wp_enqueue_style( 'inkness-basic-style', get_stylesheet_uri() );
	if ( (function_exists( 'of_get_option' )) && (of_get_option('sidebar-layout', true) != 1) ) {
		if (of_get_option('sidebar-layout', true) ==  'right') {
			wp_enqueue_style( 'inkness-layout', get_template_directory_uri()."/css/layouts/content-sidebar.css" );
		}
		else {
			wp_enqueue_style( 'inkness-layout', get_template_directory_uri()."/css/layouts/sidebar-content.css" );
		}	
	}
	else {
		wp_enqueue_style( 'inkness-layout', get_template_directory_uri()."/css/layouts/content-sidebar.css" );
	}
			
	wp_enqueue_style( 'inkness-bootstrap-style', get_template_directory_uri()."/css/bootstrap/bootstrap.min.css", array('inkness-layout') );
		
	wp_enqueue_style( 'inkness-main-style', get_template_directory_uri()."/css/skins/main.css", array('inkness-layout','inkness-bootstrap-style') );
	
	wp_enqueue_script( 'inkness-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

	wp_enqueue_script( 'inkness-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
	if ( (function_exists( 'of_get_option' )) && (of_get_option('slider_enabled') != 0) ) {
		wp_enqueue_style( 'inkness-nivo-slider-default-theme', get_template_directory_uri()."/css/nivo/slider/themes/default/default.css" );
	
		wp_enqueue_style( 'inkness-nivo-slider-style', get_template_directory_uri()."/css/nivo/slider/nivo.css" );
	}	
	
	if ( (function_exists( 'of_get_option' )) && (of_get_option('slider_enabled') != 0) ) {
		wp_enqueue_script( 'inkness-nivo-slider', get_template_directory_uri() . '/js/nivo.slider.js', array('jquery') );
	}
	wp_enqueue_script( 'inkness-superfish', get_template_directory_uri() . '/js/superfish.js', array('jquery','hoverIntent') );	
	
	wp_enqueue_script( 'inkness-bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery') );	
	
	wp_enqueue_script( 'inkness-custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery') );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}

	if ( is_singular() && wp_attachment_is_image() ) {
		wp_enqueue_script( 'inkness-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20120202' );
	}
}
add_action( 'wp_enqueue_scripts', 'inkness_scripts' );
function inkness_custom_head_codes() {
 if ( (function_exists( 'of_get_option' )) && (of_get_option('style2', true) != 1) ) {
	echo "<style>".of_get_option('style2', true)."</style>";
 }
 if ( (function_exists( 'of_get_option' )) && (of_get_option('slider_enabled') != 0) ) {
	echo "<script>jQuery(window).load(function() { jQuery('#slider').nivoSlider({effect:'fade', pauseTime: 4500}); });</script>";
 }
}	


désolée, c'est un peu long .... mais j'ai tout pris !
mais du coup, je pense que ça répond à la question : ce thème WP utilise correctement (?) la fonction WP wp_enqueue_style (), n'est-ce pas ?

je pars à la recherche d'un outil "CSS decompressor" Smiley cligne

merci merci !
belle soirée