Dans la dernière partie de cette série, je vous ai présenté l'API et les boucles du thème BuddyPress. Nous avons fini par créer un thème enfant que nous allons réutiliser aujourd'hui dans la prochaine partie de notre série. J'espérais que le cadre présenté dans le dernier tutoriel faciliterait beaucoup l'élaboration du thème de notre enfant. Cette partie du didacticiel se concentrera sur la création d’une nouvelle apparence générale pour notre site BuddyPress et la création d’une page d’accueil personnalisée. Alors, ouvrons notre dossier de thèmes et mettons les mains dans le code.

Ce didacticiel jettera les bases de la troisième partie, consacrée aux forums, aux blogs et à l’expérience globale de votre nouveau thème enfant BuddyPress. Pour le moment, commençons par examiner comment modifier l'apparence d'un thème enfant à l'aide de CSS.

Qu'allons nous faire

À la fin de ce tutoriel, vous devriez être capable de:

• personnaliser l'apparence générale d'un thème enfant BuddyPress avec CSS
• créer un fichier custom.php pour écraser la fonctionnalité par défaut du thème BuddyPress
• créer une page d'accueil personnalisée pour votre thème
• intégrer des boucles dans vos pages personnalisées

Création d'une page d'accueil personnalisée

Dans ce didacticiel, nous souhaitons utiliser la page d'index générique BuddyPress et créer une page d'accueil invitante mettant en évidence de nombreuses zones de notre site et créant une ancre de style globale pour le site. Donc, en bref, nous voulons partir de ceci:

pour ça:

Étape 1 Créer un fichier de modèle home.php

Avant de commencer à fouiller dans notre feuille de style, prenez le fichier index.php de votre thème enfant et dupliquez-le. Maintenant, renommez ce fichier home.php. Voila! Vous avez une page qui sera toujours chargée en tant que votre page d'accueil.

Si vous connaissez bien les thèmes WordPress, vous remarquerez que ce processus est exactement le même que dans WordPress..

Étape 2 Commencez avec la feuille de style

Dans la dernière partie de cette série, vous vous souviendrez que nous avons créé un nouveau thème enfant en créant un dossier nommé cool_bp_theme (ou le nom de votre choix) et en plaçant ce dossier dans le dossier wp-contents / themes de notre site. À partir de là, nous avons créé un nouveau fichier style.css et nous sommes assurés de l'importer:

 / * Hériter des styles de thème par défaut * / @ import url (? /? /Plugins/buddypress/bp-themes/bp-default/_inc/css/default.css); / * Hériter des styles d'administration par défaut du thème * / @import url (? /? /Plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css);

Nous souhaitons maintenant modifier davantage notre CSS afin de personnaliser le thème de l’enfant en termes de conception et de présentation. Voyons comment obtenir le thème par défaut de BuddyPress. Pour ce faire, nous devons:

1. Trouvez les éléments que nous voulons changer. J'utilise Firebug pour trouver rapidement les éléments de page et leurs styles.
2. Ajoutez l'élément à votre fichier style.css.
3. Changer le CSS à votre style.

Tout élément que nous avons inséré dans notre fichier style.css de thème enfant remplacera les paramètres de style ailleurs. Cependant, copiez le nom de l'élément exactement sinon il ne changera pas.

Étape 3 Personnaliser l'arrière-plan

Alors, en commençant par les bases, changeons l’arrière-plan de notre corps et d’autres éléments. Si vous avez Firebug, cliquez avec le bouton droit de la souris sur l’arrière-plan et sélectionnez Élément à inspecter. Si vous n'avez pas Firebug ou si vous préférez travailler directement avec le CSS, accédez à: votre dossier WP / wp-content / plugins / buddypress / bp-themes / bp-default / _inc / css / default.css..

N'oubliez pas que vous souhaitez toujours modifier le fichier CSS situé dans votre thème enfant, car toutes les modifications apportées dans le dossier du thème bp-default seront écrasées lors d'une mise à niveau..

Le style de corps par défaut ressemble à ceci:

 body background: #eaeaea url (? /images/background.gif) en haut à gauche repeat-x; taille de police: 12px; font-family: Arial, Tahoma, Verdana, sans-serif; hauteur de trait: 170%; couleur: # 555; largeur: 90%; largeur minimale: 960px; largeur maximale: 1250px; marge: 0 auto; padding-top: 0! important; / * Supprime l'espace de remplissage supérieur de la barre d'administration dans ce thème * /

