Kleur de vakken Stickies en Mededelingen in

Vorige onderwerp Volgende onderwerp Ga naar beneden

  • 0

Tutorial Kleur de vakken Stickies en Mededelingen in

Bericht van TonnyKamper op zo 24 jun 2018 - 18:25

Kleur de achtergrond van de Stickies en Mededelingen in


De volgende turorial stelt je in staat om een specifieke achtergrondkleur in te stellen voor stickies en mededelingen op je ActieForum forum. Op deze manier zullen belangrijke berichten benadrukt worden in je sub-forums.

Deze tutorial is toepasbaar op de volgende forum versies : phpbb2, phpbb3, punbb, en invision

1. Het Javascript


De 1e stap van deze tutorial is het installeren van het JavaScript op je forum. Dit zorgt ervoor dat we een class kunnen toevoegen aan de cellen van de stickies en mededelingen áfbeeldingen. Ga naar:
Beheerderspaneel Modules JavaScript code beheer create a new javascript.

Voordat je enige verandering maakt, verzeker je er eerst van dat JavaScript codes beheer is geactiveerd:
"Enable Javascript code management : Ja"

Als je phpBB2, punBB, of Invision gebruikt, plak dan deze code :

Titel: naar keuze
Plaatsing : In de sub-forums
Code:
$(function() {
  /* add a class to the cells of announcements */
  $('img[src="http://url_image_annonce.jpg"]').closest('tr').addClass('annonce');
  /* add a class to the cells of stickies */
  $('img[src="http://url_image_Note.jpg"]').closest('tr').addClass('Note');
});
Plak deze code voor phpBB3 :
Code:
$(function() {
  /* add a class to the cells of announcements */
  $("dl.icon[style*='http://url_image_annonce.jpg']").addClass("annonce");
  /* add a class to the cells of stickies */
  $("dl.icon[style*='http://url_image_Note.jpg']").addClass("Note");
});
Zorg in beide scripts ervoor dat je de URL's van de afbeeldingen vervangt door degenen die je gebruikt in jouw thema :
- http://url_image_annonce.jpg : De afbeeldings URL gebruikt voor mededelingen
- http://url_image_Note.jpg : De afbeeldings URL gebruikt voor stickies

Als je klaar bent vergeet dan niet op Verzenden te klikken!.

2. De CSS


Nu het script is geïnstalleerd, is er een class toegevoegd aan de cellen van de stickies en mededelingen. We zullen deze classes gebruiken om er een opmaak stijl aan toe te voegen. Ga naar:
Beheerderspaneel Display Kleuren CSS stylesheet

Plak daar de code die correspondeert met jouw forumversie.

Voor phpBB2, punBB en Invision:
Code:
tr.annonce td {background-color:#COLOR!important;} /* modify the background color of announcements */
tr.Note td {background-color:#COLOR!important;} /* modify the background color of stickies */
Voor phpBB3:
Code:
dl.annonce {background-color:#COLOR!important;} /* modify the background color of announcements */
dl.Note {background-color:#COLOR!important;} /* modify the background color of stickies */
Modificaties:
Voor beide versies, vervang #COLOR door de kleurcode van jouw keuze.
- Handige tool : http://www.colorpicker.com/

Notitie:
Als je vertrouwd bent met CSS, kun je een nog perfectere stijl toepassen op de stickies en mededelingen, zoals een specifieke font kleur, een geheel ander font gebruiken, etc..

3.Extra : topic icons, globale mededelingen, etc..


Bovenstaande tutorial is voornamelijk gefocused op het veranderen van de achtergrondkleur van de stickies en mededelingen, je kunt dit ook toepassen op verschillende cellen in je forum door aanpassing van het basis script. Je kunt het bijvoorbeeld ook toepassen op globale aankondigingen gebruikmakend van de URL van de afbeelding geassocieerd met jouw globale aankondigingen, of op topics icons, gebruik makend van de URL's van de afbeeldingen die gebruikt zijn voor jouw verschillende icons.

Bijvoorbeeld: Als we een kleur willen toevoegen aan de cellen waarin de icon zich bevindt, gebruik dan eenvoudig onderstaand script en bijbehorende CSS:

Javascript voor phpBB2, punBB en Invision:
Code:
$(function() {
  /* add a class to topics with the icon Résolu */
  $('img[src="https://imgfast.net/users/2913/10/00/00/smiles/505812.png"]').closest('tr').addClass('resolu');
});
Voor phpBB3:
Code:
$(function() {
  /* add a class to topics with the icon Résolu */
  $("dd.dterm[style*='http://forum.forumactif.com/users/2913/10/00/00/smiles/505812.png']").closest("dl.icon").addClass("resolu");
});
CSS code voor phpBB2, punBB en Invision:
Code:
tr.resolu td {background-color:#COLOR!important;} /* modify the background color */
Voor phpBB3:
Code:
dl.resolu {background-color:#COLOR;} /* modify the background color */
Uitleg:
In het script, veranderen we eenvoudig de URL van de afbeelding en de toegevoegde class: addClass("resolu"); ( dus verandert deze van "annonce" of "Note" naar "resolu" ). Als je deze class niet verandert, zal het script niet correct werken.

Aarzel niet, wees creatief !  Smile


avatar

TonnyKamper
Hulp Moderator
Hulp Moderator

Vrouw Aantal berichten : 348
Geboortedatum : 23-10-54
Leeftijd : 64
Taal : Nederlands, Engels
Locatie : Nederland
Registratiedatum : 15-02-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://www.nederlandheelt.nl/ http://punt.forumactie.com
TonnyKamper 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