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.

Vragen over codes

Vorige onderwerp Volgende onderwerp Go down

Vragen over codes

Bericht van Joost op vr 16 aug 2013 - 13:12

Hoi hoi,


Ik ben zelf ook bezig met een forum te maken, alleen ik ben niet zo thuis in codes dus ik hoop dat iemand voor mij deze 2 vragen zou kunnen beantwoorden. Ik ben eerst de layout aan het maken op een test forum van mij en ik gebruik PunBB.


Dit is een screenshot van een Franstalig forum: (Link)




(Vraag 1, rode kleur)
Als je met je muis over een onderdeel gaat zit er een animatie in, weet iemand hier toevallig de code van om dit mogelijk te maken?


(Vraag 2, groene kleur)
Ik zou graag ook zo'n uiterlijk willen zoals afgebeeld in het groene kader hierboven in de screenshot, ook hier zou ik de code van willen.

--

Heel erg bedankt voor de moeite. Smile


Laatst aangepast door Joost op wo 23 jul 2014 - 10:55; in totaal 2 keer bewerkt



   Veel Voorkomende Problemen | Forum Gereedschap | 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!

Joost
Beheerder
Beheerder

Man Aantal berichten : 4117
Leeftijd : 25
Taal : Nederlands
Locatie : Nederland
Registratiedatum : 31-08-07
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://hpmagicworld.actieforum.com/ http://ondersteun.actieforum.com/
Joost is bedankt door de starter van dit topic.

Re: Vragen over codes

Bericht van Lone Wanderer op vr 16 aug 2013 - 14:56

Vraag 2 weet ik niet, maar ik denk dat ik met vraag 1 wel kan helpen. Ik heb zelf echter alleen nog maar phpBB2 gebruikt en ik weet niet in hoeverre dat verschillend werkt tov PunBB, so.. don't shoot me if I'm wrong Laughing 
Goed, zoals ik denk dat zij dat hebben gedaan:

Ze hebben in de boardomschrijving een afbeelding gezet en die afbeelding een class gegeven, dus zo:

Code:
<img src="HIER AFBEELDING LINK" class="CLASSNAAM"/>
In de CSS voegen zeggen ze vervolgens dat de afbeelding doorzichtig moet zijn en als je er met je cursor overheen gaat, wordt hij minder doorzichtig. Dat gebeurt zo:

