Beheer de positie van smileys en afbeeldingen in berichten

Vorige onderwerp Volgende onderwerp Ga naar beneden

Tutorial Beheer de positie van smileys en afbeeldingen in berichten

Bericht van TonnyKamper op di 10 jul 2018 - 19:29

Beheer de positie van smileys en afbeeldingen in berichtenl

Deze tutorial werkt voor bijna alle versies van Actieforum forums en is haalbaar door slechts een kleine toevoeging in de aangepaste Cascading Style Sheet van het forum.

1. Hoe de CSS toe te voegen?


Het is vrij eenvoudig, ga als volgt naar de aangepaste CSS-pagina:

Beheerderspaneel Display Kleuren - CSS tab

Daar moet je aan het einde van het invoervak de codes toevoegen, ​​bijvoorbeeld de volgende code:
Code:
selector { vertical-align: waarde; }
Waarbij het noodzakelijk zal zijn dat je de 'selector' en de 'waarde' vervangt door de naam en de waardes van degene die je wenst te adresseren, zie wat in de volgende twee punten wordt uitgelegd.

Ten slotte hoeft je daarna alleen maar op de knop Valideren te klikken die zich rechts onder het invoervak ​​bevindt.

2. Selectoren voor verschillende versies:


Een CSS selector is zoals de naam al zegt, het selectie gereedschap die de diverse elementen die we willen aanpassen via CSS-eigenschappen zal benoemen en selecteren.

Elke versie heeft zijn eigen structuur en dus zijn de selectors om de afbeeldingen van de berichten aan te passen afhankelijk van de versie.

Voor phpBB2:


We hebben een html-nest:

Vervolgens willen we de eigenschap toepassen op de afbeeldingen in een bericht, zodat we eenvoudigweg de afbeeldingstags (img) kunnen nemen die zich in een tag bevinden met de postbodyklasse (dit wordt eenvoudig geschreven door een naam te plaatsen voor de naam van de klasse .postbody).

Dat brengt ons naar de selector voor phpbb2: (er zijn veel andere mogelijkheden die volgen)
Code:
.postbody img

Voor phpBB3:


We hebben dan dit nest:

Het is hetzelfde als phpBB2 voor de start, we moeten de afbeeldingen (img) selecteren die in een element met de postbodyklasse (.postbody) zitten, maar daarnaast moeten ze in elementen zitten met de klasse-inhoud (.content) die in de tag met de postbody-klasse zitten.

Dat brengt ons naar de volgende phpbb3-selector:
Code:
.postbody .content img

Voor PunBB:


We hebben dit als een html-structuur op het niveau van een bericht:

Het is vrij eenvoudig, selecteer gewoon de afbeeldingen (img) die zich in een element bevinden met de klasse entry-content (.entry-content), die ons deze keer deze selector brengt voor punbb:
Code:
.entry-content img

Voor Invision:


Hier in de versie invision, die weer een eigen structuur heeft:

Zoals in punbb is het vrij eenvoudig, we selecteren de afbeeldingen (img) in een element met de klasse post-entry (.post-entry) die ons de selector brengt voor invision:
Code:
.post-entry img

3. Waardes en hun betekenis:



  • baseline:
    De onderkant van de afbeelding wordt op de hoogte van de basislijn geplaatst (de horizontale lijn die kan worden getekend door de onderkant van de letters b, a, s, u, m, i, e, ... aan te raken maar zou snijden g, p, j, ...).
  • top:
    De bovenkant van de afbeelding staat bovenaan de tekstregel (afhankelijk van de hoogte van de tekstregels zal het resultaat anders zijn).
  • bottom:
    De onderkant van de afbeelding staat onderaan de tekstregel (dit geeft ook een ander resultaat afhankelijk van de hoogte van de lijnen).
  • middle:
    De afbeelding bevindt zich in het midden van de tekstregel.
  • text-top:
    De bovenkant van de afbeelding zal stijgen tot de hoogte van de grootste letter van de regel (de afbeelding zal hoger zijn voor een regel waar alleen "b" staat dan voor regel waar deze alleen "a" is geschreven).
  • text-bottom:
    Het is hetzelfde principe maar dan voor de onderkant (de afbeelding zal dus lager zijn met een regel waar alleen "g" staat dan op een regel waar alleen "a" staat).
  • super:
    Het beeld begint bij de basislijn van de exposanten. Een exponent-tekst is bijvoorbeeld: deze.
  • sub:
    De afbeelding staat op de basislijn van de indexen. Een tekst in index is bijvoorbeeld: dat.
  • maten in px, em, % of ex:
    Het beeld gaat naar de gespecificeerde afstand van de basislijn, als het negatief is, zal het naar beneden zijn en als het positief is naar de top, bijvoorbeeld door 4px te plaatsen, krijgt de afbeelding 4 pixels erbij boven de basislijn:

4. Enkele voorbeelden:


Code:
/* phpbb2 : zet in het midden */

.postbody img { vertical-align: middle; }
Code:
/* phpbb3 : in superscript plaatsen */
 
.postbody .content img { vertical-align: super; }
Code:
/* punbb : plaats 3 pixels onder de basislijn */
 
.entry-content img { vertical-align: -3px; }
Code:
/* invision : ingesteld op basislijn */
 
.post-entry img { vertical-align: baseline; }
avatar

TonnyKamper
Hulp Moderator
Hulp Moderator

Vrouw Aantal berichten : 221
Geboortedatum : 23-10-54
Leeftijd : 63
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