Shop Categories


How to customize the colours of the Front Page Boxes?

Home Forums Agama Pro How to customize the colours of the Front Page Boxes?

Topic Resolution: Resolved
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #8572

    Dear support,
    I’d like to customize the standard colours as well as the hover colours of the front page boxes.
    Can you please post a code plus instructions to customize…

    1) the colour of the title
    2) the colour of the text below the title
    3) the colour of the button border, background and text
    4) the hover colour of the button border, background and text

    And if possible I would love that the colour of the icon changes as well to a specific colour when the button is selected.

    Would be great to edit all of that in the childtheme, so it is not affected by updates.

    Thank you 🙂


    • This topic was modified 6 years ago by PYUREcrew.
    • This topic was modified 6 years ago by PYUREcrew.


    For the wish you have, Insert next codes in Customize->General->Additional CSS:


    #frontpage-boxes h2{


    #frontpage-boxes p{


    #frontpage-boxes .button-border{
        background-color: white;
        color: red;
        border-color: red!important;


    #frontpage-boxes .button-border:hover{
        background-color: yellow;
        color: green;
        border-color: green!important;

    Change the colors per your wish.

    To avoid re-setting the theme after the update, I suggest you use the child-theme.
    Creating a child theme when performing adjustments to your theme’s code can save you a lot of future headaches. Child themes allow you to make changes without affecting the original theme’s code, which makes it easy to update your parent theme without erasing your changes. By creating a child theme, you create a separate set of files that you can use to customize the theme without affecting the original theme at all. Not only does this make updating easier, it also makes sure that you will never ruin your original theme as you are never actually modifying the files. You can always turn off your child theme and fall back on the original.

    If you will need to create the child-theme and migrate your theme with all settings you can follow the steps from THIS post.



    Hey Zex,
    it worked perfectly, thank you! 🙂
    I already use the child theme that you provided with the download, so I think it’s allright as I can do it in the additional css in the customizer – and don’t have to do it in the editor! 🙂

    Above I already asked if it’s possible that the colour of the icon which I use in the frontbox could change too when the button/section is hovered. You didn’t respond to that yet. Is there a way to do this or is it to complicated?

    Nevertheless, big thanks for all your support until now! I really appreciate it!

    Kind regards



    Sorry I missed the question about the Icon color…

    You can use the next code to change the Frontpage-box icon color on hover:

    #frontpage-boxes i:hover{

    Best Regards


    1) okay, that works, but still my question is, if I can have both at the same time.
    I will try to explain it. I want that when I hover the Icon of the front page box the button has it’s hover effect, too – and the other way around, that when I hover the button the icon will have it’s hover effect, too.
    I want to “link/sync” the funtionality of the icon and buttons of the front page boxes.

    –> so if would hover the icon/button the button/icon will change its colour, too.

    2) and furthermore, that I can click on the Icon as well to open the link of the button.

    it’s a gimmick, not essential but for reasons of beauty 😀

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