Support » Plugin: GDPR Cookie Compliance (CCPA, PIPEDA ready) » Styling cookie banner

  • Resolved lucbito

    (@lucbito)


    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)

    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.

    Hi,

    Thanks for the reply.

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

    Kind regards,

    Luc

    Plugin Author Moove Agency

    (@mooveagency)

    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.

    Hi,

    This works perfectly !

    Big Thanks !!

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