Custom Color in Blocks & Image as Single Menu Item

  • Unknown's avatar
    ferelgon · Member ·

    Hello!

    I want to change the attributes of the background color of blocks (preferably in rgba since I need transparency) created in pages. The preset colors won’t give room for such configuration (especially opacity/transparency), so I would probably need to use CSS. How can I implement the aforementioned configuration?

    Furthermore, given the fact that I have a premium account and cannot install any plug-ins, is there a way (via CSS or otherwise) to change a single menu item (in this case: the text item “home”) to an uploaded custom image?

    Thanks in advance!

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi @ferelgon, swapping out the menu link to an image is a bit outside the scope of CSS support we offer here, since you’ll need to make design considerations for different screen sizes and what not. But just for the basics to get you started, something like this would work on desktops:

    li#menu-item-6 {
    background-image: url(https://your-image-url.com/image.png);
}

    And you can hide the text with this:

    li#menu-item-6 a {
    opacity: 0;
}

    Regarding block opacity, you could set up a CSS class for that, then specify that class for the block each time you use it, or if all of a certain block type will be the same color and background opacity, you can add that to your CSS.

    If you need more help on that, please send more details. This may help too:
    https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    And for custom work, we recommend UpWork.com.

  • The topic ‘Custom Color in Blocks & Image as Single Menu Item’ is closed to new replies.