Categorieën en navigatie

Hallo

Ik ben weer eens begonnen aan een nieuwe skin, maar wil nu ook het uiterlijk van een categorie eens aanpassen. Ik heb zelf al van alles geprobeerd, maar het is me niet gelukt. Templates zijn moeilijk om te bewerken xD
Ik zou heel graag iets hebben dat hierop lijkt, maar in plaats van dat je het aantal topics en posts onder de titel hebt staan, zou ik daar de avatar willen hebben van de persoon die het laatst heeft gepost. Het standaard formaat van deze avatar is ook vrij klein, dus zou ik die liever naar een grootte hebben van 100px op 100px.
https://i.gyazo.com/ea9d1fc206a0571a815111c4b6d921bb.png

Vervolgens probeer ik ook een 'achtergrond' achter mijn navigatiebalk te krijgen, zoals hier:
https://i.gyazo.com/2321c4516ce0553dbac384d05acd4b44.png
In de navigatie staan ook enkele titels die ik weg wil hebben zoals: Kalender, FAQ, Zoeken. Ik kan enkel niet vinden hoe dat moet.

Als laatste wil ik de balk waar de categorie naam in staat ook veel hoger zoals hier, maar ik heb met mijn css zitten spelen en niets werkte.
https://i.gyazo.com/35f0a2beabbcb3661bb7b34fa82add76.png

Alvast bedankt ^^

Voordat ik ga beginnen schrijven aan de code zou ik graag weten welke forumversie je gebruikt en of je de template 'index_box' al eens hebt bewerkt. Indien zo, zou je deze dan eens willen posten zodat ik daarmee verder kan werken.

De twee laatste verzoeken zouden mogelijk moeten zijn met css. Een linkje naar je forum zou handig zijn om te zien welke class's/ids aanwezig zijn op je forum. Als je jouw testforum liever privé houdt mag je me altijd een pm sturen met de url.

De versie van mijn forum is phpBB2 en de template is op het moment niet bewerkt ;')
Ik zal je zo meteen ook even een pb sturen met de link naar het forum.

2.a) 'achtergrond' achter mijn navigatiebalk

Als je de achtergrond van iets wilt kleuren, kleur je eigenlijk de achtergrond van zijn container (= element dat een niveau hoger staat).

In het geval op jouw forum zou je de tabel waarin de navigatiebalk staat kleuren, maar jij hebt op je forum al de menulinks één voor één verplaatst. Hierdoor staan ze niet meer in hun container en kan je ook de achtergrond niet kleuren.

Je gaat dus moeten starten met het verschuiven ongedaan maken door volgende css te verwijderen:

Code:

a.mainmenu {
   ...
   position: relative;
   left: 120px;
   top: -490px;
}

Nu staat de navigatiebalk terug in zijn container en kan je deze gaan kleuren en verplaatsen. Omdat je  phpBB2 weinig class's of ids heeft, is het een goed idee om de container een id mee te geven zodat je er makkelijk bij kan met css.

Zoek in de template 'overall_header' naar de html van je navigatiebalk, rond regel 275:

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
</table>

En vervang deze door volgende code, die bevat een extra id:

Code:

<table id="navbar" cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
</table>

Nu kan je in je css je navigatiebalk aanroepen en bewerken:

Code:

#navbar {
  position: relative;
  top: -490px;
  background-color: #323232;
}

2.b) titel verwijderen uit de navigatiebalk

Dit is inderdaad niet echt een optie aangeboden door Forumotion, gelukkig is er css dat je kan gebruiken.

Code:

#navbar a[href="/faq"], #navbar a[href="/search"], #navbar a[href="/calendar"] {
  display: none;
}

Nu zal je zien dat er een grote lege ruimte is, die kan je weg doen met:

Code:

#navbar {
  font-size: 0pt;
}

3) hoogte categorienaam

Je kan de hoogte van die balk aanpassen met de ruimte rond de categorienaam te verhogen. Hiervoor moet je de padding aanpassen:

Code:

.secondarytitle {
  padding: 50px 0px;
}

Ik zal deze implementeren in je eerste verzoek.

---

Met je eerste vraag moet ik nog even verder werken. Tegen vanavond hoop ik dat het online staat.

Dat van de navigatie bar werkt al perfect, bedankt!

Oke, deel 2 van je verzoek.

---

