Najprv predvedieme použitie preddefinovaných štýlov a potom si ukážeme definíciu vlastného štýlu odkazu.
Použitie preddefinovaných štýlov je jednoduché - podľa toho, aký typ odkazu vložíme (interná stránka Typo3, externá stránka, email, odkaz na súbor), RTE automaticky nastaví príslušný štýl. Tento prednastavený štýl samozrejme môžeme neskôr zmeniť.
Takže nám stačí vyrobiť CSS a základné potreby štýlov odkazov máme pokryté.
Obrázok ukazuje štandardné typy odkazov RTE z nastavenia Typical, použité sú štyri štýly.
Vyzerajú rovnako, pretože zatiaľ nemáme nastavené žiadne CSS:
Nižšie máme nastavenie odkazu "Page >" (preddefinovaný štýl internal-link):
RTE.default {
contentCSS = fileadmin/cmstypo3_v3/css/rte_links.css
showTagFreeClasses = 0
enableWordClean = 1
useCSS = 0
}
RTE.default.FE < RTE.default
a.internal-link {
color: #666666;
}
a.external-link-new-window {
color: #ff6666;
}
a.mail {
color: #6666ff;
}
a.download {
color: #66cc66;
}
page.includeCSS {
rte = fileadmin/cmstypo3_v3/css/rte_links.css
}
Po predošlých nastaveniach sa nám odkazy pekne "vyfarbia" podľa priradeného štýlu (na frontende aj backende):
Pridáme štýl odkazu bold-link pre typ odkazu page (odkaz na internú stránku).
Na obrázku je tento štýl použitý na odkaze "Bold link >":
RTE.classesAnchor {
boldLink {
class = bold-link
type = page
titleText = LLL:fileadmin/cmstypo3_v3/xml/locallang.xml:bold-link
}
}
RTE.default {
proc.allowedClasses := addToList(bold-link)
buttons {
link {
properties.class.allowedClasses := addToList(bold-link)
}
}
contentCSS = fileadmin/cmstypo3_v3/css/rte_links.css
showTagFreeClasses = 0
enableWordClean = 1
useCSS = 0
}
RTE.default.FE < RTE.default
RTE.default.FE.FE >
RTE.config.tt_content.bodytext.proc.allowedClasses := addToList(bold-link)
Do súboru pridáme tento blok:
a.bold-link {
color: #666666;
font-weight: bold;
}
page.includeCSS {
rte = fileadmin/cmstypo3_v3/css/rte_links.css
}
Skutočný výstup môžete vidieť tu.
<ul>
<li><a href="index.php?id=34" title="Opens internal link in current window" class="internal-link" >Page ></a></li>
<li><a href="http://www.sitename.com/" title="Opens external link in new window" target="_blank" class="external-link-new-window" >External page ></a></li>
<li><a href="mailto:email@email.com" title="Opens window for sending email" class="mail" >Email ></a></li>
<li><a href="fileadmin/cmstypo3_v3/img/magnetica-logo.png" title="Initiates file download" class="download" >File ></a></li>
<li><a href="index.php?id=34" title="Bold link" class="bold-link" >Bold link ></a></li>
</ul>