Navigation
Archive / Block grid custom buttons on blue background
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • August 28, 2016 at 7:29 am #1150414
    bak
    Participant

    Hi there

    I have many pages where I use block grid buttons and I style them with CSS

    /*** BLOCK GRID BUTTONS ON BLUE BACKGROUND: WHITE HOVER STATE ***/
    .page-id-1888 .x-block-grid-item .x-btn-block:hover,
    .page-id-1560 .x-block-grid-item .x-btn-block:hover,
    .page-id-9333 .x-block-grid-item .x-btn-block:hover,
    .page-id-8428 .x-block-grid-item .x-btn-block:hover,
    .page-id-1739 .x-block-grid-item .x-btn-block:hover,
    .page-id-8493 .x-block-grid-item .x-btn-block:hover,
    .page-id-9420 .x-block-grid-item .x-btn-block:hover,
    .page-id-1741 .x-block-grid-item .x-btn-block:hover,
    .page-id-8496 .x-block-grid-item .x-btn-block:hover,
    .page-id-9427 .x-block-grid-item .x-btn-block:hover,
    .page-id-1743 .x-block-grid-item .x-btn-block:hover,
    .page-id-9454 .x-block-grid-item .x-btn-block:hover,
    .page-id-8504 .x-block-grid-item .x-btn-block:hover,
    .page-id-1543 .x-block-grid-item .x-btn-block:hover,
    .page-id-1886 .x-block-grid-item .x-btn-block:hover,
    .page-id-9037 .x-block-grid-item .x-btn-block:hover,
    .page-id-1890 .x-block-grid-item .x-btn-block:hover,
    .page-id-9062 .x-block-grid-item .x-btn-block:hover,
    .page-id-9069 .x-block-grid-item .x-btn-block:hover,
    .page-id-9108 .x-block-grid-item .x-btn-block:hover,
    .page-id-9113 .x-block-grid-item .x-btn-block:hover,
    .page-id-1892 .x-block-grid-item .x-btn-block:hover,
    .page-id-1894 .x-block-grid-item .x-btn-block:hover,
    .page-id-2479 .x-block-grid-item .x-btn-block:hover,
    .page-id-9482 .x-block-grid-item .x-btn-block:hover,
    .page-id-8393 .x-block-grid-item .x-btn-block:hover,
    .page-id-9309 .x-block-grid-item .x-btn-block:hover,
    .page-id-1029 .x-block-grid-item .x-btn-block:hover {
    background-color: #fff;
    color: #242e51;
    text-shadow: none;
    }

    Is there a more efficient way to add this design rather than listing each page individually?

    Thanks

    August 28, 2016 at 7:41 am #1150424
    Thai
    Moderator

    Hi There,

    You can try with this CSS:

    .x-block-grid-item .x-btn-block:hover {
background-color: #fff;
color: #242e51;
text-shadow: none;
}

    Hope it helps 🙂

    September 3, 2016 at 3:09 pm #1159904
    bak
    Participant

    Hi there

    This only applies to block grids on certain pages , not to block grid on all pages.

    How do I select them?

    September 4, 2016 at 12:32 am #1160251
    Christopher
    Moderator

    Hi there,

    Please provide us with URL of pages in question where this style doesn’t apply.

    Thanks.

    September 4, 2016 at 2:24 am #1160305
    bak
    Participant
    This reply has been marked as private.
    September 4, 2016 at 4:47 am #1160423
    Christopher
    Moderator

    Hi there,

    If you want the style to apply globally on all pages, then do not target page ID. Page ID should be targeted if we are want to apply the style to a specific page.

    You can add multiple classes to an element. Divide classes with space.

    e.g:

    class-1 class-2 class-3

    Hope it helps.

    September 4, 2016 at 6:20 am #1160472
    bak
    Participant

    Ok got it, thanks

    What is the css code to Adress the class?

    September 4, 2016 at 6:50 am #1160487
    Christian
    Moderator

    It would be .class-1.

    Thanks.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1150414 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>