How to select a CSS style?
Well, 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.
One 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.