Nederlands Ondersteuningsforum :
Welkom op het Nederlandse Ondersteuningsforum van ActieForum.


Om ondersteuning te vragen of om in ťťn van onze andere forumsecties te kunnen posten dien je een account te hebben, bedankt voor het inloggen als je al geregistreerd bent, of registreer direct een account op ons ondersteuningsforum als je dit nog niet gedaan hebt.

CategorieŽn en navigatie

Vorige onderwerp Volgende onderwerp Go down

CategorieŽn en navigatie

Bericht van NiboriUkitake op 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 ^^

NiboriUkitake
Forumlid

Vrouw Aantal berichten : 56
Leeftijd : 19
Registratiedatum : 22-06-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://supernaturall.actieforum.com/
NiboriUkitake is bedankt door de starter van dit topic.

Re: CategorieŽn en navigatie

Bericht van 10spetter10 op 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.


Je mag me altijd een pm sturen wanneer ik iets vergeet af te werken, ook ik ben maar een mens!


Veel Voorkomende Problemen | Forum Tools | Tutorials | Skin Aanvraag | Forum Promotie Goedkeuring | Wachtwoord Hoofd-Beheerder kwijt? | Geen ondersteuning via PM | TIP! Vul je browser, forumversie, forum url en of je gebruikt maakt van templates †en/of CSS in op je profiel! Zo kunnen wij je nog beter helpen!

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1296
Leeftijd : 19
Taal : Nederlands
Locatie : BelgiŽ
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
10spetter10 is bedankt door de starter van dit topic.

Re: CategorieŽn en navigatie

Bericht van NiboriUkitake op 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.

NiboriUkitake
Forumlid

Vrouw Aantal berichten : 56
Leeftijd : 19
Registratiedatum : 22-06-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://supernaturall.actieforum.com/
NiboriUkitake is bedankt door de starter van dit topic.

Re: CategorieŽn en navigatie

Bericht van 10spetter10 op 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.


Je mag me altijd een pm sturen wanneer ik iets vergeet af te werken, ook ik ben maar een mens!


Veel Voorkomende Problemen | Forum Tools | Tutorials | Skin Aanvraag | Forum Promotie Goedkeuring | Wachtwoord Hoofd-Beheerder kwijt? | Geen ondersteuning via PM | TIP! Vul je browser, forumversie, forum url en of je gebruikt maakt van templates †en/of CSS in op je profiel! Zo kunnen wij je nog beter helpen!

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1296
Leeftijd : 19
Taal : Nederlands
Locatie : BelgiŽ
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
10spetter10 is bedankt door de starter van dit topic.

Re: CategorieŽn en navigatie

Bericht van NiboriUkitake op zo 21 feb 2016 - 12:29

Dat van de navigatie bar werkt al perfect, bedankt!

NiboriUkitake
Forumlid

Vrouw Aantal berichten : 56
Leeftijd : 19
Registratiedatum : 22-06-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://supernaturall.actieforum.com/
NiboriUkitake is bedankt door de starter van dit topic.

Re: CategorieŽn en navigatie

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

Oke, deel 2 van je verzoek. Wink


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://illiweb.com/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. Wink


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


Je mag me altijd een pm sturen wanneer ik iets vergeet af te werken, ook ik ben maar een mens!


Veel Voorkomende Problemen | Forum Tools | Tutorials | Skin Aanvraag | Forum Promotie Goedkeuring | Wachtwoord Hoofd-Beheerder kwijt? | Geen ondersteuning via PM | TIP! Vul je browser, forumversie, forum url en of je gebruikt maakt van templates †en/of CSS in op je profiel! Zo kunnen wij je nog beter helpen!

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1296
Leeftijd : 19
Taal : Nederlands
Locatie : BelgiŽ
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
10spetter10 is bedankt door de starter van dit topic.

Re: CategorieŽn en navigatie

Bericht van NiboriUkitake op zo 21 feb 2016 - 16:23

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

NiboriUkitake
Forumlid

Vrouw Aantal berichten : 56
Leeftijd : 19
Registratiedatum : 22-06-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://supernaturall.actieforum.com/
NiboriUkitake is bedankt door de starter van dit topic.

Re: CategorieŽn en navigatie

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

..Ondersteunings Vraag opgelost en gesloten.


Je mag me altijd een pm sturen wanneer ik iets vergeet af te werken, ook ik ben maar een mens!


Veel Voorkomende Problemen | Forum Tools | Tutorials | Skin Aanvraag | Forum Promotie Goedkeuring | Wachtwoord Hoofd-Beheerder kwijt? | Geen ondersteuning via PM | TIP! Vul je browser, forumversie, forum url en of je gebruikt maakt van templates †en/of CSS in op je profiel! Zo kunnen wij je nog beter helpen!

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1296
Leeftijd : 19
Taal : Nederlands
Locatie : BelgiŽ
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
10spetter10 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