Styling cookie banner

Resolved lucbito
(@lucbito)

6 years ago

Hi,

I’m trying to adapt the style of the banner to the style of our website.

I’ve found a snippet in this forum & tried to use it for the restyling:

add_action(‘moove_gdpr_inline_styles’,’gdpr_cookie_css_extension’,10,3);
function gdpr_cookie_css_extension( $styles, $primary, $secondary ) {
ob_start();
?>
#moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme {
border: none;
align: right;
background: transparent;
}
.moove-gdpr-light-scheme .moove-gdpr-info-bar-container {
background: #84d0d8;
width: 100%;
bottom: 15px;
box-shadow: inset -1px 1px 46px -20px #333333;
-webkit-box-shadow: inset -1px 1px 46px -20px #333333;
-moz-box-shadow: inset -1px 1px 46px -20px #333333;
-o-box-shadow: inset -1px 1px 46px -20px #333333;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
<?php
$styles .= ob_get_clean();
return $styles;
}

One problem: I can’t center the text and button…

See: http://prntscr.com/shbm2w

Could you give me an indication how to resolve this?

Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author

Moove Agency

(@mooveagency)

6 years ago

Hi @lucbito,

Thanks for using our plugins.

Please provide a link to your site URL in order to help you with the snippet.
These customisations using hooks are working on the requested site only and has a purpose to resolve the CSS conflicts if occurs.
So if you can share the URL we will check this for you.

Hope this helps.

Thread Starter

lucbito

(@lucbito)

6 years ago

Hi,

Thanks for the reply.

You can see the banner on http://www.bito-ibot.be

Kind regards,

Luc

Plugin Author

Moove Agency

(@mooveagency)

6 years ago

Hi @lucbito,

You can try the following code snippet:

add_action('moove_gdpr_inline_styles','gdpr_cookie_css_extension',10,3);
function gdpr_cookie_css_extension( $styles, $primary, $secondary ) {
  ob_start();
  ?>
  #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content {
		margin-left: auto;
		margin-right: auto;
    max-width: 1080px;
    width: 80%;
    justify-content: space-between;
    padding-left: 0;
    padding-right: 0;
	}

	.moove-gdpr-light-scheme .moove-gdpr-info-bar-container {
		background: #eee;
	}

	#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container {
		padding-left: 0;
		padding-right: 0;
	}

	#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton, 
	#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton {
	 	background-color: #84d0d8;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #84d0d8;
    display: inline-block;
    cursor: pointer;
    color: #7f7f7f!important;
    font-size: 18px;
    font-family: PT Serif!important;
    padding: 8px 22px;
    text-decoration: none;
    text-align: center;
    box-shadow: inset -1px 1px 46px -20px #333333;
    -webkit-box-shadow: inset -1px 1px 46px -20px #333333;
    -moz-box-shadow: inset -1px 1px 46px -20px #333333;
    -o-box-shadow: inset -1px 1px 46px -20px #333333;
    -webkit-transition: all .4s ease;
    font-weight: 400;
	}
	#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton:hover, 
	#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton:hover {
		background-color: #89dee9;
	}
	@media (max-width: 767px) {
		#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container {
			padding: 15px 0;
		}
	}
  <?php
  $styles .= ob_get_clean();
  return $styles;
}

Please note, our plugin has an extended banding options, but if it’s not enough, you can always customise the layout using CSS rules like this however this requires some development knowledge. You can always speak to your theme developers for more guidance.

Hope this helps.

Thread Starter

lucbito

(@lucbito)

6 years ago

Hi,

This works perfectly !

Big Thanks !!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Styling cookie banner’ is closed to new replies.