January 11, 2019

How to Modify Display Cookies Bar with CSS?

If you have ever given a thought about modifying the Display of Cookies Bar with CSS, then this post is very much for you. In this post, we will learn to add CSS codes only to change the appearance of Cookies Warning Bar displayed on the blog. This is completely risk-free until you try to make it attractive only and not mess with the falsified declaration.


How to Modify Display Cookies Bar with CSS?

I came up with two different types of cookies bar designs, hope you'll find this interesting.


How to Modify Display Cookies Bar with CSS?

Here I will give two choices of themes, namely dark and light background. For those who want to try it, please follow these simple steps:

1. Log in to Blogger> Template> Edit HTML> Add the code below before ]]> </ b: skin> or </ style>

For Dark Version

/* Custom Cookies Info Dark */
.cookie-choices-info{background-color:rgba(56,66,75,.97)!important;line-height:normal!important;top:initial!important;bottom:0!important;font-family:inherit!important;-webkit-transform:translateZ(0)}
.cookie-choices-info .cookie-choices-text{font-size:14px!important;color:#cee6ea!important}
.cookie-choices-info .cookie-choices-button{color:#fff!important;margin-left:5px!important;padding:3px 6px!important;background:#3fbdf3!important;border-radius:2px;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:nth-child(2){background:#f68c2e!important;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:nth-child(2):hover{background:#282f36!important;transition:all .1s linear}



For Light Version

/* Custom Cookies Info Light */
.cookie-choices-info{background-color:rgba(255,255,255,.99)!important;line-height:normal!important;top:initial!important;bottom:0!important;font-family:inherit!important;box-shadow:0 0 10px rgba(0,0,0,0.2);-webkit-transform:translateZ(0)}
.cookie-choices-info .cookie-choices-text{font-size:14px!important;color:#222!important}
.cookie-choices-info .cookie-choices-button{color:#fff!important;margin-left:5px!important;padding:3px 6px!important;background:#3fbdf3!important;border-radius:2px;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:nth-child(2){background:#f68c2e!important;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:nth-child(2):hover{background:#999!important;transition:all .1s linear}

2. Save the template and please open the blog by using a special domain (ccTLD) of the European region, such as blogspot.it, blogspot.com.es, blogspot.co.uk, blogspot.pt, and so on.



I hope this was helpful for you. Don't forget to share. Thank me in comments below. 😝

0 Comments

Post a Comment

Avoid Spammy Comments