Pricing Header

Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #25868
    Fun LabFun Lab
    Participant

    Hi there, I was wondering if it was possible to change the header block in the pricing to a different colour for each pricing added? And if they are not highlighted.

    Thanks,

    #25886
    RaghavendraRaghavendra
    Moderator

    Do you have a page where you have this live? I can suggest the required custom CSS to make this happen quickly if I can take a look at the page with the pricing added. Pls post the same as a private reply here.

    #25887
    RaghavendraRaghavendra
    Moderator

    I found the following custom CSS for changing colors –

    .pricing-table .top-header {
        background-color: #983434;
        border-color: #7b2e2e;
    }
    
    .pricing-table .plan-header {
        background-color: #772a2a;
    }
    
    .pricing-table .pricing-plan.highlight .top-header {
        background-color: #3f8879;
        border-color: #20543f;
    }
    
    .pricing-table .pricing-plan.highlight .plan-header {
        background-color: #255449;
    }
    
    .pricing-table .plan-price .text {
        background-color: red;
    }

    Hope this helps.

    #25892
    Fun LabFun Lab
    Participant
    This reply has been marked as private.
    #25895
    Fun LabFun Lab
    Participant
    This reply has been marked as private.
    #25935
    Fun LabFun Lab
    Participant

    Hello,

    I was just following this up. Is it possible to have each header and its buttons to be individual colours?

    Thanks!

    #25939
    VeenaVeena
    Moderator

    Can you pls set only one highlighted pricing plan for each pricing plan row so that i ll be able to suggest required custom CSS.

    Thanks.

    #25960
    Fun LabFun Lab
    Participant

    I have only made one highlighted now, however, I would like all blocks to be the same height therefore, I would only choose to have it not highlighted for all if there is a code that would suit?

    Thanks so much!

    #25984
    VeenaVeena
    Moderator

    You can use the below custom CSS –

    .pricing-plan.fourcol .top-header {
        background-color: red;
    }
    .pricing-plan.fourcol.highlight .top-header {
        background-color: blue;
    }
    .pricing-plan.fourcol.last .top-header {
        background-color: black;
    }
    .pricing-plan.sixcol.highlight .top-header {
        background-color: yellowgreen;
    }
    .pricing-plan.sixcol.last .top-header {
        background-color: blueviolet;
    }
    

    And for changing button color you can use the css like below-

    .pricing-plan.sixcol.highlight .button {
        background-color: yellowgreen;
    }
    
    #25988
    Fun LabFun Lab
    Participant

    That’s almost what I am after. I just need a code for the middle column colors when it is not highlighted? Thanks!

    #26005
    RaghavendraRaghavendra
    Moderator

    It is really hard for us to support customizations like these. And you would be spending a lot of time waiting on simple CSS that you can do on our own within an hour’s effort. With little learning it is easy to get going on these types of customizations with the help of Developer tools or FireBug. Pls have a look at the post below –

    http://support.livemeshthemes.com/forums/topic/how-to-fix-a-few-styling-issues-instantly/

    The video is a bit old but you should be able to find many similar ones by searching on youtube. Thanks for your understanding.

    #26013
    Fun LabFun Lab
    Participant
    This reply has been marked as private.
    #26038
    RaghavendraRaghavendra
    Moderator

    Great to know you are already using developer tools.

    You can target individual columns using nth-child selector –

    .pricing-plan.zero-margin.fourcol:nth-child(2) {
        background: red;
    }

    More details about this selector here –

    https://css-tricks.com/almanac/selectors/n/nth-child/

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.