Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 12, 2016 at 7:27 pm #564116
    DigitalEssence

    Hi,

    I’ve got an issue with hr’s on my site.

    I’m running WordPress Version 4.4.1 and Enfold: 3.4.7

    I’ve tried creating a custom hr using the following settings: http://screencast.com/t/XP5drL4NDL

    But all I get is a hr with no icon. See; http://enamay.digitalessence.net/enfold/

    I have removed all of my custom CSS but the issue remains. I get an hr but no icon.

    Then, on another hr issue. I want my own icon in the middle so I set up some custom code as per this fiddle: http://jsfiddle.net/9EFdF/53/

    But in the browser the hr is grey and I can’t change this. I’ve tried adding color: #949300!important; to the CSS but nothing works. You can see the output at: http://enamay.digitalessence.net/ below the 3 columns.

    I’ve made a quick screencast video to illustrate: http://screencast.com/t/68QfaJJX6

    What am I doing wrong. Why isn’t the icon showing in the enfold custom he and why can’t I change the colour of the hr?

    January 13, 2016 at 8:36 am #564413
    Rikard

    Hey DigitalEssence,

    Please send us a temporary admin login so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Thanks,
    Rikard

    January 13, 2016 at 4:51 pm #564802
    DigitalEssence

    Hi,

    I’ve added a user and included the details in the private reply.

    January 13, 2016 at 5:01 pm #564815
    Yigit

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .hr-custom.hr-icon-yes .hr-inner {
    width: 50%!important;
}

    Cheers!
    Yigit

    January 13, 2016 at 5:15 pm #564835
    DigitalEssence

    Hi Yigit,

    I’ve added that code and refreshed but no change.

    January 13, 2016 at 5:20 pm #564841
    DigitalEssence

    Sorry.

    That does work. I can now see the icon.

    Any ideas on my second issue where I’ve got the following code block:

    <div class='hr_icon'>
  <hr color="#949300">
  <img src='http://enamay.digitalessence.net/wp-content/uploads/2016/01/home_page_hr_icon.png'>
</div>

    And the following css

    
.hr_icon {text-align: center; color: #949300!important; width: 100%;}
.hr_icon img { position: relative; top: -70px; }
    January 13, 2016 at 5:27 pm #564846
    Yigit

    Hey!

    Please turn on custom CSS field for ALB elements – kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and give your code block a custom class and then add following code to Quick CSS 

    .your-custom-class hr {
    border-color: #949309;
}

    Regards,
    Yigit

    • This reply was modified 8 years, 11 months ago by Yigit.
    January 13, 2016 at 5:41 pm #564864
    DigitalEssence

    Yigit,

    1) OMG I didn’t know about that custom class code. That is so going to make my life easier. Up until now I have always dropped everything into a colour section then had to use css to hide borders and make it look “normal”. This is so going to speed my development up.

    Big smiles!

    2) Thank you that has fixed the hr issue.

    3) I store all my snippets on my Gist account: https://gist.github.com/DigitalEssence if anyone else finds anything useful there.

    January 13, 2016 at 5:48 pm #564869
    Yigit

    Hi!

    You are welcome, we are always happy to help :)
    Thank you for sharing your snippets :) Let us know if you have any other questions or issues

    Regards,
    Yigit

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Custom hr doesn't show icon’ is closed to new replies.