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.

Verander de cursor op je forum

Vorige onderwerp Volgende onderwerp Go down

  • 0

Verander de cursor op je forum

Bericht van Joost op za 31 jan 2015 - 21:16

Verander de cursor op je forum

Installatie

    Om een cursor (oftewel muisaanwijzer) te installeren op je forum, moet je gebruik maken van de CSS. Hierbij zijn er twee mogelijkheden:

    • Cursors die standaard op een computer zitten gebruiker
    • Het creëren, installeren en gebruiken van een eigen cursor

    In de CSS wordt de eigenschap 'cursor' gebruikt om een muisaanwijzer aan te geven. Dit kan op verschillende mogelijkheden worden gebruikt.

    Om een cursor overal op het forum aan te passen, wordt de selector body gebruikt:

    Code:
    <pre class="prettyprint lang-css linenums"><ol class="linenums"><li class="L0"><span class="pln">body </span><span class="pun">{</span></li><li class="L1"><span class="kwd">cursor</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> move </span><span class="pun">;</span></li><li class="L2"><span class="pun">}</span></li></ol></pre>
    Bij een andere cursor als over een link wordt gegaan, wordt a gebruikt:

    Code:
    <pre class="prettyprint lang-css linenums"><ol class="linenums"><li class="L0"><span class="pln">a </span><span class="pun">{</span></li><li class="L1"><span class="kwd">cursor</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> help</span><span class="pun">;</span></li><li class="L2"><span class="pun">}</span></li></ol></pre>
    Maar je kunt ook aan een specifiek element een aparte cursor installeren, zoals bijvoorbeeld voor afbeeldingen:

    Code:
    <pre class="prettyprint lang-css linenums"><ol class="linenums"><li class="L0"><span class="pln">img </span><span class="pun">{</span></li><li class="L1"><span class="pln">&nbsp; </span><span class="kwd">cursor</span><span class="pun">:</span><span class="pln"> pointer</span><span class="pun">;</span></li><li class="L2"><span class="pun">}</span></li></ol></pre>
    Of met elk ander onderdeel van het forum!

A. De standaard cursors

    Deze cursors kunnen worden gebruikt zonder dat het moet worden ingesteld Wink

    Hier staat een lijst met al beschikbare muisaanwijzers:

    default
    pointer
    text
    help
    wait
    progress
    move
    crosshair
    n-resize
    s-resize
    e-resize
    w-resize
    ne-resize
    se-resize
    nw-resize
    sw-resize
    Het is voldoende om een van de bovenstaande waardes achter de eigenschap cursor in de CSS te plakken. Bij die CSS kom je als volgt: Beheerderspaneel >> Display >> Kleuren >>  Cascading Style Sheet. Bijvoorbeeld:

    Code:
    <pre class="prettyprint lang-css linenums"><ol class="linenums"><li class="L0"><span class="pln">a </span><span class="pun">{</span></li><li class="L1"><span class="kwd">cursor</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> move</span><span class="pun">;</span></li><li class="L2"><span class="pun">}</span></li></ol></pre>

B. Gepersonaliseerde cursors

    In deze categorie zijn twee vormen: .cur voor niet-bewegende cursors en .ani voor geanimeerde cursors.

    WarningGeanimeerde cursors zijn eigendom van Internet Explorer en zullen dus niet werken op andere browsers. Warning
    Er zijn veel sites die gratis cursors aanbieden, inclusief de CSS. Je kunt natuurlijk ook je eigen cursor maken, waarover straks meer wordt verteld.

    1. Een cursor creëren

    Er zijn verschillende middelen om dit te doen:

    • Software om cursors te ontwerpen: op het internet staan tal van websites die deze diensten aanbieden, waaronder RealWorld Cursor Editor,  ZNsoft icone maker, AWicon Lite, Greenfish Icon Editor Pro, Sib Icon Editor, etc... Het grootste gedeelte van deze sites werken in principe hetzelfde als Paint en zijn dus niet ingewikkeld, anderen accepteren het importeren van plaatjes van de formaten jpeg, png, gif of zelfs bmp.

    • Grafische software. Photofiltre biedt de mogelijkheid om afbeeldingen te exporteren in een .ico-formaat. Dit kun je simpelweg doen door .cur aan het eind van de afbeeldingsnaam te plakken. Op deze manier wordt de afbeelding dus als cursor opgeslagen op je computer. Bij software als  Photoshop of Gimp, krijg je de mogelijkheid om een afbeelding als icoon op te slaan. Deze kun je vervolgens converteren door middel van een convertor van afbeelding naar cursor.

    • Online cursors maken. Met HTML Basix kun je afbeeldingen naar geanimeerde cursors converteren, maar er bestaan ook generatoren voor niet-bewegende cursors zoals Converthub, I-Convert en anderen die ervoor zorgen dat een afbeelding kan worden omgezet in een .ico-formaat. Voor grafische software is het trucje om de bestandsnaam het achtervoegsel '.cur' te geven en vervolgens te uploaden met een van de bovenstaande sites.

    Denk bij het maken van een cursor aan de volgende dingen:

    • Maak de afbeelding niet te groot: Maximaal 32 x 32 pixels!
    • De achtergrond van de afbeelding moet transparant zijn, anders zal er een kader om de afbeelding komen. Sla de afbeelding dus op als .gif of .png.
    • Het is het beste om de afbeelding een punt in de linkerbovenhoek te geven, aangezien cursors zo horen te werken.
      Bijvoorbeeld:

    2. Je gepersonaliseerde cursor installeren

    Zodra je cursor is gemaakt, kun je deze installeren door middel van de CSS. Hiervoor moet je je cursor uploaden met het formaat .cur of .ani. Dit kun je doen bij Archive-host (Franstalig) en Dropbox.

    Vergeet niet de link die je hebt verkregen bij een van deze sites op te slaan!

    3. De gepersonaliseerde cursor op je forum plaatsen

    We gaan opnieuw de eigenschap 'cursor' gebruiker, deze keer in combinatie met de URL van je zelfgemaakte cursor.

    Pak nu de Cascading Style Sheet erbij. Om de cursor overal te laten verschijnen, doe je hetzelfde als hierboven uitgelegd bij de standaardcursors: We nemen de selector body

    body {
       cursor: url(link van je gehoste cursor), auto;
    }
    ( ,auto zorgt ervoor dat wanneer je link naar je gepersonaliseerde cursor niet meer werkt, er automatisch een standaardcursor voor in de plaats komt)

    Als je het effect van de cursor op een andere manier wilt laten zien, bijvoorbeeld bij links, verander je body in a (of elk ander gewenst element).

    Vergeet de CSS niet op te slaan en voilà, de cursor is op je forum geïnstalleerd!





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