Vzhľad odkazov#

Odkazy vytvorené Javascriptom sa nijako nelíšia od tých odkazov, ktoré už na stránke sú. Ak je treba ich nejako špeciálne zafarbiť (preštýlovať), treba v nastaveniach Javascriptu nastaviť príslušnú CSS triedu (anchors.class), ktorá sa postará o vzhľad odkazov.

Predpripravené štýly#

Pripravili sme zopár CSS štýlov, ktoré je možné jednoducho použiť. Všetky zhodne začínajú rovnako aita-anchor-XX. Stačí si vybrať a vložiť názov príslušnej CSS triedy (class) do svojich nastavení.

<script>
var AitaSettings = {
    content_element_query: 'div.entry-content',
    affiliate_id: '0123456789',
    anchors: {
        class: 'aita-anchor-01' // <- sem
    }
};
</script>
<script src="https://aita.dognet.sk/js/latest" defer></script>

aita-anchor-01#

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pridá iba čiarkované podčiarknutie. Farbu odkazu ponechá takú, aká je na stránke.

aita-anchor-02#

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pridá za odkaz malý modrý nápis "TIP". Farbu odkazu ponechá takú, aká je na stránke.

aita-anchor-03#

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pridá za odkaz malú modrú ikonku a farbu odkazu zmení na modrú.

aita-anchor-04#

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Podfarbí celý odkaz modrou farbou.

aita-anchor-05#

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Zmení farbu odkazu na modrú a písmo na tučné.

Vlastné štýly#

CSS je súčasťou každej stránky a keďže každá stránka vyzerá a je naprogramovaná inak, nemôžeme napísať jednoznačný návod ako postupovať.

Príklad CSS#

<style>
.moj-cerveny-odkaz {
    color: white;
    background-color: darkred;
    padding: 0.1rem 0.4rem;
}
</style>

Príklad Javascript#

<script>
var AitaSettings = {
    content_element_query: 'div.entry-content',
    affiliate_id: '0123456789',
    anchors: {
        class: 'moj-cerveny-odkaz' // <- sem
    }
};
</script>
<script src="https://aita.dognet.sk/js/latest" defer></script>

Výsledok#

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nulla vel sem scelerisque tempor. Donec pellentesque lectus id purus faucibus, a tincidunt urna fringilla.