By Stephen Walker

Privacy Bar Styles

Share

Over on the Avada Website Showcase group, Tom Dent posted a site that had a very nice privacy bar implementation. It turns out it is just CSS applied to the Avada privacy bar and the basic settings in Avada options for positioning, colors, and content. Tom was kind enough to share the code, so I implemented it here and am passing it on.

The SASS (scss) version

You can use this with a plugin like Script Organizer that compile the code on the fly.

.fusion-privacy-bar{
    margin: 20px!important; 
    max-width: 500px!important;
    width:unset;
	box-shadow: 0 4px 8px rgba(0,0,0,0.4);
	padding: 25px!important;
	border-radius: 10px;
	/* Privacy Bar Main */
	.fusion-privacy-bar-main{display: block!important; margin: 0!important;
		span{margin: 0!important;
			p{margin-top: 0!important; line-height: 20px!important}
			a{text-decoration: underline; display: inline-block; outline: none!important;
				&:hover{text-decoration: none;}
			}
		}
		.fusion-button{
        display: block!important; 
        margin: 20px 0 0!important; 
        border: none!important;
        max-width: none!important;
			&:hover{opacity: 0.8;}
		}
	}
	
	/* Privacy Bar Full */
	.fusion-privacy-bar-full{
        padding-top: 0!important; 
		.fusion-column{width: 100%!important; margin: 0!important;
			h4{margin: 20px 0 5px!important;}
			.fusion-privacy-choices{
				li{display: inline-block;
					label{margin: 0 10px 0 0;
						input{margin: 0;}
					}
				}
			}
			a{text-decoration: underline;
				&:hover{text-decoration: none;}
			}
		}
	}
	
}

This is the compiled CSS

You can add this to your custom CSS.

.fusion-privacy-bar {
  margin: 20px !important;
  max-width: 500px !important;
 width:unset;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  padding: 25px !important;
  border-radius: 10px;
  /* Privacy Bar Main */
  /* Privacy Bar Full */
}

.fusion-privacy-bar .fusion-privacy-bar-main {
  display: block !important;
  margin: 0 !important;
}

.fusion-privacy-bar .fusion-privacy-bar-main span {
  margin: 0 !important;
}

.fusion-privacy-bar .fusion-privacy-bar-main span p {
  margin-top: 0 !important;
  line-height: 20px !important;
}

.fusion-privacy-bar .fusion-privacy-bar-main span a {
  text-decoration: underline;
  display: inline-block;
  outline: none !important;
}

.fusion-privacy-bar .fusion-privacy-bar-main span a:hover {
  text-decoration: none;
}

.fusion-privacy-bar .fusion-privacy-bar-main .fusion-button {
  display: block !important;
  margin: 20px 0 0 !important;
  border: none !important;
  max-width: none !important;
}

.fusion-privacy-bar .fusion-privacy-bar-main .fusion-button:hover {
  opacity: 0.8;
}

.fusion-privacy-bar .fusion-privacy-bar-full {
  padding-top: 0 !important;
}

.fusion-privacy-bar .fusion-privacy-bar-full .fusion-column {
  width: 100% !important;
  margin: 0 !important;
}

.fusion-privacy-bar .fusion-privacy-bar-full .fusion-column h4 {
  margin: 20px 0 5px !important;
}

.fusion-privacy-bar .fusion-privacy-bar-full .fusion-column .fusion-privacy-choices li {
  display: inline-block;
}

.fusion-privacy-bar .fusion-privacy-bar-full .fusion-column .fusion-privacy-choices CSS Version label {
  margin: 0 10px 0 0;
}

.fusion-privacy-bar .fusion-privacy-bar-full .fusion-column .fusion-privacy-choices li label input {
  margin: 0;
}

.fusion-privacy-bar .fusion-privacy-bar-full .fusion-column a {
  text-decoration: underline;
}

.fusion-privacy-bar .fusion-privacy-bar-full .fusion-column a:hover {
  text-decoration: none;
}
/*# sourceMappingURL=privacy.css.map */

Adding animation

I had a request make this slide in from the left or right and this is really easy to do with modern CSS. Simply add a keyframe entry and then call it in the .fusion-privacy-bar class:

.fusion-privacy-bar{
	animation: .6s ease-out 0s 1 slideInFromLeft;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

Originally published on July 9, 2021

Most Advanced WordPress Form Builder

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Quick Tip: Faux Nested Columns

    Overcoming a shortcoming in Avada with some CSS.

  • Targeting the Boxes

    I put together a quick demo to highlight the containers that do not have settings, but that can be targeted with CSS.

  • Food Menu

    This is a style for creating a food menu whit a dashed line between the item and the price.

  • Horizontal Scrolling Columns and Column Overlays

    This weekend I put together to examples as a result of requests and conversations on the Facebook group.

  • Customizing the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.