Navigation
Archive / 1739 / button alignment and color
This is archived content. Visit our new forum.

Tagged: 

1 2
  • Author
    Posts
  • June 26, 2016 at 5:53 am #1059971
    bak
    Participant

    Hi there

    I have block grid buttons and would like to achieve the following
    #1 the buttons should be left aligned on desktop view
    #2 in hover state they should turn white background with blue writing

    June 26, 2016 at 6:00 am #1059974
    bak
    Participant
    This reply has been marked as private.
    June 26, 2016 at 6:52 am #1060018
    Christopher
    Moderator

    Hi there,

    Please find this code :

    .page-id-1739 div#x-section-1 .x-block-grid {
    text-align: center;
    max-width: 598px;
    margin-left: auto;
    margin-right: auto;
}

    And update it to :

    .page-id-1739 div#x-section-1 .x-block-grid {
    max-width: 598px;
}

    Add this :

    .x-block-grid-item .x-btn-block:hover {
    background-color: #fff;
    color: blue;
}

    Hope it helps.

    June 26, 2016 at 9:47 am #1060129
    bak
    Participant
    This reply has been marked as private.
    June 26, 2016 at 10:12 am #1060146
    Rupok
    Member

    Hi there,

    Thanks for updating. You can use preceding page ID :

    .page-id-1888 .x-block-grid-item .x-btn-block:hover {
    background-color: #fff;
    color: blue;
}

    Hope this makes sense.

    June 26, 2016 at 10:20 am #1060151
    bak
    Participant

    thanks. is it possible to use a class as well as I have many pages

    would it be:

    .my-class .x-block-grid-item .x-btn-block:hover {
    background-color: #fff;
    color: blue;
    }

    June 26, 2016 at 10:30 am #1060162
    Christian
    Moderator

    If you add a class to the Block Grid Item, that would be

    .x-block-grid-item.my-class .x-btn-block:hover

    Hope that helps. 🙂

    June 26, 2016 at 2:40 pm #1060342
    bak
    Participant
    This reply has been marked as private.
    June 26, 2016 at 7:11 pm #1060534
    Rad
    Moderator

    Hi there,

    I just checked and your CSS works. The button has white background and blue text on hover. Please clear yuor browser cache before testing.

    Thanks!

    June 27, 2016 at 2:14 am #1061008
    bak
    Participant
    This reply has been marked as private.
    June 27, 2016 at 2:20 am #1061020
    Christopher
    Moderator

    Hi there,

    Please add greenbutton class to the other button and try this code:

    a.x-btn.my-greenbutton:hover {
    background-color: #fff;
    color: blue;
}

    Hope it helps.

    June 27, 2016 at 2:30 am #1061035
    bak
    Participant

    Hi there

    so the right button works now but the left is still with dark blue background

    June 27, 2016 at 2:39 am #1061044
    bak
    Participant
    This reply has been marked as private.
    June 27, 2016 at 3:05 am #1061086
    Christopher
    Moderator

    Hi there,

    In previous replies you asked if it’s possible to use specific class name to affect all similar buttons, and the answer was yes. my-greenbutton was the only custom class I could inspect. You can add another class to these buttons, e.g my-greenbutton dark-bg.

    And update your code to :

    a.x-btn.dark-bg:hover {
    background-color: #fff;
    color: blue;
}

    If you don’t want to add another class name, simply target pages ID :

    .page-id-1888 .x-block-grid-item .x-btn-block:hover {
    background-color: #fff;
    color: #242e51;
}

    See the attachment.

    Hope that helps.

    June 27, 2016 at 4:51 am #1061199
    bak
    Participant
    This reply has been marked as private.
  • Author
    Posts
1 2
  • <script> jQuery(function($){ $("#no-reply-1059971 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>