(SOLVED) effect bij muis over een link naar een andere website

[roelrutjes]

Hallo,

 

Op mijn webshop heb ik in het infoblok een kopje "links" staan.

Als er op wordt geklikt verschijnt er een scherm met tekst over andere interressante webshops en een link ernaar toe.

De links werken prima, maar als je met de muis over de link beweegt verschijnt er wel een handje , maar ik wil ook graag een effect.

Bijvoorbeeld dat de letters rood kleuren.

Kan dit in de Back Office ingesteld worden en hoe?

Zo niet misschien via de ftp?

 

Groeten, Roel.

Edited September 28, 2012 by roelrutjes (see edit history)

[Kay van Aarssen]

Dit moet in de Stylesheets als je even de link van je webshop hier neer zet kunnen we even kijken.

[Frens]

Je zal eens de link van webshop moeten geven, via BO zal dat niet gaan

[scorpionsworld]

Hallo,

 

Op mijn webshop heb ik in het infoblok een kopje "links" staan.

Als er op wordt geklikt verschijnt er een scherm met tekst over andere interressante webshops en een link ernaar toe.

De links werken prima, maar als je met de muis over de link beweegt verschijnt er wel een handje , maar ik wil ook graag een effect.

Bijvoorbeeld dat de letters rood kleuren.

Kan dit in de Back Office ingesteld worden en hoe?

Zo niet misschien via de ftp?

 

Groeten, Roel.

Stijlgebonden mouse-over effecten kun je instellen middels CSS

[Kay van Aarssen]

Denkt dat ze hier meer de hover effecten bedoelen dus andere kleur/underline enz.

[scorpionsworld]

Denkt dat ze hier meer de hover effecten bedoelen dus andere kleur/underline enz.

hover is mouseover

[Frens]

Het zou ook mousehover moeten heten

[roelrutjes]

Hierbij de site:

www.tiltdesignenantiek.nl

[Kay van Aarssen]

Voeg dit toe aan je global.css

 

 

.block_various_links a:hover {
text-decoration: underline;
}

 

 

Voeg andere dingen toe indien gewenst denk aan :

color: #000000;
font-weight: bold;

 

enz. enz.

Edited September 25, 2012 by djkavaa (see edit history)

[scorpionsworld]

Open global.css in http://www.tiltdesignenantiek.nl/themes/matrice/css/global.css en zoek op regel 192:

div.cms {


float: right;
margin-top: 1.8em;
padding-bottom: 2em;
width: 670px;
}

 

Voeg onder deze regels de volgende regels toe:

div.cms a:hover { color: red }

Waarbij color: red ervoor zorgt dat de linktekst rood zal kleuren wanneer de muis op de link staat. Hier kunnen uiteraard andere css effecten gebruikt

[roelrutjes]

Okay, hartelijk dank voor de supersnelle tips.

Ik ga het morgen proberen en laat weten of het lukt.

Groet, Roel.

[Kay van Aarssen]

Het moest toch bij het informatie block?

[Frens]

Het moest toch bij het informatie block?

 

Hij bedoelde niet het block various links , maar de linken ik de CMS pagina:

http://www.tiltdesig...s.php?id_cms=12

Edited September 25, 2012 by Frens (see edit history)

[Kay van Aarssen]

Dan heb ik verkeerd gelezen excuus.

[scorpionsworld]

Dan heb ik verkeerd gelezen excuus.

Het stond ook niet helemaal duidelijk beschreven

[Frens]

Nee klopt,, zeker met wat ervaring ga je daar het 1e zoeken , afgaande op de informatie

 

 

Nog wat te experimenteren met de "links"

http://www.w3schools.com/cssref/sel_link.asp

Edited September 25, 2012 by Frens (see edit history)

[roelrutjes]

Hallo Frens, scorpionsworld en djkavaa,

 

Ik heb de tip van scorpionsworld opgevolgd en het werkt....

Echter alleen bij de link naar Berryswinkelsantiek en niet bij de andere 4 links.

Ook in andere onderdelen van het infoblok is het "rood oplichten effect" wisselend aanwezig.

Misschien moet ik de links even opnieuw maken of is er een andere reden?

[scorpionsworld]

Hallo Frens, scorpionsworld en djkavaa,

 

Ik heb de tip van scorpionsworld opgevolgd en het werkt....

Echter alleen bij de link naar Berryswinkelsantiek en niet bij de andere 4 links.

Ook in andere onderdelen van het infoblok is het "rood oplichten effect" wisselend aanwezig.

Misschien moet ik de links even opnieuw maken of is er een andere reden?

Heb je tijdens het maken van de pagina via de BO/Admin gebruik gemaakt van opmaak? Ik zie bijv. bij iedere link een

<em>

tag voorbijkomen. Beter is om de opmaak via de CSS te regelen.

 

Let wel: Iedere aanpassing in de css met betrekking tot CMS pagina's heeft effect op alle cms pagina's op de site. Zoals ook bijv.: Over ons, Activiteiten, etc.

[Frens]

De andere links hebben geen a element maar het <cite> element waarvoor de opmaak van Scorpionsworld niet bedoeld is.

 

Het is beter de code op de eigen editor te maken en die in de CMS pagina's te plakken in de HTML weergave zoals onder aangegeven in een eigen div (#) dan worden alleen de elementen in deze div met naam a_elementen (bedenk maar iets) beïnvloed door de onderstaande CSS

 

Hierdoor wordt de HTML niet verklungeld door de matige tekst editor in PS .

 

Verder zijn er nog andere manieren dit was er een , bv een eigen stijl blad maken voor de CMS pagina's en dit in de themes map plaatsen en de link erna in de header.tpl

 

 

/* Zet onderstaande in je global.css onderaan  (toegevoegde opmaak) */
#a_elementen pre a {
a:link: color: #333;
text-decoration:none;}

#a_elementen  pre a:hover {
color:#F00;
text-decoration:underline;
background-color:#FFCC33}

 

 

<div  id="a_elementen">

<pre>
Retro-recherche: Antiek en interieur uit de periode 1920-1940 (de Bilt):
<a href="http://www.retro-recherche.nl/">www.retro-recherche.nl</a></pre>

<pre>
De Toonkamer: Antiek en brocante, tafels, kasten verlichting, stoelen, decoratieve objecten...... (Amersfoort)
<a href="http://www.detoonkamer-antiek.nl/">www.retro-recherche.nl</a></pre>

<pre>
Berry Swinkels antiek: 17e eeuws,18e eeuws en 19e eeuws Engels antiek, Frans antiek, Duits antiek en Hollands antiek (Eindhoven)
<a href="http://www.berryswinkelsantiek.nl/">www.retro-recherche.nl</a></pre>

<pre>
De Spot: vintage design en verzamelobjecten (Eindhoven)
<a href="http://www.de-spot.com/">www.retro-recherche.nl</a></pre>

<pre>
Double ducks: antiek en curiosa (Eindhoven)
<a href="http://www.doubleducks.nl/">www.retro-recherche.nl</a></pre>

</div>

Edited September 26, 2012 by Frens (see edit history)

[roelrutjes]

Oef, dat is een hele uitleg.

Bedankt alvast voor de uitgebreide reacties.

Ik heb inderdaad de links gemaakt via de B.O. van Prestashop.

Ik begrijp nu uit de uitleg van Frens dat de methode Scorpionsworld niet werkt.

Ik heb inmiddels de code:

 

(toegevoegde opmaak) */

#a_elementen pre a {

a:link: color: #333;

text-decoration:none;}

 

#a_elementen pre a:hover {

color:#F00;

text-decoration:underline;

background-color:#FFCC33}

 

Onderaan de Global.css geplakt.

Dat ging goed.

 

Daarna heb ik de code:

 

<div id="a_elementen">

 

<pre>

Retro-recherche: Antiek en interieur uit de periode 1920-1940 (de Bilt):

<a href="http://www.retro-recherche.nl/">www.retro-recherche.nl</a></pre>

 

<pre>

De Toonkamer: Antiek en brocante, tafels, kasten verlichting, stoelen, decoratieve objecten...... (Amersfoort)

<a href="http://www.detoonkamer-antiek.nl/">www.retro-recherche.nl</a></pre>

 

<pre>

Berry Swinkels antiek: 17e eeuws,18e eeuws en 19e eeuws Engels antiek, Frans antiek, Duits antiek en Hollands antiek (Eindhoven)

<a href="http://www.berryswinkelsantiek.nl/">www.retro-recherche.nl</a></pre>

 

<pre>

De Spot: vintage design en verzamelobjecten (Eindhoven)

<a href="http://www.de-spot.com/">www.retro-recherche.nl</a></pre>

 

<pre>

Double ducks: antiek en curiosa (Eindhoven)

<a href="http://www.doubleducks.nl/">www.retro-recherche.nl</a></pre>

 

</div>

 

onderaan de header.tpl geplakt.

Maar toen kreeg ik de mededeling:

 

"in het bestand staan tekens in Unicode indeling die verloren gaan als u dit bestand als een ANSI-tekst bestand opslaat........."

 

Ik heb de code dus nog maar even niet in de header.tpl geplaatst.

 

Hoe moet het nu verder en maakt het iets uit waar ik die code in de header.tpl plak?

[scorpionsworld]

Oef, dat is een hele uitleg.

[...]

 

Hoe moet het nu verder en maakt het iets uit waar ik die code in de header.tpl plak?

De code:

<div  id="a_elementen">

<pre>
Retro-recherche: Antiek en interieur uit de periode 1920-1940 (de Bilt):
<a href="http://www.retro-recherche.nl/">www.retro-recherche.nl</a></pre>

<pre>
De Toonkamer: Antiek en brocante, tafels, kasten verlichting, stoelen, decoratieve objecten...... (Amersfoort)
<a href="http://www.detoonkamer-antiek.nl/">www.retro-recherche.nl</a></pre>

<pre>
Berry Swinkels antiek: 17e eeuws,18e eeuws en 19e eeuws Engels antiek, Frans antiek, Duits antiek en Hollands antiek (Eindhoven)
<a href="http://www.berryswinkelsantiek.nl/">www.retro-recherche.nl</a></pre>

<pre>
De Spot: vintage design en verzamelobjecten (Eindhoven)
<a href="http://www.de-spot.com/">www.retro-recherche.nl</a></pre>

<pre>
Double ducks: antiek en curiosa (Eindhoven)
<a href="http://www.doubleducks.nl/">www.retro-recherche.nl</a></pre>

</div>

Moet je niet in de header.tpl plakken maar in de broncode-weergave van de linken pagina in de BO.

De header.tpl dien je enkel te wijzigen als je gebruik maakt van een eigen css bestand om de css-opmaak voor de cms pagina's aan te passen. Deze css heb je nu toegevoegd aan global.css dus hoef je de header.tpl niet aan te passen.

[Frens]

Het is de bedoeling dat je de code in de CMS pagina (id 12) plakt in de html weergave

 

<div id="a_elementen">

<pre>

Retro-recherche: Antiek en interieur uit de periode 1920-1940 (de Bilt):

<a href="http://www.retro-recherche.nl/">www.retro-recherche.nl</a></pre>

<pre>

De Toonkamer .....enz

 

De header.tpl is nu even niet aan de orde( andere methode)

 

is zie de code onderaan in je global.css staan

 

 

(toegevoegde opmaak) */
#a_elementen pre a {
a:link: color: #333;
text-decoration:none;}

#a_elementen  pre a:hover {
color:#F00;
	text-decoration:underline;
background-color:#FFCC33}

 

de 1e commentaar regel is niet voledig moet zijn

 

/* (toegevoegde opmaak) */

 

/* hiertussen is commentaar is een css style-blad */

 

edit Scorpionsworld had ook al toe een toelichting op mijn post gegeven zie ik nu pas

Edited September 27, 2012 by Frens (see edit history)

[Frens]

 

Ik begrijp nu uit de uitleg van Frens dat de methode Scorpionsworld niet werkt.

 

 

Het lag meer aan de knudde code ....zie je had gemaakt met de PS cms editor

[Frens]

Je moet het wel in de html modus doen>>rechts/midden op het blauwe html icoontje klikken

 

Edited September 27, 2012 by Frens (see edit history)

[roelrutjes]

Ik geloof dat ik er bijna ben.

Alleen die laatste code invoegen lukt me nog niet.

Als ik hem direct in het tekstvak invoeg van: tools / cms / ID12 wijzigen, dan komt de html-tekst ook op de website te staan.

Als ik die tekst niet meteen in het tekstvlak invoeg maar eerst op html bron bewerken klik en dan de tekst invoeg en klik op bewerken dan komt alleen een gedeelte van de tekst in beeld (zonder links).

Wat doe ik nu nog fout?

[Frens]

Ik geloof dat ik er bijna ben.

Alleen die laatste code invoegen lukt me nog niet.

Als ik hem direct in het tekstvak invoeg van: tools / cms / ID12 wijzigen, dan komt de html-tekst ook op de website te staan.

Als ik die tekst niet meteen in het tekstvlak invoeg maar eerst op html bron bewerken klik en dan de tekst invoeg en klik op bewerken dan komt alleen een gedeelte van de tekst in beeld (zonder links).

Wat doe ik nu nog fout?

 

ik zag het, zie post hierboven van mij

Edited September 27, 2012 by Frens (see edit history)

[Frens]

Je kunt nog wat margin geven

 

 

#a_elementen pre {
margin-bottom: 14px;}

 

dit weer onderaan in je global.css

Edited September 27, 2012 by Frens (see edit history)

[roelrutjes]

Het is gelukt alleen kreeg ik eerst overal als link de retrorecherche .

Dit heb ik gewijzigd door niet in de html bron maat gewoon de tekst te wijzigen.

Nu alleen nog een regel open tussen de links (dat lukt me nog niet ook niet al ik een <P> invoeg in de html broncode) en ik ben klaar

Morgen maak ik het af.

Groeten, Roel.

[Frens]

zie weer post hierboven van mij

[roelrutjes]

Je was me weer te snel af.

Het is gelukt!

Nu alleen nog dat oranje kleurtje eruit en ik zal een soortgelijke methode volgen voor de andere info onderdelen zoals b.v. "lampenservice" waar ook links in zitten.

Iedereen hartelijk dank voor de support.

Groeten, Roel.

[Frens]

Fijn !

 

 

je kunt dan volgende verwijderen (kleur paars) en eventueel de regel erboven die zorgt voor de lijn als je met de muis erover gaat

 

#a_elementen pre a:hover {

color:#F00;

text-decoration:underline;

background-color:#FFCC33;

}

Edited September 28, 2012 by Frens (see edit history)

[roelrutjes]

Okay zal ik doen, nogmaals bedankt allemaal.