Headings Font Size option (for slider)

Tagged: featured slider

This topic has 27 replies, 3 voices, and was last updated 9 years ago by Sakin.

Viewing 20 posts - 1 through 20 (of 28 total)

1 2 →

Author

Posts
September 8, 2015 at 3:13 pm #66419

Tomáš
Member

Hello, (new.gpf1.cz)
within ‘Font Size Options’ I can find ‘Headings Line Height’ only (not Size, despite included in Theme Instructions).There are no Font Size options within ‘Featured Slider’ option either.

My goal is
(1) to change Headings Font Size
(2) to give it some background so the Text is distinguishable from the image itself (e.g. like on http://www.gpf1.cz main page) – because, no matter what color I chose, Headings text is not sharp enough to be easily readable and eye-catching.

Thanks for advise
Tom

September 8, 2015 at 10:31 pm #66446
Sakin
Keymaster
@Tomáš: Heading line height is correspond to heading font size like h1, h2, h3, h4. But featured slider used different. You have change the slider title and content font size as per your need and add the following css in “Appearance => Theme Options => Custom CSS” box:
```
@media screen and (min-width: 961px) {
    #main-slider .entry-header .entry-title { font-size: 24px; }
    #main-slider .entry-content { font-size: 16px; }
}
```
September 9, 2015 at 6:11 pm #66530

Tomáš
Member

Dear Sakin,
thanks very much for your fast and useful help. Works perfectly.

One additional issue, though: is there a possibility, within the Custom CSS, to apply transparent rectangle area as text background, in order to make the text better visible?

Thanks very much. Appreciated.
Tom

September 9, 2015 at 6:23 pm #66535

Tomáš
Member

Having said that, I’ve figured out the {background-color: something; } parameter, but still working on transparency options 🙂

September 9, 2015 at 6:26 pm #66537

Sakin
Keymaster

@Tomáš: sure no problem.

September 9, 2015 at 6:28 pm #66539

Sakin
Keymaster

@Tomáš: For transparency, you need to use rgba color.

September 9, 2015 at 6:29 pm #66541

Tomáš
Member

Another partial success 😉 I discovered {opacity:0.x} command, but that obviously applies for both text AND background. Any idea how to apply it for background only? 🙂

September 9, 2015 at 6:30 pm #66542

Tomáš
Member

Dear Sakin, can you give me more details on your advise regarding RGBA color, please?

September 9, 2015 at 6:35 pm #66544

Tomáš
Member

I think I understand what you mean: background: {rgba(54, 25, 25, .5)}

Correct? It seems working. Big thanks for the support. Total PRO 🙂

September 9, 2015 at 6:43 pm #66547

Tomáš
Member

I got lucky with your theme. I love it. It’s beautifully empathetic and have functions I desired for so long. Made me happy 🙂

September 9, 2015 at 8:23 pm #66558

Sakin
Keymaster

@Tomáš: Yes, for example you can see the following CSS:
#header-top { background: rgba(255, 255, 255, 0.7); }

Thanks for your appreciation my support and theme. I hope you will support me as well. Please support by providing your valuable review and rating at https://wordpress.org/support/view/theme-reviews/catch-flames?rate=5#postform

Thanks in advance 🙂

September 9, 2015 at 10:54 pm #66572

Tomáš
Member

Sakin, will do for sure!

One more question though… can I somehow move the slider text somewhere else? E.g. right bottom corner?

September 9, 2015 at 11:34 pm #66584
Sakin
Keymaster
@Tomáš: You can add the following css:
```
#main-slider .entry-container {
    bottom: 0;
    left: auto;
    right: 0;
}
```
September 9, 2015 at 11:52 pm #66586

Tomáš
Member

Sakin,
now, I am definitely going to write that review. The only issue I have is 5 stars is not enough 😉

But before I will do that, please, (I really hope it’s last one from me), can you give me a hint how to work with the grey transparent background rectangle? (e.g. to make it less wide). Then… I will become silent! 😉 http://new.gpf1.cz

Current CSS code I use is following:

@media screen and (min-width: 961px) {
#main-slider .entry-header .entry-title { font-size: 35px; background: rgba(64, 64, 64, .8); }
#main-slider .entry-content { font-size: 20px; background: rgba(64, 64, 64, .8); }
}

#main-slider .entry-container {
bottom: 0;
left: 150px;
right: auto;
text-align: left;
}

September 10, 2015 at 12:14 am #66588
Sakin
Keymaster
Ok for that you can replace your css:
```
@media screen and (min-width: 961px) {
    #main-slider .entry-header .entry-title { font-size: 35px; background: rgba(64, 64, 64, .8); }
    #main-slider .entry-content { font-size: 20px; background: rgba(64, 64, 64, .8); }
}
```
with the following css, where I have added in the width. Just change the width as per your need.
```
@media screen and (min-width: 961px) {
    #main-slider .entry-container { width: 50%; }
    #main-slider .entry-header .entry-title { font-size: 35px; background: rgba(64, 64, 64, .8); }
    #main-slider .entry-content { font-size: 20px; background: rgba(64, 64, 64, .8); }
}
```
September 14, 2015 at 6:26 pm #66854

Tomáš
Member

Thank you. I am very satisfied now 🙂 I also provided 5 star review for your Theme 🙂

September 14, 2015 at 6:46 pm #66856

Sakin
Keymaster

@Tomáš: Thanks a lot 🙂

October 12, 2015 at 2:43 pm #68333

Tomáš
Member

Dear Sakin,
wonder why Header Post title is not visible on mobile version of new.gpf1.cz web? Only Post’s short description is. Thank you!
Tomas

October 14, 2015 at 1:03 am #68732
catchinternet
Keymaster
@Tomáš: Try adding in the following css in “Appearance => Theme Options => Custom CSS” box:
```
@media screen and (max-width: 782px) {
    #main-slider .entry-container { left: 2%; width: 96%; }
    #main-slider .entry-header .entry-title { font-size: 16px; }
    #main-slider .entry-content { font-size: 14px; }
}
```
October 17, 2015 at 2:04 am #77968

Tomáš
Member

Hello Sakin,
cat and mouse game I suppose 😉 Thanks for advise. It helped for mobile device.

But now I have lost the text background we discussed earlier within this topic. Transparent background using RGBA code. Thanks for help.
Author

Posts