Problem with code. How and where to install?

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
brainfix
Registered User
Posts: 12
Joined: Sat Aug 26, 2017 6:40 pm

Problem with code. How and where to install?

Post by brainfix »

Hello there,

I have code for day and night mode on forum. I think its really cool feature, so can you guys please tell me where to add this codes.


HTML

Code: Select all

<div class="pg">
  <div class="box">
    <div class="switch">
      <div class="yoke"></div>
    </div>
  </div>
  <div class="te">
   Dark/Light mod
  </div>
</div>
CSS

Code: Select all

/*Created by Joanna Orlowska*/

html,
body {
  overflow-x: hidden;
  overflow-y: hidden;
}

.pg {
  width: 100%;
  height: 800px;
  background-color: white;
  /*yellow*/
  border: 1px solid #0F0F43;
  /* navy*/
}

.night {
  animation-name: tonight;
  animation-duration: 5s;
  background-color: #040018;
}

@keyframes tonight {
  from {
    background-color: white;
    /*yellow*/
  }
  to {
    background-color: #040018;
  }
}

.day {
  animation-name: today;
  animation-duration: 5s;
  background-color: white;
}

@keyframes today {
  from {
    background-color: #040018;
  }
  to {
    background-color: white;
  }
}

.box {
  height: 60px;
  width: 160px;
  margin-left: 600px;
  margin-top: 100px;
  border-radius: 40px;
  border: 2px solid #E7E7EC;
  /* gray*/
  background-color: #0D0D3C;
  /*nice navy*/
}

.boxedin {
  animation-name: boxedin;
  animation-duration: 3s;
  background-color: #f44327;
  /*nice red*/
}

@keyframes boxedin {
  from {
    background-color: #0D0D3C;
    /*nice navy*/
  }
  to {
    background-color: #f44327;
    /*nice red*/
  }
}

.boxedout {
  animation-name: boxedout;
  animation-duration: 3s;
  background-color: #0D0D3C;
  /*nice navy*/
}

@keyframes boxedout {
  from {
    background-color: #f44327;
    /*nice red*/
  }
  to {
    background-color: #0D0D3C;
    /*nice navy*/
  }
}

.switch {
  height: 50px;
  width: 150px;
  margin-top: 3px;
  margin-left: 3px;
  border-radius: 30px;
  border: 2px solid #E7E7EC;
  /* gray*/
  background-color: #6f6f8e;
  /*bluy gray*/
}

.switchedin {
  animation-name: switchedin;
  animation-duration: 3s;
  background-color: #FBFFC9;
  /*yellow*/
}

@keyframes switchedin {
  from {
    background-color: #6f6f8e;
    /*bluy gray*/
  }
  to {
    background-color: #FBFFC9;
    /*yellow*/
  }
}

.switchedout {
  animation-name: switchedout;
  animation-duration: 3s;
  background-color: #6f6f8e;
  /*bluy gray*/
}

@keyframes switchedout {
  from {
    background-color: #FBFFC9;
    /*yellow*/
  }
  to {
    background-color: #6f6f8e;
    /*bluy gray*/
  }
}

.yoke {
  height: 40px;
  width: 45px;
  border-radius: 20px;
  margin-top: 3px;
  margin-left: 5px;
  background-color: #FBFFC9;
  /*yellow*/
}

.yoked {
  animation-name: yokeAnim;
  animation-duration: 3s;
  margin-left: 97px;
  background-color: #f44327;
  /*nice red*/
}

@keyframes yokeAnim {
  from {
    background-color: #FBFFC9;
    /*yellow*/
    margin-left: 5px;
  }
  to {
    background-color: #f44327;
    /*nice red*/
    margin-left: 97px;
  }
}

.unyoked {
  animation-name: unyokeAnim;
  animation-duration: 3s;
  margin-left: 5px;
  background-color: #FBFFC9;
  /*yellow*/
}

@keyframes unyokeAnim {
  from {
    background-color: #f44327;
    /*nice red*/
    margin-left: 97px;
  }
  to {
    background-color: #FBFFC9;
    /*yellow*/
    margin-left: 5px;
  }
}

.te {
  height: 500px;
  width: 500px;
  margin-left: 430px;
  margin-top: 50px;
  font-size: 20px;
  text-align: center;
}

.teedin {
  animation-name: teed;
  animation-duration: 4s;
  color: #c5b2cc;
  /*light purpuly*/
}

@keyframes teedin {
  from {
    color: #190022;
    /*dark purply*/
  }
  to {
    color: #c5b2cc;
    /*light purpuly*/
  }
}

.teedout {
  animation-name: teed;
  animation-duration: 4s;
  color: #190022;
  /*dark purply*/
}

@keyframes teedout {
  from {
    color: #c5b2cc;
    /*light purpuly*/
  }
  to {
    color: #190022;
    /*dark purply*/
  }
}

p {
  font-size: 40px;
}
JS

Code: Select all

'use strict';
$(document).ready(function() {
  $(".yoke").click(function() {
    if ($(".pg").hasClass("night")) {
      $(".pg").removeClass("night");
      $(".box").removeClass("boxedin");
      $(".switch").removeClass("switchedin");
      $(".te").removeClass("teedin");
      $(".pg").addClass("day");
      $(".yoke").addClass("unyoked");
      $(".box").addClass("boxedout");
      $(".switch").addClass("switchedout");
      $(".te").addClass("teedout");
    } else {
      $(".yoke").removeClass("unyoked");
      $(".switch").removeClass("switchedout");
      $(".te").removeClass("teedout");
      $(".pg").removeClass("day");
      $(".box").removeClass("boxedout");
      $(".yoke").addClass("yoked");
      $(".pg").addClass("night");
      $(".box").addClass("boxedin");
      $(".switch").addClass("switchedin");
      $(".te").addClass("teedin");
    }
  });
}); //#f44327 really awesome red
User avatar
stevemaury
Support Team Member
Support Team Member
Posts: 52768
Joined: Thu Nov 02, 2006 12:21 am
Location: The U.P.
Name: Steve
Contact:

Re: Problem with code. How and where to install?

Post by stevemaury »

Ask Joanna Orlowska.
I can stop all your spam. I can upgrade or update your Board. PM or email me. (Paid support)
brainfix
Registered User
Posts: 12
Joined: Sat Aug 26, 2017 6:40 pm

Re: Problem with code. How and where to install?

Post by brainfix »

Mrs. Joanna told me to ask Mr steveamaury :D
Anyway I fix the problem. I am using Eles premium theme. I paste codes as widgets on sidebar. And thats it. If anyone using Eles and want this feature I will provide tutorial.
Thanks
Post Reply

Return to “[3.2.x] Styles Support & Discussion”