Vragen over codes

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.

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

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 =)

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.

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 Hoop dat het zo duidelijk is.
Oh, en natuurlijk niet vergeten de link naar de afbeelding in de code van de boardomschrijving te zetten!

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

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

---

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  

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;
}

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?

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?

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:

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
}

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

Aanvraag opgelost en gesloten.

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.