CODEWITHSUNDEEP
csszurb-foundation
ssdesign
ssdesign

Reputation: 2821

Customizing Zurb Orbit plugin

Can someone point to in the right direction about what I need to do to customize Zurb Foundation-4 "ORBIT" image slider?

There are things that I want to change. For example: - I want the arrow graphics to be custom designed. - I want the bullets graphics to be customized. - I want the bullets background area to customize. - I want the Image Description area NOT to have a dark background and also use custom Google Web Fonts for it etc.

I somehow cant find any documentation on these aspects. Any help is appreciated.

Upvotes: 2

Views: 1706

Answers (2)

jon
jon

Reputation: 95

Check out the answer to this question here: orbit slideshow custom next prev buttons links left right arrows

It worked for me!

Upvotes: 0

von v.
von v.

Reputation: 17108

I want the arrow graphics to be custom designed

There are no images used in the Orbit component. The arrow icons, the previous and next icons, are created in CSS and it's best that you follow the same pattern (of not using images). You can, however, customize it any way you want. Here are the classes you need to look into (and override):

The following are the classes that applies to the background of the "arrow" icons.

.orbit-container .orbit-prev, .orbit-container .orbit-next

Here are the ones for the arrow icons:

.orbit-container .orbit-prev > span

.orbit-container .orbit-next > span

I want the bullets graphics to be customized. - I want the bullets background area to customize

Again no images are used for the bullets and they are created in css. Here's the class you need to look into and modify:

.orbit-bullets li - for all bullets in the Orbit

.orbit-bullets li.active - for the active bullet in the Orbit

I want the Image Description area NOT to have a dark background

This is the class and property that you need to modify

.orbit-container .orbit-slides-container > * .orbit-caption

Having a good knowledge of CSS you can easily override those classes and apply your own.

Upvotes: 3

Related Questions