Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 3, 2013 at 7:29 pm #183982
    bencwitt

    First of all I would like to say that this is an amazing theme. I have used Avada & uDesign on some of my other sites, but the Enfold theme is truly amazing. I anticipate switching all my websites over to this theme in the very near future. You folks have done an amazing job on this theme, keep up the good work.

    When I was searching for a new theme I came across Enfold and Inovado and thankfully came to the decision in choosing Enfold. My only complaint so far (and granted this is me being picky as this theme is far superior) is that I preferred Inovado “Call to Action” design over Enfolds Promo Boxes. I thought the design gave it a certain dynamic that made it truly stand out on the page like a call-to-action button should.

    I am a novice at CSS so I tried figuring out a way to style the promo boxes to give it that extra “WOW” factor, but I am having a very difficult time doing it. Would it be possible to assist me or point me in the right direction on how I could add some style (border, h2, p) to your promo boxes so that they have a similar appearance to that of Inovado’s “Call Out” feature? Inovado Call Out Feature

    November 3, 2013 at 7:30 pm #183986
    bencwitt
    This reply has been marked as private.
    November 3, 2013 at 7:48 pm #183989
    Josue

    Hey!

    Add this code to the Quick CSS:

    .avia-button.avia-icon_select-yes.avia-color-green.avia-size-large.avia-position-right {
    background: #349acd;
    border: 0 !important;
}
.av_promobox h2 {
    color: #349acd;
    text-transform: none !important;
    letter-spacing: 0px !important;
    font-size: 24px;
    margin-bottom: 0;
}
.av_promobox p{
    margin-top: 0;
    margin-bottom: 5px;
}
.av_promobox {
    background: #fff !important;
    padding: 15px;
    border: 10px solid #f2f2f2 !important;
}

    Result:

    Cheers!
    Josue

    November 3, 2013 at 9:34 pm #184014
    bencwitt

    Josue,

    On this page: http://benwitt.com/contact I created a promo box using the code that you sent me, but I was hoping that the border could be styled more like the promo box above it.

    I tried adding a background background: #ffffff url(https://benwitt.com/wp-content/uploads/2013/11/CTA-Border.png) !important; to the css you sent me but it just styles the inside of the promo box instead of around it like the one above it on my website.

    Any suggestions?

    November 3, 2013 at 9:38 pm #184015
    bencwitt

    I forgot to mention that I was above to create that promo box with the correct border with some css, but I couldn’t figure out how to get the button styled correctly. I just added another promo box to my website page I sent you with what happens when I try to add the Enfold button to the promo box using the correct styling I am trying to achieve.

    November 4, 2013 at 5:14 pm #184339
    Josue

    Hi!

    .cta-content have to be floated, add this too:

    .cta-content{ 
float: left;
}

    Cheers!
    Josue

    November 4, 2013 at 5:54 pm #184361
    bencwitt

    Hoot that made the difference. I actually that in there but had a typing error in the class and didn’t realize it until you replied back. I had to make a few minor changes for responsive screens but it looks JUST as I had hoped.

    Thank you so much for your assistance.

    November 4, 2013 at 5:56 pm #184362
    Josue

    You are welcome, glad we could help :)

    Regards,
    
Josue

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Promo Box – Styling Border Radius’ is closed to new replies.