Code:
.CLASSNAAM{
float: left;
position: relative;
opacity: 0.6;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.CLASSNAAM:hover{
transform: rotate(-10deg);
opacity: 1;
}
Alle stukjes met ease-in-out geven aan hoe lang de animatie duurt. In dit geval wordt de afbeelding in 0.3s helemaal zichtbaar. Overigens werkt transform (dus het 10 graden kantelen) niet in Chrome, voor zover ik kan zien...
Wil je de tekst ook opzij laten bewegen? Dat hebben ze denk ik als volgt gedaan:

Code:
.forumtitle a:hover{
padding-left: 3px;
}
Tenzij punBB heel anders werkt dan phpBB2 zouden deze codes moeten werken. Ik hoop dat ik het duidelijk genoeg heb uitgelegd. ^^

Edit: oke, ik zie dat het niet helemaal werkt bij PunBB (heb mijn testforum even naar een punBB versie omgezet).... Waarschijnlijk is het wel iets in de trant van bovenstaande uitleg, maar ik ga even uitzoeken wat er anders moet Razz

Lone Wanderer
Medaille Forumlid
Medaille Forumlid

Oud Beoordeler

Vrouw Aantal berichten : 145
Registratiedatum : 26-07-13
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://hongerspelenRPG.actieforum.com
Lone Wanderer is bedankt door de starter van dit topic.

Re: Vragen over codes

Bericht van Lone Wanderer op vr 16 aug 2013 - 19:43

Ik ben er nog even goed voor gaan zitten en ben uiteindelijk op deze code gekomen (dus in plaats van wat ik eerst als CSS codes gaf)

Code:
.statused tr img.CLASSNAAM{
float: left;
position: relative;
opacity: 0.6;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.statused tr:hover img.CLASSNAAM{
transform: rotate(-10deg);
opacity: 1;
}

.statused tr:hover a.forumtitle{
padding: 3px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
Alle waarden moet je natuurlijk wel even naar eigen inzicht aanpassen. Als je bijvoorbeeld wilt dat de tekst langzamer opzij schuift, of de afbeelding sneller licht wordt, etc. De afbeelding komt ook nog niet helemaal op de goede plek te staan, maar dat zul je met margins en paddings moeten oplossen. Ik hoop dat het lukt =)

Lone Wanderer
Medaille Forumlid
Medaille Forumlid

Oud Beoordeler

Vrouw Aantal berichten : 145
Registratiedatum : 26-07-13
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://hongerspelenRPG.actieforum.com
Lone Wanderer is bedankt door de starter van dit topic.

Re: Vragen over codes

Bericht van Joost op vr 16 aug 2013 - 20:43

Allereerst hartelijk dank, ik kom er zelf alleen niet uit ik heb de CSS compleet geplaatst zoals je zei, en ik heb deze code in de onderdeel omschrijving van een test board geplaatst maar helaas..

Code:
<img src="HIER AFBEELDING LINK" class="CLASSNAAM"/>
Wat bedoelen ze met ''CLASSNAAM'' wat moet ik daar invoeren want ik kom dat ook weer tegen in de CSS.



   Veel Voorkomende Problemen | Forum Gereedschap | 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!

Joost
Beheerder
Beheerder

Man Aantal berichten : 4117
Leeftijd : 25
Taal : Nederlands
Locatie : Nederland
Registratiedatum : 31-08-07
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://hpmagicworld.actieforum.com/ http://ondersteun.actieforum.com/
Joost is bedankt door de starter van dit topic.

Re: Vragen over codes

Bericht van Lone Wanderer op vr 16 aug 2013 - 21:10

Oh, dat ben ik er vergeten bij te zetten xD Alles wat ik in hoofdletters heb gezet, moet je zelf vervangen. Classnaam houdt gewoon in dat je de class een naam geeft, zodat je er in de CSS naar kunt verwijzen. Alles waar CLASSNAAM staat, kun je gewoon zo laten staan of er zelf een naam voor invullen, zolang het in de CSS maar hetzelfde heet als in de code van de boardomschrijving Wink Hoop dat het zo duidelijk is.
Oh, en natuurlijk niet vergeten de link naar de afbeelding in de code van de boardomschrijving te zetten!

Lone Wanderer
Medaille Forumlid
Medaille Forumlid

Oud Beoordeler

Vrouw Aantal berichten : 145
Registratiedatum : 26-07-13
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://hongerspelenRPG.actieforum.com
Lone Wanderer is bedankt door de starter van dit topic.

Re: Vragen over codes

Bericht van Joost op vr 16 aug 2013 - 21:50

Het is gelukt, het werkt heel erg bedankt Lone Wanderer! Very Happy 
Vraag 1 is opgelost, nu alleen op vraag 2 zou ik graag van iemand een antwoord op willen. Razz



   Veel Voorkomende Problemen | Forum Gereedschap | 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!

Joost
Beheerder
Beheerder

Man Aantal berichten : 4117
Leeftijd : 25
Taal : Nederlands
Locatie : Nederland
Registratiedatum : 31-08-07
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://hpmagicworld.actieforum.com/ http://ondersteun.actieforum.com/
Joost is bedankt door de starter van dit topic.

Re: Vragen over codes

Bericht van 10spetter10 op vr 16 aug 2013 - 21:56

Ik heb even het tweede puntje bekeken. Het werkt bij mij maar waarschijnlijk zoek ik het weer veel te ver zoals altijd ... Razz






Eerst heb ik de php-variabelen die je in berichten kan gebruiken zo ingesteld dat je ze ook in de templates kan gebruiken. Want de variabelen in de templates plaatsen er ook tekst bij die je niet nodig hebt. Hiervoor heb ik een tutorial van avacweb gebruikt:
sorry voor de link maar ik vindt nog steeds dat zo een bronnen vermeld moeten worden Embarassed 

Beheerderspaneel Modules Portal & widgets forum widgets beheer

Maak nu een widget met bv naam 'variabelen', use a table type: no en geen titel.
In de source plaats je:
Code:
<div id="variables" style="display:none">
  <span id="FORUMCOUNTUSER">{FORUMCOUNTUSER}</span>
  <span id="FORUMCOUNTPOST">{FORUMCOUNTPOST}</span>
</div>
Plaats daarna de widget in een widget-bar.
Deze widget is niet zichtbaar, als je geen widget-bar hebt dan kan je dit (denk ik) in je overall header zetten.

Maak nu nog een javascript aan, dat op alle pagina's werkt.

Beheerderspaneel Modules HTML & javascript Javascript code beheer

Code:
$(function() {
  var x = document.getElementById('variables').getElementsByTagName('span');
  for (var i = 0, v; (v = x[i++]); ) {
        $('.' + v.id).html(v.innerHTML);
        $('.' + v.id + '-replace').each(function(i, e) {
            e.innerHTML = e.innerHTML.replace( RegExp('{' + v.id + '}', 'g') , v.innerHTML );
        }); 
  }
});


Nu pas je jouw 'index body' template aan.
Beheerderspaneel Display Template Algemeen

Hier vervang je regel 58-86 door:
Code:
      <div id="stats">
         <div class="countpost"><span class="FORUMCOUNTPOST"></span></div>
         <div class="countuser"><span class="FORUMCOUNTUSER"></span></div>
                     <p class="legende">{GROUP_LEGEND}</p>
      </div>
      <div id="onlinelist">
         <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
         <p>
           {L_ONLINE_USERS}
                          <div class="dag_online">{L_CONNECTED_MEMBERS}</div>
                          <div class="rechts">
                            <div class="nu_online">{LOGGED_IN_USER_LIST}</div>
                            <div class="nieuw_lid">{NEWEST_USER}</div>
                          </div>
                     </p>
         <div class="clear"></div>
      </div>


Tenslotte plaats je nog de opmaak in je css. Je kan deze eventueel nog aanpassen.

Beheerderspaneel Display Plaatjes en kleuren Kleuren Cascading style sheet

Code:
.countuser{/*het linkervakje met het aantal leden*/
  float: left;
  background: #00569c;
  border-radius: 0px 6px 6px 0px;
  margin-left: -12px;
  padding: 5px;
}
.countpost{/*het rechtervakje met het aantal berichten*/
  float: right;
  background: #00569c;
  border-radius: 6px 0px 0px 6px;
  margin-right: -12px;
  padding: 5px;
}
.dag_online{/*de lijst met leden die de laatste 24u online waren*/
  float: left;
}
.legende{/*de legende voor de ranken*/
  text-align: center;
}
.rechts{/*het div element dat de ledenlijst met leden nu online en nieuwste lid rechts houdt*/
  float: right;
  width: 250px;
}


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: Vragen over codes

Bericht van Joost op vr 16 aug 2013 - 22:30

Dat is ook gelukt inmiddels, ziet er goed uit alleen zou ik graag wel zo'n vierkant om de gebruikersgroepen zelf willen hebben het ziet er nu zo uit bij mij:



En ik wil het zo hebben:



Als je met je muis over een groep gaat dat deze oplicht in een blauwe kleur, weet je hier ook iets voor? Smile


Laatst aangepast door Joost op vr 16 aug 2013 - 22:35; in totaal 1 keer bewerkt (Reden van aanpassing : Screenshot 1 is aangepast!)



   Veel Voorkomende Problemen | Forum Gereedschap | 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!

Joost
Beheerder
Beheerder

Man Aantal berichten : 4117
Leeftijd : 25
Taal : Nederlands
Locatie : Nederland
Registratiedatum : 31-08-07
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://hpmagicworld.actieforum.com/ http://ondersteun.actieforum.com/
Joost is bedankt door de starter van dit topic.

Re: Vragen over codes

Bericht van 10spetter10 op vr 16 aug 2013 - 23:33

Probeer eens met deze code aan de css toe te voegen.

Code:
.legende a:hover{
  -moz-box-shadow: 0px 0px 4px #1AAAC7;
  -webkit-box-shadow: 0px 0px 4px #1AAAC7;
  box-shadow: 0px 0px 4px #1AAAC7;
  border: 1px solid #1AAAC7;
  color: #1AAAC7;
}
.legende a{
  background-color: #EEEEEE;
  border: 1px solid #C0C0C0;
  display: inline-block;
  line-height: 19px;
  margin: 3px 5px;
  padding: 3px 10px;
  text-shadow: 0 -1px 1px white;
}
.legende{
  text-align: center;
  color: transparent;
}
Ik zie ook dat er geen getal bij jou in de vakjes voor posts en leden staat, heb je misschien je widget-bar op 0 staan?


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: Vragen over codes

Bericht van Joost op za 17 aug 2013 - 8:35

Ik had per ongeluk de widgets zelf uit staan haha, nu is het vakje iets groter en staan er cijfers in alleen zou ik wel zoiets willen:


Het ziet er nu bij mij zo uit:



   Veel Voorkomende Problemen | Forum Gereedschap | 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!

Joost
Beheerder
Beheerder

Man Aantal berichten : 4117
Leeftijd : 25
Taal : Nederlands
Locatie : Nederland
Registratiedatum : 31-08-07
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://hpmagicworld.actieforum.com/ http://ondersteun.actieforum.com/
Joost is bedankt door de starter van dit topic.

Re: Vragen over codes

Bericht van 10spetter10 op za 17 aug 2013 - 10:53

Hmm, voor die tekstjes zal je terug je template 'index_body' moeten aanpassen.

regel 58-62 is normaal heel de div #stats, vervang ze door:
Code:
      <div id="stats">
         <div class="countpost"><span class="FORUMCOUNTPOST"></span><br /><span class="posts_tekst">Berichten</span></div>
                     <div class="countuser"><span class="FORUMCOUNTUSER"></span><br /><span class="user_tekst">Leden</span></div>
                     <p class="legende" id="legende">{GROUP_LEGEND}</p>
      </div>
Voor ongeveer dezelfde opmaak als in je voorbeeld plak je nog deze code in je css:

Code:
.countuser{
  float: left;
  background: url('http://sd-1.archive-host.com/membres/images/142586199450897653/LFD/V4/sprite_barres.png') repeat-x;
  color: #F7F7F7;
  text-shadow: 1px 1px 1px black;
  padding: 3px 8px;
  margin-left: -12px;
  border-radius: 0 6px 6px 0;
  text-align: center;
}
.countpost{
  float: right;
  background: url('http://sd-1.archive-host.com/membres/images/142586199450897653/LFD/V4/sprite_barres.png') repeat-x;
  color: #F7F7F7;
  text-shadow: 1px 1px 1px black;
  padding: 3px 8px;
  margin-right: -12px;
  border-radius: 6px 0px 0px 6px;
  text-align: center;
}
.FORUMCOUNTPOST{
  font-weight: 900;
}
.FORUMCOUNTUSER{
  font-weight: 900;
}
.user_tekst, .posts_tekst{
  font-size: 11px
}


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: Vragen over codes

Bericht van Joost op za 17 aug 2013 - 11:44

Perfect, enorm bedankt iedereen die geholpen heeft alles werkt! Very Happy 
Dan sluit ik me eigen topic.

Aanvraag opgelost en gesloten.



   Veel Voorkomende Problemen | Forum Gereedschap | 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!

Joost
Beheerder
Beheerder

Man Aantal berichten : 4117
Leeftijd : 25
Taal : Nederlands
Locatie : Nederland
Registratiedatum : 31-08-07
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://hpmagicworld.actieforum.com/ http://ondersteun.actieforum.com/
Joost is bedankt door de starter van dit topic.

Re: Vragen over codes

Bericht van Joost op wo 23 jul 2014 - 10:57

Ik heb dit topic even terug verplaatst uit het archief. Ik heb een andere layout die ik destijds gemaakt heb, die draait op de invision versie en ik zou graag de 1e en de 2e vraag weer terug willen plaatsen in de layout zelf alleen werken deze codes weer anders volgens mij.

Zou iemand mij hiermee willen helpen? Bedankt.  Very Happy 



   Veel Voorkomende Problemen | Forum Gereedschap | 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!

Joost
Beheerder
Beheerder

Man Aantal berichten : 4117
Leeftijd : 25
Taal : Nederlands
Locatie : Nederland
Registratiedatum : 31-08-07
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://hpmagicworld.actieforum.com/ http://ondersteun.actieforum.com/
Joost 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