Welcome! To use this support forum, please Login or Join Today!

   

ACF Slider

{name}
RankRank

Total Posts: 35

Joined 2016-05-15

PM

 

Thanks so much.

Should i be using the “insert template” button in the main editing window? How does this interact/ correspond with the template selection under page attributes?

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

The “Insert Template” button injects content templates which just fills the content area with predefined text. Switching the Page template (attributes) basically shows and hides various options such as the three teaser blocks at page top, featured slider selection, hides the page title, etc.

{name}
RankRank

Total Posts: 35

Joined 2016-05-15

PM

 

Ok. Once more, what did I do that was conflicting with the slider?

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

You basically had two sliders on the same page:
http://cl.ly/0H3P3s1P1O1i

The content slider was left as SLIDESHOW_ID which was “undefined”, so it was falling back to the first available slider, this overriding the settings of the Featured Slider.

FYI: The [slideshow] shortcode is used within the content container like so:
http://cl.ly/0h0X0y3Z3g0j
http://themes.simplethemes.com/orion2/shortcodes/#slider

{name}
RankRank

Total Posts: 35

Joined 2016-05-15

PM

 

Ok. Thanks again for the fast replies.

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

No problem. I’ll be here if you have any other questions.

My apologies for the documentation on this one. We just recently re-released this theme so the docs are a work in progress.


Thanks for your patience.

{name}
RankRank

Total Posts: 35

Joined 2016-05-15

PM

 

Trying to understand how to customize css for a slider. I’ve read the theme documentation but still don’t understand. I want to adjust the height of the slider, margins of content text, etc. Which css file do I edit and what classes should i be looking for?

In Appearance/Editor I see 5 stylesheets. Style1.css, style2.css… Why are there 5? what is the difference between each? Should I be selecting one of those to edit and then reference?

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

When you select a preset style from Appearance → Customize → Colors & Presets → Preset Style, the theme loads the corresponding stylesheet and enqueues style{x}.css. e.g; Style 5 = style5.css. This is mainly for the color presets, though.

If you want to customize the CSS of a specific slider, you can use the slider id class for example slider id 1329:

.slider_id_1329 { height:400px;}

Another option would be to use the Advanced tab of the slider to define a custom class:

.my-custom-class { height:400px;}

 

{name}
RankRank

Total Posts: 35

Joined 2016-05-15

PM

 

Got it.

How will I know how to define different elements of each slide? What if I want to move the navigation dots lower, add padding or a left margin to the content text or image of a slide,  etc? How do I refer to these elements?

Also, If i add media (an image) to a slide, how do i keep that image responsive?

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

By default, the slider does just what you see in the demo.

How will I know how to define different elements of each slide?

You can target individual slides from the main tab of the individual slide class.
You can target the slider as an element in CSS from the slider options advanced tab.

There are no settings for the navigation dots except to show or hide them. You can customize the position via CSS like:

ul.slick-dots {bottom:10px;}

To add padding to the slide elements, you can wrap them in a class via HTML or look at their existing classes and add CSS rules.

Also, If i add media (an image) to a slide, how do i keep that image responsive?

The slide thumbnails images (left | right) are already responsive by default.
http://cl.ly/382T2I333L2V

{name}
RankRank

Total Posts: 35

Joined 2016-05-15

PM

 

My heading is displaying above my thumbnail image, not to the right of it above the content text as in the orion demo.

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Can you post a link so I can see what you’re working with?

{name}
RankRank

Total Posts: 35

Joined 2016-05-15

PM

 

Please disregard that last question.

How do I keep my slider’s background image bottom-aligned? When i view on a large monitor, the bottom of my background image gets cut off. I tried adding css to bottom align but can’t get it to work.

My custom class is being overridden by #slider.no-repeat

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Typically, the background image should be the size (or larger) than your slider. If you’re wanting to get it pixel-perfect, you might want to add some custom CSS using the slider id selector or custom slider class.

For example, in my slider the class is slider_id_1641 so the CSS would is:

#slider.no-repeat.slider_id_1641 {
    background-position: center bottom !important;
}

Does that do the trick for you?

{name}
RankRank

Total Posts: 35

Joined 2016-05-15

PM

 

Yes, that worked for me.

Casey - 16 May 2016 09:49 AM

For the sake of example, I also edited the Firm Overview Page to use the “Featured” Page Template so you can see the available options:
http://sqattorneys.com/wordpress/firm-overview/

 

The insert template function in the “page content” area seems pretty buggy. The previews don’t match the template you are choosing.