Template, 'index_box':

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall">{LAST_VISIT_DATE}<br />
 {CURRENT_TIME}<br />
 </span>
 <!-- END switch_user_logged_in -->
 <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
 </td>
 <td class="gensmall" align="right" valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
 <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
 <!-- END switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<table class="cattable">
 <tr>
 <th nowrap="nowrap" class="secondarytitle">{catrow.tablehead.L_FORUM}</th>
 </tr>
 <!-- END tablehead -->
 <!-- BEGIN forumrow -->
 <tr>
 <td>
 <table class="forumtable">
 <tr>
 <td>
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <span class="forumlink">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
 </span>
 </h{catrow.forumrow.LEVEL}>
 </td>
 <td class="forumdesc" rowspan="3">
 <table>
 <tr>
 <td>
 <div class="genmed">{catrow.forumrow.FORUM_DESC}</div>
 </td>
 </tr>
 <!-- BEGIN switch_moderators_links -->
 <tr>
 <td>
 <span class="gensmall">
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 </span>
 </td>
 </tr>
 <!-- END switch_moderators_links -->
 </table>
 </td>
 <td class="lastpost-title-cont">
 </td>
 </tr>
 <tr>
 <td class="newpost">
 <img src="{catrow.forumrow.FORUM_FOLDER_IMG}"/>
 </td>
 <td class="newpost">
 <img src="{catrow.forumrow.FORUM_FOLDER_IMG}"/>
 </td>
 </tr>
 <tr>
 <td class="lastpost-avatar-cont">
 <!-- BEGIN avatar -->
 <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
 <!-- END avatar -->
 </td>
 <td class="lastpost-cont">
 <span class="gensmall lastpost-data">{catrow.forumrow.LAST_POST}</span>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
 </tr>
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

css:

Code:

/* categorielijst */
.cattable {
  width: 100%;
  border-spacing: 0px;
  border: none;
  padding: 0px;
}
.cattable .secondarytitle {
  height: 100px;
}
.cattable .newpost {
  background-color: rgba(0,0,0,0.1);
  height: 10px;
  padding: 0px;
}
.cattable .newpost img{
  height: 10px;
  width: 100%;
}
.forumtable {
  width: 100%;
  border-spacing: 0px;
  border: none;
  padding: 10px 25px;
}
.forumtable .forumdesc table {
  width: 100%;
  border-spacing: 0px;
  border: none;
  padding: 15px 15px;
}
.forumtable .forumdesc {
  box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
  position: relative;
  width: 46%;
}
.forumtable .forumdesc div {
  overflow-y: auto;
  height: 100px;
  text-align: justify;
  padding-right: 5px;
}  
.lastpost-title-cont, .lastpost-cont {
  width: 27%;
  padding-left: 15px;
  text-align: right;
  font-size: 10px;
}
.lastpost-avatar-cont {
  vertical-align: text-bottom;
  padding: 5px 0px 0px 0px;
}
.lastpost-avatar img {
  border-radius: 0px;
  border: 5px solid #e5e5e5;
  width: 65px;
  height: 65px;
  margin: -1px;
}

Verder heb ik ook een klein javascriptje gemaakt om de titel van het laatste topic te verplaatsen.
Bovenaan het script zie je nog een lijn staan die je kan aanpassen zodat er bij de fora waar nog geen bericht geplaatst is de standaard avatar verschijnt.

Code: titel :  bv. laatste berichtcategorie plaatsing :  Op de indexpagina javascript code:

Code:

$(function() {
   var defaultAvatar = 'http://2img.net/i/fa/invision/pp-blank-thumb-38px.png';
   $('.forumtable').each(function() {
      if ($(this).find('.lastpost-data').text() == '') {
     $(this).find('.lastpost-avatar-cont').html('<span class="lastpost-avatar"><img src="'+defaultAvatar+'" /></span>');
 $(this).find('.lastpost-data').html('<span>Geen post beschikbaar.</span>');
  }
  else {
     $(this).find('.lastpost-title-cont').html($(this).find('.lastpost-data span a:first'));
  }
   })
});

Verder raad ik ook nog aan om voor de afbeeldingen van een 'forum', 'nieuw forum' of 'gesloten forum' een afbeeldingen met maar één kleur te gebruiken. bv:

De afbeelding wordt namelijk gebruikt als kleur van de horizontale lijn. (zie mijn resultaat, oranje = nieuw bericht, grijs = geen nieuw bericht)

#templateEdit

---

Als je nog ergens op een probleempje stuit laat me dan maar iets weten.

Ziet er echt geweldig uit, bedankt! :'D
Dit is bij deze opgelost~