Personnaliser un thème
billyyoupi
Messages postés
30
Statut
Membre
-
elgazar Messages postés 5776 Date d'inscription Statut Membre Dernière intervention -
elgazar Messages postés 5776 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Comment peu-on modifier le design d'un thème sous wordpress? Merci
Comment peu-on modifier le design d'un thème sous wordpress? Merci
1 réponse
-
Bonjour
cela dépends de ce que tu appelles modifier
la plupart des thèmes wp.org permettent d'avoir plus ou moins options modifiables dans apparence=>personnaliser.
Si ce n'est pas possible directement, il faut modifier le code du thème ce qui demande des connaissances en html,php et css suivant ce que tu veux faire, dans ce cas la il est conseillé de faire un thème enfant du thème que tu utilises pour que les modifications ne soient pas effacées lors de la mise à jour du thème-
Bonjour Elgazar,
J'ai créé mon thème enfant et je me retrouve donc avec un thème : catch-bas-child et à l'intérieur deux fichiers :
- functions.php
- style.css
Je veux remplacer une couleur par une autre (#ff1515) sur l'intégralité du site. J'ai donc analysé tout les bout de code avec cette couleur et je l'ai copié dans ma feuille de style enfant afin de corriger la couleur.
Est-ce correct ?
Parceque rien ne change sur l'apparence de mon site.
/*
Theme Name: Catch Base Child
Theme URI:
Description: Catch Base Child Theme
Author:
Author URI:
Template: catch-base
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: catch-base-child- //*--------------------------------------------------------------3. Elements--------------------------------------------------------------*/a { color: #ff1515; text-decoration: none;}/*--------------------------------------------------------------6. Navigation--------------------------------------------------------------*/.catchbase-nav-menu li a:hover,.catchbase-nav-menu li a:focus,.sidebar-header-right .widget_nav_menu li a:hover,.sidebar-header-right .widget_nav_menu li a:focus { color: #ff1515; text-decoration: none;}.catchbase-nav-menu .sub-menu li a:hover,.catchbase-nav-menu .sub-menu li a:focus,.catchbase-nav-menu .children li a:hover,.catchbase-nav-menu .children li a:focus,.sidebar-header-right .widget_nav_menu .sub-menu li a:hover,.sidebar-header-right .widget_nav_menu .sub-menu li a:focus { color: #ff1515;}/* Hover Parent */.catchbase-nav-menu li:hover > a,.sidebar-header-right .widget_nav_menu li:hover > a {}.catchbase-nav-menu .current-menu-item > a,.catchbase-nav-menu .current-menu-ancestor > a,.catchbase-nav-menu .current_page_item > a,.catchbase-nav-menu .current_page_ancestor > a,.sidebar-header-right .widget_nav_menu .current-menu-item > a,.sidebar-header-right .widget_nav_menu .current-menu-ancestor > a { color: #ff1515;}.catchbase-nav-menu .sub-menu li a:hover,.catchbase-nav-menu .sub-menu li a:focus,.catchbase-nav-menu .children li a:hover,.catchbase-nav-menu .children li a:focus,.sidebar-header-right .widget_nav_menu .sub-menu li a:hover,.sidebar-header-right .widget_nav_menu .sub-menu li a:focus { color: #ff1515;}/*--------------------------------------------------------------7. Accessibility--------------------------------------------------------------*/.screen-reader-text:hover,.screen-reader-text:active,.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #ff1515; display: block; font-size: 14px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar */}/*--------------------------------------------------------------10. Header Area--------------------------------------------------------------*/.site-title a:hover { color: #ff1515; text-decoration: none;}/*--------------------------------------------------------------12. Featured Content Area--------------------------------------------------------------*/#featured-content .entry-title a:hover { color: #ff1515;}/*--------------------------------------------------------------13. Content--------------------------------------------------------------*/.entry-title a:hover { color: #ff1515;}/*--------------------------------------------------------------10. Extra Elements--------------------------------------------------------------*/#breadcrumb-list a,#breadcrumb-list a span { color: #ff1515; display: inline-block; padding: 5px 10px 3px;}.site .widget_catchbase_social_icons a.genericon-wordpress:hover { background-color: #ff1515; border-color: #ff1515;}
Merci encore une fois de ton aide Elgazar.
Vincent -
autre information
dans le thème parent, il y a un dossier css/colors/ puis un fichier dark.css cela doit être la feuille de style appelé quand on sélectionne une option d'apparence "dark"
J'ai donc également créé un dossier dans mon thème enfant css/colors/ puis un fichier dark.css ou j'ai également modifié la couleur souhaitée partout.
Ai-je bien fais ? la méthode est bonne ?
Merci- Comme cela, je ne saurais te dire sans voir le thème parent en question car il est possible que tu te contredises dans les css., ton theme enfant affichantune couleur de fond puis une autre couleur de fond quand les css du thème principal sont lues
Pour mettre en fil d'attente les styles, essaye en mettant ce code dans le fichier functions.php du thème enfant
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
évidemment, tu dois modifier l'url du fichier css (en gras) si le fichier css qui gère la couleur est dans un sous-dossier du genre/css/colors/dark.css
-