Cela se traduit par notre style de base par défaut. Nous voulons changer cela, nous devons donc ajouter ce qui suit à notre feuille de style de thème enfant:

 body background: #eaeaea url (images / cool_bp_theme_bg.jpg) répétition en haut à gauche; rembourrage en haut: 20px; 

Maintenant, si vous regardez la page d'accueil, elle devrait ressembler à ceci:

Il ne reste plus qu'à modifier l'élément conteneur, qui est par défaut:

 div # conteneur position: relative; largeur: 100%; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-right: 1px solid # e0e0e0; border-bottom: 1px solid # e0e0e0; background: #fff; débordement caché; 

Nous voulons changer l'arrière-plan en transparent et supprimer les éléments de bordure.

 div # conteneur position: relative; largeur: 100%; rembourrage: 10px; bordure: aucune; fond: transparent; débordement caché; taille de police: 12px; 

Le fond ressemble maintenant à ce que nous voulons, et nous pouvons maintenant éditer le reste de la page..

Étape 4 Personnalisation des éléments d'en-tête

Puisque l'arrière-plan est l'endroit où nous le voulons, tournons notre attention vers l'en-tête. Par défaut, le thème autorise un en-tête personnalisé, défini dans le tableau de bord de l'administrateur via Apparence => En-tête. Il y a une fonction pour désactiver cela listée dans le codex de BuddyPress, mais pour l'instant, allez-y et supprimez l'image d'en-tête. Nous voulons le remplacer par une image de logo personnalisée en remplaçant simplement la ligne 44 dans notre header.php:

 
"title ="">

avec

Cela ajoutera l'image du logo que nous voulons. Remarquez le logo id, que j'ai ajouté à style.css. Cela fait simplement flotter à droite. Pour la navigation, j'ai conservé le menu personnalisé que j'ai décrit dans les tutoriels précédents et je l'ai stylé comme suit:

 #navigation ul float: right;  #navigation ul li list-style: none; float: gauche; marge gauche: 15px; marge supérieure: 100 px; taille de police: 22px; couleur: # 404040; 

Étape 5 Personnalisation des éléments de contenu

Notez l’image et le texte personnalisés que j’ai mis en haut de la page d’accueil:

Pour l'obtenir, après

 
  
Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Tout en un minimum de poids, l’exercice de nos exercices en cours de travail, mais il n’existe que d’excellents résultats. Duis aute irure dolor in reprrehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt. 
 

 #featured_content width: 100%; marge: auto 20px;  #featured_image float: left; largeur: 511px;  #intro_text width: 420px; Flotter à droite; text-align: justifier; taille de police: 24px; hauteur de ligne: .5em; coupure de mot: normale; 

  
 
  
 
  
 
  
  
 
 "> 
 
 
 ">   -   
 
   
 
  
 
 
  
    
 
 
 

 div.post div.author-box, div.comment-avatar-box background: #FFFFFF; rembourrage: 10px; float: gauche; marge: 0 15px 15px 0; font-family: georgia, times, serif; style de police: italique; text-align: center; largeur: 70px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;  div.post div.author-box img, div.comment-avatar-box img float: none; bordure: solide 4px # 666666; marge: 0; 

 div # sidebar float: left; largeur: 224px; marge gauche: -226px; marge supérieure: 30px; border-left: 1px solid #DDD; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; background: url (? /images/sidebar_back.gif) en haut à gauche repeat-x; border-top-right-radius: 3px 3px;  ul.item-list li border-bottom: 1px solid #EAEAEA; fond: #FFFFFF; rembourrage: 15px 0; marge: -5px -20px 0 -19px; position: relative;  div.item background: #FFFFFF; 

 span.activity, div # message p arrière-plan: aucune répétition faire défiler 0 0 # FFF9DB; bordure inférieure: 1px solide # FFE8C4; border-radius: 3px 3px 3px 3px; bordure droite: 1px solide # FFE8C4; couleur: # 444444; affichage: inline-block; taille de police: 12px; poids de police: normal; marge supérieure: 6px; rembourrage: 1px 8px; texte-décoration: aucun;