In het laatste deel van deze serie heb ik je door de BuddyPress-thema-API en -lussen laten leiden. We zijn klaar met het maken van een kinderthema dat we vandaag in het volgende deel van onze serie opnieuw zullen gebruiken. Ik hoopte dat het raamwerk dat in de vorige tutorial is gelegd, het thema van onze kinderen veel gemakkelijker zal maken. Dit deel van de tutorial zal zich richten op het creëren van een nieuwe algehele look voor onze BuddyPress-site en het maken van een aangepaste startpagina. Laten we daarom onze themamap openen en onze handen vies maken in een code.

Deze tutorial legt de basis voor deel 3, waar we ons zullen concentreren op forums, blogs en de algehele gebruikerservaring van je nieuwe BuddyPress-thema voor kinderen. Laten we voor nu beginnen met kijken naar hoe je het uiterlijk van een kindthema kunt veranderen met behulp van CSS.

Wat we gaan doen

Aan het einde van deze zelfstudie zou je in staat moeten zijn om:

• pas het algemene uiterlijk van een BuddyPress-kindthema aan met CSS
• maak een custom.php om de standaard BuddyPress-thema's te overschrijven
• maak een aangepaste startpagina voor uw thema
• integreer lussen in uw aangepaste pagina's

Een aangepaste startpagina maken

In deze zelfstudie willen we de generieke BuddyPress-indexpagina nemen en een uitnodigende startpagina maken die veel gebieden van onze site markeert en een algemeen stijlanker voor de site maakt. Dus, kortom, we willen hiervan afwijken:

hieraan:

Stap 1 Maak een home.php-sjabloonbestand

Voordat we ons gaan graven in ons stylesheet, neemt u het index.php-bestand in uw kindthema en dupliceert u het. Nu, hernoem dat bestand home.php. Voila! Je hebt een pagina die altijd wordt geladen als je startpagina.

Als u bekend bent met WordPress-thema's, zult u merken dat dit proces precies hetzelfde is als in WordPress.

Stap 2 Begin met het stylesheet

In het laatste deel van deze serie onthoud je dat we een nieuw kindthema hebben gemaakt door een map met de naam cool_bp_theme te maken (of hoe je het ook wilt noemen) en die map in de map wp-contents / themes van onze site te plaatsen. Van daaruit hebben we een nieuw bestand style.css gemaakt en ervoor gezorgd dat dit is geïmporteerd:

 / * De standaardthemastijlen * / @import url (? /? /Plugins/buddypress/bp-themes/bp-default/_inc/css/default.css) overnemen; / * De standaardstijl van de thema-beheerbalk * / @import url (? /? / Plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css) overnemen;

Nu willen we onze CSS verder bewerken om het kindthema het onze eigen te maken in termen van ontwerp en lay-out. Laten we eens kijken hoe we van het standaard BuddyPress-thema naar daar kunnen komen. Om dat te doen, moeten we:

1. Zoek de elementen die we willen veranderen. Ik gebruik Firebug om snel pagina-elementen en hun stijlen te vinden.
2. Voeg het element toe aan uw style.css-bestand.
3. Verander de CSS in je stijl.

Elk element dat we in ons child theme style.css-bestand plaatsen overschrijft de stijlinstellingen elders. Kopieer de elementnaam echter exact, anders verandert deze niet.

Stap 3 De achtergrond aanpassen

Dus, te beginnen met de basis, laten we de achtergrond van ons lichaam en andere elementen veranderen. Als u Firebug gebruikt, klikt u met de rechtermuisknop (Control-klik) op de achtergrond en selecteert u het element Inspecteren. Als je geen Firebug hebt of als je liever rechtstreeks met de CSS werkt, navigeer dan naar: je WP-map / wp-content / plugins / buddypress / bp-themes / bp-default / _inc / css / default.css.

Onthoud dat u altijd het CSS-bestand in uw kindthema wilt bewerken, omdat eventuele bewerkingen in de bp-standaard themamap tijdens een upgrade worden overschreven.

