- This topic has 8 replies, 6 voices, and was last updated 7 years, 9 months ago by
plimfec.
- AuthorPosts
- December 29, 2016 at 2:12 pm #1507
rugarerParticipantHi
How do i get the slider to show only a few lines from the page its using.
Please see what I mean on the site –
the slide with Financial card shows the entire content of the page on the slide.
I want only the first line or a few words to appear under the page title!Thanks in advance
December 29, 2016 at 2:21 pm #1508rugarerParticipantUpdate to my question above – Slider showing full content of page
I like the way the theme shows the title of the page and a few lines of text from the page. I have however currently removed it with the CSS code:
.ht-slide-caption{
display: none;
}I would still appreciate some help on how to still show the Page title and a few lines of text only compared to showing the entire content of the page text on the slide!
December 30, 2016 at 10:20 pm #1511frontlineelectricalParticipantRugarer,
I am having the same issue. It’s not just the page text but html code as well. My understanding is that the page title and a subtitle or a read more button is to appear?Did you get an answer? I see not that you have no text at all over the slider?
ThanksJanuary 3, 2017 at 2:19 pm #1521rugarerParticipantHi frontlineelectrical
I havent gotten a response as yet.
I decided to take out all the text for now till someone assists with the issue.
The code i added on the css section (customize them>css section (last section under customize) is as follows:
.ht-slide-caption{
display: none;
}I would still appreciate some help if anyone has figured it out as the title look really cool on the slides
January 5, 2017 at 12:02 am #1539HashKeymasterBasically the slider caption is programmed to show the whole content of the page. So the best way would be use less text for the page that you use as a slider.
Here is the CSS to show only single line of the content
.ht-slide-cap-desc{ white-space:nowrap; overflow: hidden; text-overflow: ellipsis; }January 5, 2017 at 12:06 am #1541larsprandParticipantIs there any CSS to make it so that the title/caption of the slide shows up on the slider, but the descritption and text on page does not?
This is what my slider looks like
January 5, 2017 at 9:38 pm #1548HashKeymaster@larprand Yes, it is possible. Add the below CSS
.ht-slide-cap-desc{display:none}
This will hide the description of the page in the slider.
February 2, 2017 at 2:58 am #1822billyb2ParticipantHi, I’m new here and was looking up another item when I stumbled across this post. I just solved this on our own page and thought you could use this.
The responses above work great for a single line of text. Just in case someone in the future is looking to limit it to n lines of text, you can use the code below.
The slider by default displays all of the text on the page you link to it. In order to make this usable, use the following CSS to limit the text to 3 lines, add an ellipsis, and shrink the text when the window shrinks. You can edit the sizes to fit your style. I added the max-width lines to shrink the text for smaller screens.
Place this in the “Additional CSS” section in the theme (in WordPress)
.hs-slide-cap-desc { display: block; display: -webkit-box; max-width: 100%; height: 3.75em; margin: 0 auto; font-size: 25px; line-height: 1.25em; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
@media screen and (max-width: 720px) { .hs-slide-cap-desc { font-size: 18px; } }
@media screen and (max-width: 580px) { .hs-slide-cap-desc { font-size: 16px; } }March 25, 2017 at 8:18 pm #2587plimfecParticipantThank you very much, billy!
Your code is working great.One thing however:
In your code you use ‘.hs-slide-cap-desc’, but of course this should be ‘.ht-slide-cap-desc’.So this is the (your) right code:
.ht-slide-cap-desc { display: block; display: -webkit-box; max-width: 100%; height: 3.75em; margin: 0 auto; font-size: 25px; line-height: 1.25em; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
@media screen and (max-width: 720px) { .ht-slide-cap-desc { font-size: 18px; } }
@media screen and (max-width: 580px) { .ht-slide-cap-desc { font-size: 16px; } } - AuthorPosts
- You must be logged in to reply to this topic.
