Een verticale navigatiebalk maken voor phpBB2

Vorige onderwerp Volgende onderwerp Ga naar beneden

Tutorial Een verticale navigatiebalk maken voor phpBB2

Bericht van TonnyKamper op do 5 jul 2018 - 16:38

Een verticale navigatiebalk maken voor phpBB2

Met deze tutorial, kun je een verticale navigatiebalk op je ActieForum Forum activeren .

Demonstratie: Verticale Navigatiebar

Controleer vóór wijziging of je forum voldoet aan de volgende voorwaarden:
- Je moet de oprichter van het forum zijn en toegang hebben tot de templates ervan.
- Je forum moet in de phpBB2-versie staan.

1. De template overall_header bewerken


Ga naar:

Beheerderspaneel Display Templates - Algemeen

Open de template overall_header door op het   icoontje te klikken.
Zoek naar dit deel van de template, waar de variabele {GENERATED_NAVBAR} in voorkomt:
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">  <tr>  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>  </tr>  </table>
Vervang dit door:
Code:
<div class="vertical_nav">{GENERATED_NAV_BAR}</div>
UITLEG:

  • We plaatsen de variabele die de navigatiebalk genereert in een div, waaraan we de naam vertical_nav geven , zodat we deze later kunnen wijzigen vanuit de CSS-stylesheet.

Nadat de aanpassing is voltooid, sla je deze op en publiceer je de template door ernaast op de groene "" in de lijst met templates te klikken.

2. Het CSS-Stylesheet bewerken


Ga naar:

Beheerderspaneel Display Plaatjes en Kleuren
Kleuren - CSS-stylesheet

Voeg de volgende code eraan toe:
Code:
div.vertical_nav {
    position:absolute;
    top:50px;
    left:5%;
}
UITLEG:

  • position:absolute : Staat ons toe om de volledige navigatiebalk als een zwevend element te plaatsen.
  • top:50px : Staat ons toe om ons blok op 50 pixels te plaatsen vanaf de linkerbovenhoek.
  • left:5% : Staat ons toe om ons blok op 5% van de linkerkant van de pagina te plaatsen.

Opmerking: Als je niet wilt dat het navigatieblok het scrollen van de pagina volgt, moet je de: position:absolute vervangen door: position:fixed .

Om het af te maken, voeg je ook nog deze code toe:
Code:
div.vertical_nav a.mainmenu {
    display:list-item;
    list-style:none;
}
UITLEG:

  • display:list-item : Stelt ons in staat de links in de navigatiebalk weer te geven als een lijst van boven naar beneden.
  • list-style:none : Stelt ons in staat ons de stijl te verwijderen die aanvankelijk aan de lijst wordt toegewezen (bullets: •)

Als je je blok een frame wilt geven zoals bij de bovenstaande demonstratie, dan voeg je eenvoudig stijl toe aan het element: div.vertical_nav
Code:
div.vertical_nav {
    background:#FFFFFF;
    border:1px solid #D0D0D0;
}
UITLEG:

  • background:#FFFFFF : stelt ons in staat om de achtergrond van het blok wit te kleuren.
  • border:1px solid #D0D0D0 : staat ons toe om een ​​solide rand toe te voegen, één pixel dik en grijze kleur.

Vergeet niet je aanpassing op te slaan en vooral creatief te zijn!  Smile

avatar

TonnyKamper
Hulp Moderator
Hulp Moderator

Vrouw Aantal berichten : 305
Geboortedatum : 23-10-54
Leeftijd : 63
Taal : Nederlands, Engels
Locatie : Nederland
Registratiedatum : 15-02-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://www.nederlandheelt.nl/ http://punt.forumactie.com
TonnyKamper is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum