How to select a CSS style?

icon 48 bannerWell, you can use a lot of CSS styled breadcrumb effects and there is no better way than showing them instead of describing them.

When you open the module parameters for the BreadCrumbs CSS module there's also a Style options tab present that contains all the settings for the effects. You can set a breadcrumbs style by selecting it using the Select a CSS style dropdown menu. Below this menu you can set all the parameters for the choosen style. 

Because a picture is better than words here's an overview of the possible effects in the BreadCrumbs CSS Module:

Letter-spacingLetter-spacing Text ShadowText Shadow Text GrowText Grow
Text RotateText Rotate Text BlinkText Blink Text RollText Roll
Text CloneText Clone Text BlurText Blur Bounce Up/DownBounce Up/Down
Bounce Left/RightBounce Left/Right ShockedShocked Border FadeoutBorder Fadeout
Border Bottom LeftBorder Bottom Left Shadow DownunderShadow Downunder  
Be aware these animations use full CSS3 styling and are made compatible as much as possible for all browsers. Some effects may behave 'weird' on certain browsers like Internet Explorer/Edge. This has nothing to do with the sample animations above - so we cannot fix that. The only advice we'll give you is to use a CSS3 compatible browser (e.g. FireFox or Chrome).

After you have selected your desired CSS3 style do start playing with the values for the effects. You can set animation speed, animation timing, scale size, opacity, effect color, etc. The specific CSS options only apply to those described in italic below each parameter label.

AlertOne important thing to remember is that the styling of your breadcrumbs are not overruled by the BreadCrumbs CSS Module. So if you experience strange hover effects like different backgrounds, underlines, etc. we advice you to check your template CSS styles where this could be defined for the breadcrumbs or hyperlinks.