De standaard body-styling ziet er als volgt uit:

 body background: #eaeaea url (? /images/background.gif) linksboven herhaal-x; lettergrootte: 12px; font-family: Arial, Tahoma, Verdana, sans-serif; regelhoogte: 170%; kleur: # 555; breedte: 90%; minimale breedte: 960 px; maximale breedte: 1250 px; marge: 0 auto; padding-top: 0! belangrijk; / * Verwijder de bovenste opvulruimte voor de beheerbalk in dit thema * /

Dit resulteert in onze standaard standaardstijl. We willen dat veranderen, dus we moeten het volgende toevoegen aan onze child-themastijl:

 body background: #eaeaea url (images / cool_bp_theme_bg.jpg) herhaal linksboven; padding-top: 20px; 

Als u nu naar de startpagina kijkt, ziet het er als volgt uit:

U hoeft alleen nog het containerelement te wijzigen, dat standaard is:

 div # container positie: relatief; breedte: 100%; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-right: 1px solid # e0e0e0; border-bottom: 1px solid # e0e0e0; achtergrond: #fff; overloop verborgen; 

We willen de achtergrond veranderen in transparant en de randelementen verwijderen.

 div # container positie: relatief; breedte: 100%; padding: 10px; border: none; achtergrond: transparant; overloop verborgen; font-size: 12px; 

De achtergrond ziet er nu naar uit zoals we willen en we kunnen de rest van de pagina bewerken.

Stap 4 De kopelementen aanpassen

Aangezien de achtergrond is waar we het willen hebben, laten we onze aandacht richten op de koptekst. Standaard staat het thema een aangepaste koptekst toe, die via het dashboard van de beheerder is ingesteld Uiterlijk => Header. Er is een functie om dat uit te zetten die in BuddyPress codex wordt vermeld, maar ga nu gewoon naar daar en verwijder de headerafbeelding. We willen het vervangen door een logoafbeelding op maat door simpelweg lijn 44 in onze header.php te vervangen:

 
"title ="">

met

Hiermee wordt de gewenste logo-afbeelding toegevoegd. Let op de logo id, waaraan ik heb toegevoegd style.css. Dat drijft het gewoon naar rechts. Voor de navigatie heb ik het aangepaste menu behouden dat ik in eerdere zelfstudies heb beschreven en ik heb het zo gestileerd:

 #navigation ul float: right;  #navigation ul li list-style: none; float: left; margin-left: 15px; margin-top: 100px; font-size: 22px; color: # 404040; 

Stap 5 De inhoudselementen aanpassen

Let op de aangepaste afbeelding en tekst die ik bovenaan de startpagina zet:

Om dat te krijgen, na

 
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimus veniam, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 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: 20px auto;  #featured_image float: links; width: 511px;  #intro_text width: 420px; float: right; text-align: rechtvaardigen; font-size: 24px; line-height: .5em; word-break: normaal; 

  
 
  
 
  
 
  
  
 
 "> 
 
 
 ">   -   
 
   
 
  
 
 
  
    
 
 
 

 div.post div.author-box, div.comment-avatar-box background: #FFFFFF; opvulling: 10px; zweven: links; marge: 0 15px 15px 0; font-family: georgia, times, serif; lettertype-stijl: cursief; text-align: center; breedte: 70 px; -moz-border-radius: 3px; -webkit-border-radius: 3px; grensradius: 3px;  div.post div.author-box img, div.comment-avatar-box img float: none; rand: 4px vast # 666666; marge: 0; 

 div # sidebar float: left; breedte: 224 px; marge links: -226px; margin-top: 30px; border-left: 1px solid #DDD; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; achtergrond: url (? /images/sidebar_back.gif) linksboven herhaal-x; border-top-right-radius: 3px 3px;  ul.item-lijst li border-bottom: 1px solid #EAEAEA; achtergrond: #FFFFFF; opvulling: 15px 0; marge: -5px -20px 0 -19px; positie: relatief;  div.item background: #FFFFFF; 

 span.activity, div # message p background: none repeat scroll 0 0 # FFF9DB; border-bottom: 1px solid # FFE8C4; grensradius: 3px 3px 3px 3px; border-right: 1px solid # FFE8C4; kleur: # 444444; weergave: inline-block; lettergrootte: 12px; font-gewicht: normaal; margin-top: 6px; opvulling: 1px 8px; tekstdecoratie: geen;