Profiel in tabs

Vorige onderwerp Volgende onderwerp Ga naar beneden

Suggestie Profiel in tabs

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

Profiel in tabs met RPG Sheets

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 en vervang die...

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}

... door deze code.

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

Klik om te bekijken:

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

avatar

Benzema
Medaille Forumlid

Vrouw Aantal berichten : 198
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.

Suggestie 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
avatar

10spetter10
Medaille Forumlid

Man Aantal berichten : 1267
Geboortedatum : 21-04-97
Leeftijd : 21
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