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.

Profiel in tabs

Vorige onderwerp Volgende onderwerp Go down

Profiel in tabs

Bericht van Benzema op di 24 jun 2014 - 11:41

Profiel in tabs


† †Hoi allemaal! Ik wil jullie laten zien hoe je het profiel in tabs kunt zetten. Dit is alleen te gebruiken als je het Roleplay Game sheet gebruikt, anders heb je niet veel om in de tweede tab te zetten †Wink

Stap 1 | De javascript Eerst plaatsen we de javascript code.

Beheerderspaneel Module HTML & Javascript Javascript code beheer

Voeg de volgende javascriptcode toe en sla op.

Code:
 † † † $(function(){
 † † †var d=function(){if($(this).is(".selected")) return;var a=$(this).closest(".systab");a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1]);$(this).addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1])};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(this).html('<div class="'+($(this).is(".s_bottom")?"contents":"tabs")+'"></div><div class="'+($(this).is(".s_bottom")?
 † †"tabs":"contents")+'"></div>');$(a).each(function(){b=$(this).children(":first");b.is("span")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> div.contents",this).append(a);b=$(".content:first,.content.selected",this).last();$(b).addClass("selected").siblings().hide();$(b).data("tab").addClass("selected")}).on("click",".tab",d).filter(".s_hover").on("mouseenter",".tab",d)
 † †});


Stap 2 | De template Om het profiel (aantal berichten, woonplaats, enz.) te scheiden van de Character sheet (aanvullende informatie over je karakter), hebben we dus 2 tabs nodig. Hiervoor moeten we eerst wat in de templates aanpassen.
† †
Beheerderspaneel Display Templates Algemeen viewtopic_body

Zoek in de template naar de volgende code, verwijder deze...

Code:
 † †<!-- BEGIN profile_field -->
 † † {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 † † <!-- END profile_field -->
 † † {postrow.displayed.POSTER_RPG}

... en vervang hem hiermee.

Code:
 † †<div class="systab">
 † †<div †class="selected">
 † † † †<span>PROFIEL</span>
 † † † †<!-- BEGIN profile_field -->
 † † † † † † † †{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 † † † † † † † †<!-- END profile_field --></div>
 † † †<div>
 † † † †<span>RPG SHEET</span>{postrow.displayed.POSTER_RPG}
 † † †</div>
 † †</div>

Nu hebben we de tabs voor het profiel gemaakt. Klik op verzenden en publiceer de template om hem te laten werken.

Stap 3 | De CSS Om de tabs te personaliseren, kun je de volgende code in de CSS sheet plaatsen.

Beheerderspaneel Display Plaatjes en Kleuren Kleuren Cascading Style Sheet

Code:
 † †/* de tab */
 † †.systab .tab {
 † † †padding: 2px 5px;
 † † †margin-right: 5px;
 † † †color: #000;
 † † †background: #fff;
 † † †border: 1px solid #000;
 † † †cursor: pointer;
 † †}
 † †/* hovereffect van tab */
 † †.systab .tab:hover {
 † † †background: #b8efa1;
 † † †color: #487f31;
 † † †border-color: #487f31;
 † †}
 † †/* geselecteerde tab */
 † †.systab .tab.selected{
 † † †color: #ccc;
 † † †background: #333;
 † †}
 † †/* inhoud tab †*/
 † †.systab .contents {
 † † †margin-top: 1px;
 † † †margin-bottom: 1px;
 † † †color: #000;
 † † †background: #fff;
 † † †border: 1px solid #000;
 † † †padding: 10px;
 † †}
 † †/* stijl van tab */
 † †.systab.s_float .tab,.systab.s_float .tab {
 † † †display: block;
 † † †margin: 5px;
 † †}
 † †/* plaats van inhoud †*/
 † †.systab.s_float .tabs,.systab.s_float .contents {
 † † †float: left;
 † †}

____________

Tada! Als het goed is, ziet het er als volgt uit...

Spoiler:

Als er problemen naar voren komen, kunnen die altijd via pm gemeld worden! Veel plezier ermee Smile


Benzema
Medaille Forumlid
Medaille Forumlid

Oud Beheerder

Vrouw Aantal berichten : 208
Registratiedatum : 24-06-14
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
Benzema is bedankt door de starter van dit topic.

Re: Profiel in tabs

Bericht van 10spetter10 op di 24 jun 2014 - 13:14

Tutorial Goedgekeurd!

Het ziet er mooi uit en ik denk wel dat veel er het gaan gebruiken. Wink


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