How to change the cookies bar information

Go down

Tutorial How to change the cookies bar information

Post by Luffy on May 31st 2016, 11:45 am

How to change the cookies bar information

Hello there,

Since the cookies bar has changed, we didn't have the chance to change the appearance of that information box. Well, now we can, as shown below:

Preview

Before:


After:



Javascript Code

Go to: Admin Panel > Modules > HTML & Javascript > Javascripts > Create a new Javascript (make sure your javascripts are enabled)
Placement: In all the pages
Code:
Code:
/* ----------------------------------------------------
 This code was written by ©️Luffy for Forumotion on 2018
 Please do not remove these comments
 Find the tutorial here:
 ©️ : https://help.forumotion.com/t147313-topic
 ------------------------------------------------------ */
$(function(){
  $(function(){
    $('div').has('a#accept_rgpd').addClass('lo1pruf');
    $('div.lo1pruf').children('div').removeClass('lo1pruf').addClass('lopr2uf');
  });
});

CSS Code

Go to: Admin Panel > Display > Pictures and colors > Colors > CSS Stylesheet
and add this code in your sheet:
Code:
.lo1pruf {
  width: 25%!important;
  bottom: 10px!important;
  left: 10px!important;
  border-radius: 4px;
  box-shadow: 0px 2px 4px #000;
}
.lo1pruf li > a {
  background: #4973b1;
  display: block;
  border: 0!important;
  box-shadow: 0px 2px 4px #00000055;
  border-radius: 2px!important;
}
.lo1pruf li {
  display: block!important;
}
.lo1pruf li:first-child > a {
  background: #1f8f48!important;
  display: block;
  margin: 5px 0!important;
}
#close_rgpd {
  background: #831919;
}
and click Submit.


Modifications

  • Code:
    .lo1pruf
    this is the element for the box if you check the image above.
    In that element as you can see there is the width, the left, the bottom, some border, border-radius, some shadow and other codes. You may change that to what you wish so that it matches your theme design.
  • Code:
    .lo1pruf li:first-child > a
    this is the element for the "Accept" button visible with the green background color. You can also change those codes to whatever you like to match your theme design.
  • Code:
    .lo1pruf li > a
    this is the element for the "Learn more and manage my choices" button that is visible with the blue background color. You can also change anything you want to it, but be aware that all the changes you do to the middle button, these changes will happen to all three of the buttons.
  • Lastly,
    Code:
    #close_rgpd
    this is the element for the "Close (and accept)" button with the red background color. You can also change this button style as you wish to match your forum design.


If you have any problems with these codes don't mind asking for our help!


Good luck and enjoy! Smile


Last edited by Luffy on September 17th 2018, 9:16 pm; edited 2 times in total (Reason for editing : Change of the design)
avatar
Luffy
Manager
Manager

Male Posts : 5733
Reputation : 639
Language : Greek, English
Location : Cyprus, Greece

https://www.crossroadz.net

Back to top Go down

Tutorial Re: How to change the cookies bar information

Post by Luffy on September 17th 2018, 9:17 pm

avatar
Luffy
Manager
Manager

Male Posts : 5733
Reputation : 639
Language : Greek, English
Location : Cyprus, Greece

https://www.crossroadz.net

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum