'Hyperlink strepen' onder ieder element van affiliate producten affiliate held.

#1 · 12 oktober 2023, 10:29

Hoi!

Op onze affiliate website hebben wij standaard een streep staan onder iedere hyperlink (zodat het te herkennen is als hyperlink).

Deze strepen komen echter nu ook onder de klikbare onderdelen die getoond worden in de affiliateproduct-elementen van affiliate held (onder afbeelding, titel, en de verkopers, etc). Dit willen wij echter uitzetten.

Weet iemand hoe je de hyperlink strepen voor de affiliateproducten die getoond worden door affiliate held uit kan zetten, zonder voor de hele website uit te zetten dat een streep onder de tekst met een hyperlink staat. Of kan het alleen maar door dit voor de hele site uit te zetten?

Thanks voor jullie reacties!

#2 · 12 oktober 2023, 10:34

Hoi Sten,

Dat komt door je eigen thema styling. Dit kun je makkelijk zelf in je css aanpassen.

Mvg,
Jura

#3 · 12 oktober 2023, 10:41

Hoi Sten,

Bedankt voor je bericht.

Dit ontstaat inderdaad door een instelling in je thema of een custom CSS regel die je hebt toegevoegd.

Om te forceren dat affiliate producten geen onderstreping krijgen, kun je de onderstaande custom CSS toevoegen aan je website.

.ah-affiliate-products-product-title-link, .ah-affiliate-products-product-image-link, .ah-affiliate-products-product-merchant {
text-decoration:none !important;
}

Op die manier worden de afbeelding, titel en verkoper niet meer onderstreept (geforceerd).

Let wel op dat het onderstrepen van alle links ook invloed heeft op andere plugins die je mogelijk gebruikt. Ik weet niet hoe je ervoor gezorgd hebt dat alle links onderstreept worden op je website, maar doorgaans kunnen de meeste plugins dit “gedrag” overschrijven (ook de AH plugin).

Het feit dat dit nu niet lukt, lijkt te komen doordat je de onderstreping “geforceerd” hebt met “!important”. Zie als voorbeeld onderstaande code.

a {
text-decoration:underline !important;
}

De “!important” zorgt ervoor dat dit geforceerd wordt op alle links en daardoor kan bijv. de AH plugin dit gedrag niet meer overschrijven. Vandaar dat ik de bovenste suggestie gaf om vervolgens de code wéér te overschrijven met een “!important”, maar dat is uiteraard geen “best practice”.

Veel gebruik van “!important” dien je dus altijd te voorkomen.

Ik kan je zeker aanraden aan als je met custom CSS werkt, hier wat meer verdieping in te zoeken, zodat je een beter beeld krijgt wat er precies gebeurt in je styling en waarom dit gebeurt.

Laat gerust weten mocht je verder nog vragen hebben.

#4 · 25 oktober 2023, 09:17

Hi Dennis,

Super bedankt voor je uitgebreide reactie! Ik heb deze CSS-code geprobeerd toe te voegen (ook al voordat ik dit topic geopend had), maar zonder succes. Zelfs wanneer ik de “!important” toepas heeft dit geen succes.

Heb er vervolgens zelf ook nog behoorlijk wat uren ingestopt (onder andere extra verdiept in CSS), maar ben er momenteel nog niet uit hoe ik het ‘probleem’ kan verhelpen…

Ik heb in ieder geval nooit zelf de onderstreping “geforceerd” met “!important”. Ik denk dat dit puur uit het WP-thema voortkomt (‘Elyn’) waarin de onderstreping standaard is ingesteld. Heb jij eventuele andere oplossingen? Of denk je dat ik wat verkeerd heb gedaan tijdens het toevoegen van de CSS-code?

Mogelijk dat je ons hier bij kan/wil helpen :)! De website waar het over gaat is overigens http://www.greentourist.nl.

#5 · 25 oktober 2023, 11:57

Het kostte me ook wat moeite, maar heb in ieder geval gevonden waar het streepje vandaan komt.

De reden dat de eerder genoemde zaken niet werkten en waarom ik ook op het verkeerde spoor zat was omdat het geen onderstreping is. Het is een ‘border bottom’ die het streepje zet

dus ergens is er iets in je theme die dit erop zet

a:not(.wp-block-button__link)

border-bottom: var(–wp–custom–link–border–style) var(–wp–custom–link–border–width) currentColor;

Als je dat uitschakeld heeft die geen onderstreeping meer, dus nu is het zoeken wie/wat dat er neer zet 🙂

Jari Dohmen en Sten Bomhof hebben gereageerd op dit bericht.

#6 · 25 oktober 2023, 12:48

Hoi Sten,

@infoeffect-internet-services-nl (Raymond), heeft inderdaad de oorzaak gevonden. Je thema geeft alle links een “border-bottom” waardoor mijn code inderdaad niet werkt.

Als het goed is zou onderstaande code wél moeten werken.

a:not(.wp-block-button__link) {
border-bottom:0 !important;
}

Laat gerust weten of dit het oplost 🙂

Jari Dohmen en Sten Bomhof hebben gereageerd op dit bericht.

#7 · 25 oktober 2023, 13:03

SUPPPERR bedankt Raymond en Dennis, toppers!! Super blij mee, het heeft gewerkt.

Ik vind zelf de strepen onder de ‘normale links’ mooi, dus heb die laten staan door ‘.ah-affiliate-products-product-title-link, .ah-affiliate-products-product-image-link, .ah-affiliate-products-product-merchant’ in de code te gebruiken i.p.v ‘a:not(.wp-block-button__link)’ en het staat nu precies zoals we willen!

Thanks nogmaals :)!

Dennis van de Ven heeft gereageerd op dit bericht.

#8 · 27 oktober 2023, 18:33

Sorry voor mijn onwetendheid, maar waar doe je dat precies dan, en is dat dan voor allemaal weg of specifiek alleen voor dat product?

Bedankt alvast.

#9 · 27 oktober 2023, 20:05

Hoi Nunzio,

Goed dat je die vraag stelt.

Custom CSS voeg je toe onder “WordPress Dashboard > Weergave > Customizer > Extra CSS”.

De onderstreping is vervolgens weg voor alle producten.

Maar let wel op dat de code die ik als laatste aan Sten gaf, te maken had met de “border-bottom” weghalen omdat dat bij zijn specifieke thema nodig was. In een ander thema werkt wellicht de code die ik in het begin gaf van dit topic, beter.

Nunzio heeft gereageerd op dit bericht.

#10 · 28 oktober 2023, 10:54

Bedankt Dennis, die code die je in het begin gaf werkt inderdaad nu voor de producten bij mij ook. Maar zag dat het bij de categorieën de strepen ook nog bleven staan. Zijn deze ook weg te krijgen aangezien ik alleen tekstlinkjes in de content met onderstreping zou willen hebben 🙂