Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #24763

    The generic styling for buttons is different than the styling of the buttons created via shortcode, which can look strange when used together.

    An example of this can be seen in my sidebar here: http://aaacampus.aaa.biz/e-learning/

    The top login area uses a flat button, as well as the bottom contact form, but I used a button shortcode for the ‘join the mailing list’ section in the middle, so they don’t match.

    Is there a way to create the flat style buttons via shortcode? Either that or change the flat button style universally to make all buttons have gradients/rounded corners site-wide?

    Thanks,

    Tom

    #124648

    Hi,

    Please add this on your custom.css.

    input[type="submit"] {
    border-radius: 3px;
    background-image: url(../images/layout/bg-button.png);
    background-repeat: repeat-x;
    background-position: 0 0;
    padding: 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    border-style: solid;
    border-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: 600;
    text-align: center;
    max-width: 100%;
    }

    Cheers,

    Ismael

    #124649

    Hey Ismael,

    Thanks for the response, I had to change the directory path a bit, but that worked for the most part. The only issue now is that the hover states are different. Is there a way to make those consistent as well?

    Thanks,

    Tom

    #124650

    Hi,

    Please add this.

    .main_color input[type="submit"]:hover {
    border-color: #E1E1E1;
    background-color: #073E8A;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
    color: white;
    }

    Cheers,

    Ismael

    #124651

    Hey Ismael,

    Unfortunately after adding the code, the only thing that changes on hover is that the border changes to white, which does not match the other buttons. Please advise.

    Thanks,

    Tom

    #124652

    Hi,

    The code works on my end.

    I cannot load your website. I want to check the buttons furthermore.

    Regards,

    Ismael

    #124653

    Hey Ismael,

    The website is working, I’ve left the code as you supplied it so you can see what it’s doing: http://aaacampus.aaa.biz/e-learning/

    Thanks,

    Tom

    #124654

    Kriesi uses following code for the hover effect:

    body .avia-button.avia-color-theme-color, body .avia-button.avia-color-theme-color:hover{
    color:#fff;
    color: rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    Based on the code above I’d use following code:

    .main_color input[type="submit"]:hover{
    color:#fff;
    color: rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    #124655

    Hey Dude,

    Unfortunately this code does not work either as it makes the whole button change color and the text dark grey. Please advise.

    Thanks,

    Tom

    #124656

    Hi,

    Please edit the text widget that contains that form and change the line that says

    <input type="submit" value="Login" name="LOGIN" onclick="submitForm(this); return true;">

    to look like this

    <input class="avia-button avia-icon_select-no avia-color-theme-color avia-size-large avia-position-center  avia-button-wrap avia-button-center  avia-builder-el-6  avia-builder-el-no-sibling" type="submit" value="Login" name="LOGIN" onclick="submitForm(this); return true;">

    Now add the css below to your /css/custom.css OR to quick css located in Enfold > Styling Layout to the text box at the bottom of the page

    .main_color .button:hover, .main_color .ajax_controlls a:hover, .main_color #submit:hover, .main_color .big_button:hover, .main_color .contentSlideControlls a:hover, .main_color #submit:hover, .main_color input[type='submit']:hover {
    background-color: #073E8A;
    border-color: #073E8A;
    }

    Thanks,

    Nick

    #124657

    Hey Nick,

    Thanks for the reply. The ‘Login’ button is now styled correctly on hover, although the ‘Send’ button for the contact form at the bottom of the sidebar does not have a hover state anymore. Is there a way to add the same hover state to that?

    Thanks again,

    Tom

    #124658

    Hi,

    For the lower button and for any future buttons you may encounter, what you do is you take the <input tag that contains type=”submit” , that is standard html syntax for a button. and inside you find the class=”some code” , in your case for button on bottom which is also inside a widget, your code is

    <input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit">

    and then you add the following at the end of the class=”wpcf7-form-control wpcf7-submit” , inside the last quote, without touching what was already inside

    avia-button avia-icon_select-no avia-color-theme-color avia-size-small avia-position-center  avia-button-wrap avia-button-center  avia-builder-el-6  avia-builder-el-no-sibling

    so that your end result for this particular case will be

    <input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit avia-button avia-icon_select-no avia-color-theme-color avia-size-small avia-position-center  avia-button-wrap avia-button-center  avia-builder-el-6  avia-builder-el-no-sibling">

    And this is what you will use to replace the button inside the widget

    Thanks,

    Nick

    #124659

    Got it, works like a charm. Thanks much for the help Nick!

    Tom

    #124660

    Good luck Tom. Enjoy the theme.

    Thanks,

    Nick

Viewing 14 posts - 1 through 14 (of 14 total)

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