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.

Kleur forumrij bij nieuwe post

Vorige onderwerp Volgende onderwerp Go down

  • 0

Kleur forumrij bij nieuwe post

Bericht van 10spetter10 op wo 6 jan 2016 - 16:29

Kleur forumrij bij nieuwe post


Wil je eens iets anders dan altijd een gekke afbeelding wanneer er een nieuwe post verschijnt in een forum? Wil je origineel zijn door heel de forumrij te kleuren bij een nieuwe post? In deze tutorial wordt er uitgelegd hoe je dit kan doen, voorbeeld van het resultaat:


Javascript


Om zo de achtergrond van de rij te kleuren maken we gebruik van een javascript. Dit script dien je op te slaan in het javascript code beheer:

Beheerderspaneel Modules html & javascript Javascript code beheer  

Code:
Titel: eigen keuze (vb: alternatief nieuw bericht)
Plaatsing: 'Op de index'
Code: zie hieronder

Om de achtergrond van een forumrij te bewerken wanneer er een nieuw bericht is, gebruiken we een javascriptcode dat specifiek is voor je forumversie. Verder is er ook nog een variant waarbij de 'nieuw bericht' afbeelding weggelaten wordt.

Wanneer je sebiet de code kopieert, moet je nog een kleine aanpassing maken zodat hij werkt op jouw forum. Je moet namelijk de url van je afbeelding 'nieuw bericht' plakken op de daarvoor gemaakte plaats. De url van die afbeelding kan je vinden bij de sectie 'plaatjes beheren' onder de naam 'Forum - Nieuw'.

Kopieer niet zomaar de eerste code die je tegenkomt, de codes werken niet op alle versies!


  • phpBB2, punBB, invision (basis)

    Code:
    $(function() {
       var imgUrl = '--- url van je afbeelding nieuw bericht ---';
       $('img[src="'+imgUrl+'"]').closest('tr').addClass('newpost');
    });

  • phpBB3 (basis)

    Code:
    $(function() {
       var imgUrl = '--- url van je afbeelding nieuw bericht ---';
       $('dl.icon[style*="'+imgUrl+'"]').addClass('newpost');
    });



Dan heb ik nog een extraatje waarbij de afbeelding 'nieuwe post' ook verdwijnt. Als je dan de transparante afbeelding voor 'geen nieuwe post' gebuikt lijkt het alsof je geen afbeeldingen gebruikt op je forum.


  • phpBB2, punBB, invision (uitbreiding)

    Code:
    $(function() {
       var imgUrl = '--- url van je afbeelding nieuw bericht ---';
       $('img[src="'+imgUrl+'"]').closest('tr').addClass('newpost');
       $('img[src="'+imgUrl+'"]').remove();
    });

  • phpBB3 (uitbereiding)

    Code:
    $(function() {
       var imgUrl = '--- url van je afbeelding nieuw bericht ---';
       $('dl.icon[style*="'+imgUrl+'"]').addClass('newpost');
       $('dl.icon[style*="'+imgUrl+'"]').removeAttr('style');
    });



CSS


Tot slot nog de opmaak van de forumrijen. Deze wordt gestyled door middel van css.

Beheerderspaneel Display Plaatjes en kleuren Kleuren Cascading style sheet

Met het javascript dat je juist gekozen hebt maak je een nieuwe class
Code:
.newpost
die je nu kan gebruiken bij het opmaken. Ik heb hieronder drie voorbeeld versies gemaakt waar je zelf eentje uit kan kiezen. Het is natuurlijk mogelijk om een eigen opmaak te creëren.


  1. Versie1



    Code:
    tr.newpost td, dl.newpost {
        background-color: rgb(247,191,191);
    }

  2. Versie2



    Code:
    tr.newpost td:first-child, dl.newpost {
       box-shadow: inset 50px 0px 50px -50px #D800FF;
    }

  3. Versie3



    Code:

    tr.newpost td, dl.newpost {
        background-color: rgba(233, 255, 249,1);
        animation: post 1s infinite;
        -webkit-animation: post 1s infinite;
        -moz-animation: post 1s infinite;
    }
    @keyframes post {
        0%,100%   {background-color: rgba(233, 255, 249,1)}
        50%  {background-color: rgba(233, 255, 249, 0.3)}
    }
    @-webkit-keyframes post {
        0%,100%   {background-color: rgba(233, 255, 249, 1)}
        50%  {background-color: rgba(233, 255, 249, 0.3)}
    }
    @-moz-keyframes post {
        0%,100%   {background-color: rgba(233, 255, 249, 1)}
        50%  {background-color: rgba(233, 255, 249, 0.3)}
    }
    Hiervoor dien je de optie 'Optimize your css' op 'no' te zetten.





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