Nederlands Ondersteuningsforum :
Wilt u reageren op dit bericht? Maak met een paar klikken een account aan of log in om door te gaan.

Categorieën en navigatie

2 plaatsers

Vorige onderwerp Volgende onderwerp Ga naar beneden

Opgeloste Topic Categorieën en navigatie

Bericht van NiboriUkitake zo 21 feb 2016 - 11:22

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 ^^

Terug naar boven Terug naar beneden

NiboriUkitake

NiboriUkitake
Forumlid

Vrouw
Berichten : 57
Leeftijd : 26
Registratie : 22-06-12
Oprichter : Ja
Templates : Ja
CSS : Ja

Lid sinds +10 jaar
U bent al meer dan 10 jaar lid
200 berichten of meer gepost
Je hebt 200 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!

http://supernaturall.actieforum.com/



NiboriUkitake is bedankt door de starter van dit topic.

Opgeloste Topic Re: Categorieën en navigatie

Bericht van 10spetter10 zo 21 feb 2016 - 11:33

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.

Terug naar boven Terug naar beneden

10spetter10

10spetter10
Superactief Forumlid

Man
Berichten : 1222
Leeftijd : 26
Registratie : 08-07-12
Oprichter : Ja
Templates : Ja
CSS : Ja

Lid sinds +10 jaar
U bent al meer dan 10 jaar lid
1000 berichten of meer gepost
Je hebt 1000 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Oud Actieforum Medewerker
Deze gebruiker is een oud Actieforum medewerker.
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!




10spetter10 is bedankt door de starter van dit topic.

Opgeloste Topic Re: Categorieën en navigatie

Bericht van NiboriUkitake zo 21 feb 2016 - 11:45

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.

Terug naar boven Terug naar beneden

NiboriUkitake

NiboriUkitake
Forumlid

Vrouw
Berichten : 57
Leeftijd : 26
Registratie : 22-06-12
Oprichter : Ja
Templates : Ja
CSS : Ja

Lid sinds +10 jaar
U bent al meer dan 10 jaar lid
200 berichten of meer gepost
Je hebt 200 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!

http://supernaturall.actieforum.com/



NiboriUkitake is bedankt door de starter van dit topic.

Opgeloste Topic Re: Categorieën en navigatie

Bericht van 10spetter10 zo 21 feb 2016 - 12:17

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.

Terug naar boven Terug naar beneden

10spetter10

10spetter10
Superactief Forumlid

Man
Berichten : 1222
Leeftijd : 26
Registratie : 08-07-12
Oprichter : Ja
Templates : Ja
CSS : Ja

Lid sinds +10 jaar
U bent al meer dan 10 jaar lid
1000 berichten of meer gepost
Je hebt 1000 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Oud Actieforum Medewerker
Deze gebruiker is een oud Actieforum medewerker.
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!




10spetter10 is bedankt door de starter van dit topic.

Opgeloste Topic Re: Categorieën en navigatie

Bericht van NiboriUkitake zo 21 feb 2016 - 12:29

Dat van de navigatie bar werkt al perfect, bedankt!

Terug naar boven Terug naar beneden

NiboriUkitake

NiboriUkitake
Forumlid

Vrouw
Berichten : 57
Leeftijd : 26
Registratie : 22-06-12
Oprichter : Ja
Templates : Ja
CSS : Ja

Lid sinds +10 jaar
U bent al meer dan 10 jaar lid
200 berichten of meer gepost
Je hebt 200 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!

http://supernaturall.actieforum.com/



NiboriUkitake is bedankt door de starter van dit topic.

Opgeloste Topic Re: Categorieën en navigatie

Bericht van 10spetter10 zo 21 feb 2016 - 16:15

Oke, deel 2 van je verzoek. Wink

Categorieën en navigatie EkLAik0
Resultaat op mijn testforum




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: Categorieën en navigatie 2200yGK

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. Wink


Laatst aangepast door 10spetter10 op di 5 apr 2016 - 17:13; in totaal 1 keer bewerkt

Terug naar boven Terug naar beneden

10spetter10

10spetter10
Superactief Forumlid

Man
Berichten : 1222
Leeftijd : 26
Registratie : 08-07-12
Oprichter : Ja
Templates : Ja
CSS : Ja

Lid sinds +10 jaar
U bent al meer dan 10 jaar lid
1000 berichten of meer gepost
Je hebt 1000 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Oud Actieforum Medewerker
Deze gebruiker is een oud Actieforum medewerker.
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!




10spetter10 is bedankt door de starter van dit topic.

Opgeloste Topic Re: Categorieën en navigatie

Bericht van NiboriUkitake zo 21 feb 2016 - 16:23

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

Terug naar boven Terug naar beneden

NiboriUkitake

NiboriUkitake
Forumlid

Vrouw
Berichten : 57
Leeftijd : 26
Registratie : 22-06-12
Oprichter : Ja
Templates : Ja
CSS : Ja

Lid sinds +10 jaar
U bent al meer dan 10 jaar lid
200 berichten of meer gepost
Je hebt 200 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!

http://supernaturall.actieforum.com/



NiboriUkitake is bedankt door de starter van dit topic.

Opgeloste Topic Re: Categorieën en navigatie

Bericht van 10spetter10 zo 21 feb 2016 - 16:39

.Categorieën en navigatie Hurhad10.Ondersteunings Vraag opgelost en gesloten.

Terug naar boven Terug naar beneden

10spetter10

10spetter10
Superactief Forumlid

Man
Berichten : 1222
Leeftijd : 26
Registratie : 08-07-12
Oprichter : Ja
Templates : Ja
CSS : Ja

Lid sinds +10 jaar
U bent al meer dan 10 jaar lid
1000 berichten of meer gepost
Je hebt 1000 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Oud Actieforum Medewerker
Deze gebruiker is een oud Actieforum medewerker.
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!




10spetter10 is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven

- Soortgelijke onderwerpen

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