Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 16, 2018 at 9:02 am #927979
    ehdavies

    I am trying to use 2 headline rotators to give me 2 changing words in a sentence, e.g. ‘X for Y’ with X and Y both rotating. I have tried this with ‘for’ appended to the first rotating word but I get spaces between the first and second headline rotators, e.g. between the ‘for’ and Y. Currently I have each headline rotator set in its own column which is why I have the spacing.

    But how do I get it to read like its a proper sentence without the spacing? And what are my options if I want to have the sentence left justified or – alternatively – the position fixed on a screen based on the position of the ‘for’ i.e. the X right justified and the Y left justified around this.

    Also, how do I adjust the height of the headline rotator so its flows on from a text block with little padding.

    March 16, 2018 at 2:29 pm #928115
    Nikko

    Hey ehdavies,

    Can you give us a link to the page with your headline rotator? so we can take a closer look. As for adjusting the space, there’s not much option in the rotator but we can try to use css code to adjust it.

    Best regards,
    Nikko

    March 16, 2018 at 11:04 pm #928330
    ehdavies

    Hi Nikko. I’ve provided the information you asked for. Thanks for looking at this.

    March 19, 2018 at 3:54 pm #929109
    Nikko

    Hi,

    Thanks for providing the admin access, I have done the following:

    1. Enabled Custom Css Classes in Enfold > Layout Builder > check Show element options for developers
    2. Changed 1/3 Column to 1/1 and added inline-rotators to Custom Css Classes field
    3. Moved the 2nd headline rotator to the 1/1 Column and removed the other 1/3 Column
    4. Added this css code in Quick CSS (located in Enfold > General Styling: 
      #top .inline-rotators {
    text-align: center;
}

#top .inline-rotators .av-rotator-container {
    display: inline-block !important;
}

    Let us know if you need further assistance :)

    Best regards,
    Nikko

    March 19, 2018 at 6:04 pm #929194
    ehdavies

    Hey Nikko

    This is really, really good thanks. Just 2 things if you can help me some more please. Is there a way to get the joining word to have a static position with the 2 rotating words adjusting around it, i.e. the first word align right and the other align left? Also what’s the best way to reduce the white space. I’ve learn how to do this with naming colour sections but I’m not sure how to name the rotator and do something similar.

    Thanks again

    H

    March 20, 2018 at 7:37 am #929562
    Victoria

    Hi ehdavies,

    Try to adjust the code Nikko gave you like this:

    
#top .inline-rotators .av-rotator-container {
    display: inline-block !important;
    min-width: 130px;
    text-align: left !important;
}

    This way the text will stay static on the left, but there will be a larger gap when the left side phrase is smaller.

    Please let us know if this works for you.

    Best regards,
    Victoria

    March 23, 2018 at 12:58 pm #931955
    ehdavies

    Hi Victoria

    Many thanks for this. I’ve given it a try and there were some gaps left as you indicated. Its still not the look I was after so I have changed direction and gone for three rotators displayed in a column with the joining word in the middle. It looks ok, so thanks for helping me think this through!.

    Thanks

    ehd

    March 25, 2018 at 3:45 am #932535
    Mike

    Hi,
    Glad Victoria was able to help, is there anything else we can assist with on this, or shall we close this?

    Best regards,
    Mike

    March 26, 2018 at 8:24 am #932849
    ehdavies
    This reply has been marked as private.
    March 26, 2018 at 9:25 am #932885
    Nikko

    Hi,

    Glad to hear that! Thanks for using Enfold :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Headline rotator needed twice’ is closed to new replies.