Splitted module / widget title

You can use an integrated feature to split your module / widget title into 2 parts. This is useful for website design so that you can have a nice title which looks with 2 different styles.

Put the code in the title

To tell the system how to split your title text, you must write a special code in the module / widget title :

Normal [[splitted]]

In frontend it will be rendered like this in the HTML code of your page :

<h3 class="tck-module-title">Normal <span class="tck-title-split">splitted</span></h3>

you can place the double brackets anywhere you want in your title.

Using Joomla : To edit your module title you can do it directly in the Template Creator CK interface by clicking the cogs icon on the block

then click on the Save and close button to save immeditately the module. You can check in frontend that your module has been updated.

 

Style the CSS

According to the HTML code shown in the previous chapter, you will get a new CSS class .tck-title-split that you can use in a custom CSS to make your splitted word(s) looks like you want.

You can go in Parameters >> Custom CSS to write your own code. For example if you want to give a lower font-weight to your splitted part, you can write this :

.tck-title-split {
font-weight: 100;
}

NOTE : if you use the .tck-title-split alone, it will target every splitted parts in the page, for any module / widget. You can create multiple CSS rules and use the blocks ID to target only the module / widget that you want. Example of code that applies only on the left sidebar :

#left .tck-title-split {
font-weight: 100;
}

 

Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
En savoir plus
Analytics
Outils utilisés pour analyser les données de navigation et mesurer l'efficacité du site internet afin de comprendre son fonctionnement.
Google Analytics
Accepter
Décliner