Slider showing full content of page

Home › Forums › Total › Slider showing full content of page

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 29, 2016 at 2:12 pm #1507
    rugarer
    Participant

    Hi

    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 #1508
    rugarer
    Participant

    Update 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 #1511
    frontlineelectrical
    Participant

    Rugarer,
    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?
    Thanks

    January 3, 2017 at 2:19 pm #1521
    rugarer
    Participant

    Hi 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 #1539
    Hash
    Keymaster

    Basically 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 #1541
    larsprand
    Participant

    Is 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

    http://www.addictionplacement.com

    January 5, 2017 at 9:38 pm #1548
    Hash
    Keymaster

    @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 #1822
    billyb2
    Participant

    Hi, 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 #2587
    plimfec
    Participant

    Thank 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; } }

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.
Scroll Top
Scroll Bottom