Effect Style

Effect Style provides a CSS editor for the current effect's theme — customize front-end styling (colors, sizes, positions, fonts) without touching effect files.

Open it via Effects → Style in the management area.

Theme Settings

The page offers a 20-row CSS editor pre-filled with the complete CSS of the current theme (from the effect's Themes/<name>/Style.css). Taking the default theme of Effect 01 SlideShow H as an example, the CSS has these parts:

1. Navigator skins

The theme ships a full set of Jssor navigator skins that map to the navigator parameters in Effect Options:

CSS classes	Effect parameter	Description
.jssora01 – .jssora22	ArrowNavigator Style	Arrow skins (22 sets), sprite images like images/a01.png
.jssorb01 – .jssorb17	BulletNavigator Style	Bullet skins (17 sets), images/b01.png etc.
.jssort01 – .jssort10	Thumbnail parameters	Thumbnail navigator skins (10 sets)

Picking a skin (e.g. jssorb01) in Effect Options applies the matching .jssorb01 rules here.

2. Theme container styles

Rules prefixed with .Theme_01_Default define the effect's structure:

• Loading layer: .loading;
• Slides area: .slides (with the grab cursor);
• Thumbnail navigator: .thumbnavigator and .thumbsytle_1 / _2 / _3 (three thumbnail list styles, matching the Thumbnail Style parameter of Effect 02);
• Captions: .Description with .Xleft / .Xcenter / .Xright and .Ytop / .Ycenter / .Ybottom positioning classes — exactly what the Description PositionX / PositionY parameters use;
• Video UI: .closeButton, .videoCover, .html5video.

3. Floating thumbnail animation

.FloatTop / .FloatBottom / .FloatLeft / .FloatRight implement the hover slide-in effect for thumbnail navigators (hidden at the edge, revealed on hover), matching the Float options of Thumbnail Position in Effect 02.

4. Mobile adaptation

The @media only screen and (max-width: 767px) query at the end adjusts font sizes and line heights on phones.

Customization Examples

Edit the CSS and click Update. Common tweaks:

/* Larger slide title */
.Theme_01_Default .Description h3 { font-size: 20px; }

/* Brand color for bullet skin 01 */
.jssorb01 div { background-color: #1ab99b; }
.jssorb01 .av { background-color: #fff; }

/* Semi-transparent arrows */
.jssora01l, .jssora01r { opacity: 0.6; }

Back up first

The editor holds the theme's original CSS — copy and save a backup before major changes. If styling breaks, paste the original CSS back to restore. Images referenced in the CSS (e.g. images/a01.png) live in the effect's theme folder via relative paths — no change needed.

Related

• Effect Options — navigator skins and caption positioning parameters
• Effect List — switch effects