Opacity for menu blocks

Support Area Forums Mise En Place Opacity for menu blocks

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  Bill Robbins 1 year ago.

Viewing 5 posts - 1 through 5 (of 5 total)
URL to the page in question: http://suroyalindiangrill.com
  • Author
    Posts
  • #37805

    wendy Butcher
    Participant

    How can I get the opacity to be about 60% on the menu blocks?

    #37806

    wendy Butcher
    Participant

    Can I get the navigation bar to have a solid background as a header?

    Also, How can I get the opacity to be about 60% on the text and menu blocks?

    #37809

    Bill Robbins
    Keymaster

    You can have a background be semi-transparent. To add it to a widget, edit the page where that widget is located. Hover over the widget with your cursor and click on the edit link that pops up. On the right hand side you’ll see an “attributes” tab. Click on it and you’ll see a box for Custom CSS. That will apply to the widget element directly. You can specify a background there like this:

    
    	background-color: rgba(255, 255, 255, 0.7);
    

    That is an RGBA color code for white that is 70% opaque. The first three numbers set the actual hue (red, green and blue) and the last one sets the opacity on a scale from 0 (transparent) to 1.0 (completely opaque). Feel free to adjust those to fit your needs.

    For the header, you can add something like this to your child theme’s style.css file:

    
    #header {
    	background-color: rgba(0, 0, 0, 0.4);
    }
    

    Which would give it a black background that is 40% opaque. If you run into questions or trouble, let me know.

    Have a great day,
    Bill

    #37813

    wendy Butcher
    Participant

    The header worked but I’m afraid the opacity in the text block did not for some reason. Also the line under welcome to Royal Indian Grill doesn’t go all the way across. Not sure where that is. I want it to be flush with the text across the width.

    Thanks in advance for you help.

    #37819

    Bill Robbins
    Keymaster

    Did you happen to clear out the background color from the color selector in that widget’s style options? The built in color selector loads after the custom CSS so it would override the custom background color you’ve added.

    The line below the title is a short horizontal rule (HR tag). You could hide it with some CSS and replace it with a bottom border for the widget title if you like:

    
    .widget hr.small {
    	display: none;
    }
    
    .widget .widget-title {
    	border-bottom: 1px solid #333;
    }
    

    Take care,
    Bill

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Opacity for menu blocks’ is closed to new replies.