A very clumsy plugin for someone that wants to create a really simple slider

Hi @sgumby

As I see this topic is the duplicate of the issue mentioned in the support topic:

• https://wordpress.org/support/topic/force-smart-slider-to-use-theme-style/#post-18190197

where I have already gave you suggestions for fixing the mentioned problems. But just in case I copy my message here, too:

As for creating a simple slider without background image:

Our sliders are fully customizable and based on what you described, it seems your core problem is that, you set a background image for the slide.

If you want to create a simple slider without any background image or background color, then you could simply remove the Slide background image or color that you set for the Slide:
https://smartslider.helpscoutdocs.com/article/1724-slide#image

and that way it will be transparent, and you will be able to see the content/background behind the slider.

As for the responsive issue:

When you create the results with simple HTML and CSS, you also use have to use CSS media queries if you want to have good responsive results, as something that looks good in desktop, won’t always look good in mobile view.

Smart Slider 3 also have responsive options, that you can adjust separately for all view:

• https://www.youtube.com/watch?v=GUMeRd4W_bM

basically these responsive settings are generating the media query wrapped style properties if we are speaking about code. So e.g. if you want to reduce the font size in mobile view, then you should simply switch into mobile view, then adjust the Text Scale setting:

• https://www.youtube.com/watch?v=GUMeRd4W_bM&t=53s

If you want to adjust the Text Scale of multiple texts within a container, then you could set the Text Scale on the entire container, and then the text scale of all layers inside would be affected, so you don’t have to adjust them one by one.

If you still have responsive issues, then please export your slider that you experience the problem with:

• https://smartslider.helpscoutdocs.com/article/1728-export-import-slider#export

then open a support ticket at:

• https://smartslider3.com/contact-us/support/?topic=Editing&platform=WordPress&version=Free

describe the problem and send us the .ss3 file and we will take a look at your slider and figure out what’s wrong.

Best regards,
Laszlo.

Hi @sgumby

Sorry, now I see some of that points that you meant, but based on what you described I think there is a misunderstanding on how you can add images to the slider. Below, at the image specific section, I will give you more information regarding this.

As for the custom CSS and paddings:

Indeed our containers such as the “Slide” , the “Content layer”, “Row” and “Column” has 10px padding set by default. You can spot these paddings easily in the editor since if you however over a layer we will display a grayish ( non-active layer ) or blue ( active layer ) overlay indicating the padding size and you can quickly adjust the padding values there by dragging the padding values in the corresponding direction – see attachment:

• https://imgur.com/a/tOK5GQ7

Of course you can adjust these values also in the layer window at the highlighted field. But if you are really looking for a simple CSS solution that reduces the padding of these to 0 in case of every occurence within the slider, then you could achieve that easily with a simple CSS like this:

div[data-sstype="slide"], div.n2-ss-section-main-content, div.n2-ss-layer-row, div.n2-ss-layer-col  {
  padding: 0px!important;
}

this will modify the padding of every slide, content layer, row and column. If you want to target only a specific slider, then you could preffix the selector with the HTML ID of the slider, e.g. if the ID is 21 then, like this:

div#n2-ss-21 div[data-sstype="slide"], div#n2-ss-21 div.n2-ss-section-main-content, div#n2-ss-21 div.n2-ss-layer-row, div#n2-ss-21 div.n2-ss-layer-col  {
  padding: 0px!important;
}

But this way your client won’t be able to adjust these paddings later on, that’s why we typically don’t recommend CSS workarounds.

If you will build a lot of similar slides with exactly the same layout, then what you should rather do is:

A.) build a slide that looks exactly as you want it and adjust the responsive settings, then duplicate the slide:

• https://smartslider.helpscoutdocs.com/article/1764-slider-settings#slide-menu

and replace the texts / images in the layers with the new ones.

B.) in the Pro version you could build the data source in a CSV file and feed that into a dynamic slide with the CSV generator. That way you only need to create 1 “template” slide and then that layout would be applied to all of the slides created by the generator and you could modify all of them in the “template” slide at once. However on this forum we are not allowed to discuss topics about commercial products as per the forum guidelines, so if you would like to know more about this feature, then feel free to contact us over the ticket system:

• https://smartslider3.com/contact-us/support/

and we will give you more information on this topic.

These could speed up the editing process drastically.

Set fonts and colors for the site globally:

Actually this doesn’t depend on the slider, this depends entirely on the styles of your theme, since if their selectors are strong enough then it will override the style of all elements out of the box, including the elements of the slider. If the selectors are not strong enoug, you can always make it stronger by using !important rule. Just to visualize it, here it is an example:
-if your want ALL h1 elements on your site to have red color, and Arial font family then your theme should define these properties for the h1 element with !important rule, like this:

h1{
  color: red!important;
  font-family: 'Arial'!important;
}

in this case if you added a Heading Layer with “H1” selected at the “Tag” setting:

• https://smartslider.helpscoutdocs.com/article/1814-heading-layer

then it would be affected by that style, too. Similarly you can override the style of any other element if you prefer defining styles globally and style customizations within our editor are not a key requirements.

As for the images:

This is where the misunderstanding lies:

You told you want:

• a simple slider that doesn’t make the images a background
• instead you want to add non-background image which have alt tags for SEO

To clarify this, Smart Slider 3 only adds the image as a background if you selected the image for a background specific field, such as the Slide background:

• https://smartslider.helpscoutdocs.com/article/1724-slide#image

but actually even the Slide background image has an Alt tag setting, like you see here:

• https://smartslider.helpscoutdocs.com/article/1724-slide#seo

So I assume you added the slide with the “Image” type:
https://smartslider.helpscoutdocs.com/article/1764-slider-settings#add-slide

if you don’t want any backgrounds, then you should add the slide with the “Blank” type instead ( of course you can also remove the Slide background image of an existing slide as the “Image” type is basically a preset that creates the new blank slide with the selected image as the Slide background ).

On the other hand if you want to add a non-background image then, you should use rather the Image layer:

• https://smartslider.helpscoutdocs.com/article/1833-image-layer

there you can also set an Alt tag.

I hope these tips will resolve your issues.