Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 17, 2017 at 2:05 pm #822608
    blomki

    Hi, I would like to enlarge the icon of a personnalised horizontal rule, but It seems that many CSS rules are involved in that. Can you help me to reach the result presented in this image ?

    horizontal rule

    July 18, 2017 at 4:47 am #823067
    Rikard

    Hey blomki,

    Thanks for the link, though I couldn’t see that element on the page. Where can we see the actual element?

    Best regards,
    Rikard

    July 19, 2017 at 11:46 am #823879
    blomki

    It’s at the bottom of the page (I removed css tricks, it removed the icon, so I create another HR with default apperance, you can see the result).

    July 20, 2017 at 4:22 am #824327
    Rikard

    Hi,

    Ok, thanks for that. Please try to activate the custom CSS field for all builder elements: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/, then assign a class to the element in question.

    Then you can target it by using CSS like this:

    .your-class .av-seperator-icon:before {
  font-size:50px;
}

    Best regards,
    Rikard

    July 20, 2017 at 10:12 am #824458
    blomki

    Yes, thank you,custom CSS fields are already activated but changing the font-size does not seem sufficient to achieve the expected result :

    hr

    July 20, 2017 at 8:11 pm #824840
    Victoria

    Hi blomki,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.assemblee-hr .av-seperator-icon:before {
    font-size: 34px;
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    July 21, 2017 at 11:05 am #825066
    blomki

    Thank you, I already tried to modify the font-size: 34px; but as I said at the beginning, it seems that many CSS rules are involved in the design of the HR (I tried to modify the line-height but it broke the vertical alignment).

    July 22, 2017 at 10:58 pm #828489
    Mike

    Hi,
    Your site seems to be having JetPack issues, I’ll try again later.
    postimage

    Best regards,
    Mike

    July 25, 2017 at 11:42 am #829582
    blomki

    I have deactivated Jetpack but it does’t work either.

    July 29, 2017 at 11:08 am #831444
    Victoria

    Hi blomki,

    The styles are there and are working. Could you please clear the cache, check again and get back to us.

    Best regards,
    Victoria

    August 7, 2017 at 11:51 am #835312
    blomki

    No it’s not working, if you look closely, you will see that the entypo symbol is truncated at the top and at the bottom:

    truncated

    I need to change
    error

    • This reply was modified 7 years, 4 months ago by blomki.
    August 8, 2017 at 6:32 am #835699
    Rikard

    Hi,

    Please try this as well:

    .av-seperator-icon:before {
    line-height: 50px !important;
}

    Best regards,
    Rikard

    August 8, 2017 at 2:19 pm #835847
    blomki

    Perfect ! Thank you Rikard.

    August 8, 2017 at 5:27 pm #835929
    Sarah

    Hi! We’re glad that the team was able to help you! We’ll close this topic now. For any other questions or issues, feel free to post them here on the forum and we will do our best to assist you.

    For your information, you can also take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/

    We’d also appreciate it if you can take a moment to review our theme if you haven’t already. https://themeforest.net/downloads

    Thank you for using Enfold.
    Cheers!
    Sarah

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Enlarge the icon of a personnalised horizontal rule’ is closed to new replies.