Fullscreen slider: caption background padding and different colors - Support

Tagged: yigit

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
August 24, 2016 at 10:06 pm #677256

sitesme
Participant

Hi there

I found in another topic a way to change the caption background in a fullscreen slider by adding the following code:
.caption_framed .slideshow_caption .avia-caption-title, .caption_framed .slideshow_caption .avia-caption-content p { background: rgba(52, 177, 199, 1); }

This is working perfectly fine, however, I would like to do the following and I hope you can help me with it:

1) Increase the padding (i.e. the area between the text and the edge of the caption’s background: http://dns.d.pr/vCIm/23BdHXze

2) I’m almost sure this is not possible but let me check. You Enfold support guys are just brainiacs (right Yigit?) :)
Is it possible to have background caption colors alternated from one slide to another? In other words… can I choose the caption background color for each slide within the same fullscreen slider?

I really want to avoid Layerslider as it is way time consuming! Thank you all

August 25, 2016 at 12:21 pm #677464

sitesme
Participant

Some other related questions with the fullscreen slider (please consider these ones as priority than my first topic):

1) How to increase the padding (i.e. the area between the text and the edge of the caption’s background: http://dns.d.pr/vCIm/23BdHXze

2) (I guess this is not possible, please ignore if I am right).

3) How can we add some rounded corners in the caption box?

4) How can I add the font Helvetica Neue Thin to the captions on the slideshow only? Do I need to import the font? I tried to follow some instructions in other posts but without success…

Thank you

August 29, 2016 at 2:21 pm #678903
Andy
Inactive Moderator
Hi,

please stick to one question/issue in one ticket only.

We need a precise link showing the elements in question please, to be able to inspect them. If you’re referring to caption titles, then use this code inside Quick CSS field:
```
.avia-caption-title {
padding: 15px !important;
}
```
and adjust as needed.

Best regards,
Andy
August 29, 2016 at 2:26 pm #678908

sitesme
Participant

Hi Andy,

Please check the webpage in private. I am talking about captions in the fullscreen slider.

These are all tasks I would like to see:

1) How to increase the padding (i.e. the area between the text and the edge of the caption’s background: http://dns.d.pr/vCIm/23BdHXze

2) How can we add some rounded corners in the caption box?

3) How can I add the font Helvetica Neue Thin to the captions on the slideshow only? Do I need to import the font? I tried to follow some instructions in other posts but without success…

Thank you

August 29, 2016 at 2:59 pm #678944
Yigit
Keymaster
Hi!

Please add following code to Quick CSS
```
.caption_framed .slideshow_caption .avia-caption-content p {
    padding: 30px;
    border-radius: 10px;
    font-family: "HelveticaNeue-Light";
}
```
Regards,
Yigit
August 29, 2016 at 3:02 pm #678950

sitesme
Participant

Perfect Yigit :) Thank you

The only problem is with the font. It doesn’t seem to work. Perhaps I need to embed that specific font into Enfold?

Thank you a lot!

August 29, 2016 at 3:06 pm #678954
Andy
Inactive Moderator
Hi,

thanks for the link.
1.) Use this code:
```
.avia-caption-content p {
padding: 30px !important;
}
```
and adjust as needed.

2.) Use this code:
```
.caption_framed .slideshow_caption .avia-caption-title, .caption_framed .slideshow_caption .avia-caption-content p {
border-radius: 20px;
}
```
and adjust as needed.

3.) Yes, you need to import it. Then you can use this code:
```
.avia-caption-content p {
font-family: 'heveltica neue thin';
}
```
Best regards,
Andy
August 29, 2016 at 3:09 pm #678956

Yigit
Keymaster

Hi!

In that case, please refer to this post – http://justcreative.com/2013/01/22/how-to-use-custom-fonts-with-font-face-on-wordpress/ and add the fonts to your server

Best regards,
Yigit

August 29, 2016 at 3:19 pm #678971

sitesme
Participant

Hmmm…

All points are ok, except the last one regarding the font.

Even if I add Raleway (which is a Google font), it doesn’t work. Do I really need to add font as a custom font? Is there a way I can use an alternative Google font or embed it on CSS directly without messing up with the custom font instructions? (They seem too complex for my skill-set).

Thank you Andy and Yigit

August 29, 2016 at 4:24 pm #679007
Yigit
Keymaster
Hey!

Please try changing code to following one
```
.caption_framed .slideshow_caption .avia-caption-content p {
    padding: 30px;
    border-radius: 10px;
    font-family: "HelveticaNeue-Light" !important;
}
```
If that does not help, please post FTP and WP admin logins here privately.

Cheers!
Yigit
August 29, 2016 at 4:36 pm #679023

sitesme
Participant

No luck unfortunately with the font (thanks for the great help though).
Please check the details in PVT.

Many thanks.

August 29, 2016 at 4:54 pm #679034

Yigit
Keymaster

Hey!

Please see private content field below

Cheers!
Yigit

August 29, 2016 at 5:00 pm #679038
sitesme
Participant
Perfect Yigit, many thanks for your help.

For future reference. Is there any code generator for the font calling code added on my CSS file?
```
@font-face {
	font-family: 'Helvetica Neue';
	src: url('fonts/HelveticaNeue-Thin.eot');
	src: url('fonts/HelveticaNeue-Thin.eot?#iefix') format('embedded-opentype'),
		url('fonts/HelveticaNeue-Thin.woff') format('woff'),
		url('fonts/HelveticaNeue-Thin.ttf') format('truetype'),
		url('fonts/HelveticaNeue-Thin.svg#HelveticaNeue-Thin') format('svg');
	font-weight: 100;
	font-style: normal;
}
```
Or is this a “manual” code that we need to apply on every custom font?

Thank you
August 29, 2016 at 5:07 pm #679048

Yigit
Keymaster

Hi!

You can use a website such as this one – http://transfonter.org/ :)

Best regards,
Yigit
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.