Het is nu zo 16 jun 2019 - 6:35

1 resultaat gevonden

Een verticale navigatiebalk maken voor phpBB2

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 "Topics getagged onder d0d0d0 op Nederlands Ondersteuningsforum : 644535217" 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


van TonnyKamper
op do 5 jul 2018 - 16:38
 
Zoek in: Tips & Trucs
Onderwerp: Een verticale navigatiebalk maken voor phpBB2
Antwoorden: 0
Bekeken: 225

Terug naar boven

Ga naar: