Button style

  • Resolved Johan Yourstone

    (@jyourstone)


    9 years, 5 months ago

    Hello,

    I’m using the Divi theme and for some reason Gwolle Guestbook doesn’t use the button or form styles. WooCommerce gets the styles, but in the guestbook there’s just regular grey buttons and input boxes. I’ve had to add custom CSS for it to get the same style as the rest of the website.

    Is there any way to integrate the Divi button styles with Gwolle Guestbook?

    Guestbook page: http://212.97.134.113/gastbok/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Marcel Pol

    (@mpol)

    9 years, 5 months ago

    Hmm, I really think a theme should style all the buttons on a page.
    Their CSS targets WooCommerce specifically, and also their own contact form.

    I am not really planning to target a ‘.et_pb_button’ class in my plugin, just for this theme. Currently the plugin uses Bootstrap classes like ‘.btn’ and ‘btn-default’.
    If they can tell what classes they support, then I could add it if it is a sensible class name.

    I see they do support ‘.form-submit’ for the div around the input, but all that does is give it a ‘float:right;’, so that doesn’t help.

    Thread Starter Johan Yourstone

    (@jyourstone)

    9 years, 5 months ago

    Ok thanks, I think it’s weird as well that Divi doesn’t support general button styles. I guess I’ll just have to stick with using custom CSS since their support unfortunately doesn’t seem to know much about Divi itself.

    bapakrob

    (@bapakrob)

    9 years, 4 months ago

    Hi Yohan,
    Struggling with the same. Did you solve the issue with custom css and can you share it?

    Thread Starter Johan Yourstone

    (@jyourstone)

    9 years, 4 months ago

    Hello,

    To get the exact same style as the Divi buttons I had to use a workaround with filters, custom CSS and javascript code which isn’t ideal. But to get similar buttons you can use the following custom CSS and just change the colors:

    #gwolle_gb input.btn.btn-default, input.btn.btn-primary {
font-size: 18px;
background: #68121b!important;
padding: 0.3em 1em;
border: 2px solid;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
font-size: 20px;
color: #fff;
cursor: pointer;
font-weight: 500;
line-height: 1.7em !important;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
#gwolle_gb_write_button .btn-default:hover{
padding: 0.3em 1.5em 0.3em 1em !important;
}
#gwolle_gb_write_button:after{
position: absolute;
top:10px;
margin-left: -1em;
opacity: 0;
font-size: 32px;
line-height: 1em;
content: "\35";
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
font-family: "ETmodules" !important;
font-weight: normal;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1;
text-transform: none;
speak: none;
color:#fff;
margin-right: 2em !important;
}
#gwolle_gb_write_button:hover:after{
margin-left:-1em;
opacity: 1;
}
    bapakrob

    (@bapakrob)

    9 years, 4 months ago

    Thanks a lot Johan! Worked very well and did a few color and border edits.
    Rob

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Button style’ is closed to new replies.