MyBB Community Forums

MyBB Community Forums > 1.8 Support > General Support > How to make this box for using as prefix box in mybb ?
Full Version: How to make this box for using as prefix box in mybb ?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

PARADOX987

2021-01-19, 01:50 PM

In this video , he shows us how make a button glowing with multiple color change...

but i want to know how to make a box (like button size but not a button) using css {padding or whatever} like that ;1) multiple color changing 
         2) transparent with multiple color effect

i am dumb in css , Anyone who knows how to do it please tell me.... i will be grateful to you...

Thank You.

censor_deeznutz

2021-01-19, 02:50 PM
Not sure I am understanding you, but do you simply mean you want a rectangle like the buttons but rather without say the rounded borders?
[Image: Screenshot-20210119-065157-Kiwi-Browser.jpg]
 If so just comment out the two 50% border radius in the existing code..., as that will give you the same examples but as a rectangle/box,

and then you could also as you mentioned transparent active state bg by simply setting the button html element background from background: #111; to background: transparent;

[Image: Screenshot-20210119-070255-Kiwi-Browser.jpg]

 though if simply modifying the existing example as is with existing button element is not what you meant then this example would need to be more modified to remove the html button elements and say replace with specific divs or what not. Fyi, simply saying box is fairly open to interpretation as it could mean say a box model, a rectangle/square or an actual box box, hence the speculation. just saying.

Crazycat

2021-01-19, 02:58 PM
Try using their tutorial at https://www.codingnepalweb.com/2020/08/d...ffect.html without the javascript, I don't think you really want a clock.
Or you can find all their glowing tutorials at https://www.codingnepalweb.com/search/la...g%20Effect

PARADOX987

2021-01-19, 03:53 PM
i am trying to say tha can you provide me the css that i can use them for representing my forum's prefix , it must be like a box , but you don't have to use <button> tag....

you can simply provide a normal box or can represent a complex box like multicolor animation effect....


That's all....

censor_deeznutz

2021-01-19, 04:22 PM
(2021-01-19, 03:53 PM)PARADOXP Wrote: [ -> ]i am trying to say tha can you provide me the css that i can use them for representing my forum's prefix , it must be like a box , but you don't have to use <button> tag....

you can simply provide a normal box or can represent a complex box like multicolor animation effect....


That's all....




so exact same on hover just not as <button> ? so primarily the same tutorial snippet but as divs?



existing snippet mildly tweaked as divs:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-.box;
  font-family: 'Poppins', sans-serif;
}
html,body {
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
  overflow: hidden;
}
div.box {
  position: relative;
  height: 60px;
  width: 200px;
  margin: 0 35px;
  /*  border-radius: 50px; */
  border: none;
  outline: none;
  /* background: #111;*/ 
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.5s;

  display: inline-block;
  text-align: center;
  line-height: 60px; 
  background: transparent; 
}
div.box > span {
  vertical-align: middle;
  line-height: normal;
}
div.box:first-child:hover{
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
div.box:last-child:hover{
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
div.box:first-child:before,
div.box:last-child:before{
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50px; 
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}
div.box:first-child:hover:before,
div.box:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
div.box:hover{
  z-index: 1;
  animation: glow 8s linear infinite;
}
@keyframes glow {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 400%;
  }
}
</style>
  </head>
  <body>
    <div class="boxes">
      <div class="box"><span>Touch The Box</span></div>
      <div class="box"><span>Touch The Box</span></div> 
    </div>
</body>
</html>




ok, so now lets try the above but only slightly modified as I try it as a prefix real quick:


Instructions:
Quote:Display Style *
This is how the prefix will appear next to thread subjects. You may enter HTML markup here or simply use the same as the plain text version above.




<div class="box"><span>Testing</span></div>






Add to your theme css:



div.box {
  position: relative;
  height: 20px;
  max-width: 200px;
  margin: 0 5px;
  border-radius: 50px;
  border: none;
  outline: none; 
  color: #111;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.5s;
  display: inline-block;
  text-align: center;
  line-height: 20px; 
  background: transparent; 
}
div.box:before{
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50px; 
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}
div.box:hover:before{
  opacity: 1;
  z-index: -1;
}
div.box:hover { 
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
div.box:first-child:hover{
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
div.box:last-child:hover{
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
div.box:first-child:before,
div.box:last-child:before{
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50px; 
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}
div.box:first-child:hover:before,
div.box:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
div.box > span {
  padding: 8px;
  vertical-align: middle;
  line-height: normal;
}
@keyframes glow {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 400%;
  }
}




* Note: that quick edit works upon trying it as a prefix, though you may want to keep editing it further to your needs as my current free time for this morning is rather limited....





*Note(update): I had a couple more minutes of free time and mildly modified it slightly different . Personally I say this small little editing it a bit further edit looks a bit better than the one above:



Instructions:


Quote:Display Style *
This is how the prefix will appear next to thread subjects. You may enter HTML markup here or simply use the same as the plain text version above.
<div class="box"><span>Testing</span></div>


replace last css snippet edit in your themes css file with:

div.box {
  position: relative;
  height: 20px;
  max-width: 200px;
  margin: 0 5px;
  border-radius: 50px;
  border: none;
  outline: none; 
  color: #F5F5F5;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.5s;
  display: inline-block;
  text-align: center;
  line-height: 20px; 	
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite;	
}
div.box:before{
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50px; 
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}
div.box:hover:before{
  opacity: 1;
  z-index: -1;
}
div.box:hover {	
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite;	
}
div.box:first-child:hover{
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
div.box:last-child:hover{
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
div.box:first-child:before,
div.box:last-child:before{
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50px; 
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}
div.box:first-child:hover:before,
div.box:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
div.box > span {
  padding: 8px;
  vertical-align: middle;
  line-height: normal;
}
@keyframes glow {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 400%;
  }
}


ie:

[Image: Forums-My-Forum.png]

[Image: Testing-1-2-3.png]



also, let us say just for another simple example that you have a prefix called Games and you want a lil games icon in the prefix for example:

Instructions:


Quote:Display Style *
This is how the prefix will appear next to thread subjects. You may enter HTML markup here or simply use the same as the plain text version above.
<div class="box"><span><i class="prefix-games"></i>Games</span></div>

Add to the css:
div.box > span > i.prefix-games {
    width: 16px;
    height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/game.png') no-repeat 0;	
}

ie:
[Image: Testing-1-2-3.png]

Ok, so now that all that basic stuff is sorted out via various examples, let us  simply show an example of say  2 different styled prefixes with images being Games and Movies as suggested in previous examples.

Note: previous examples uses div.box but we want to change that so delete the previous examples and start thinking in terms of say div.prefix-#

Ie:
Prefix # 1 => div.prefix-1
Prefix # 2 => div.prefix-2

etc, etc....

Instructions:


Quote:Display Style *
This is how the prefix will appear next to thread subjects. You may enter HTML markup here or simply use the same as the plain text version above.

<div class="prefix-1"><span><i class="prefix-1-games"></i>Games</span></div>

<div class="prefix-2"><span><i class="prefix-2-movies"></i>Movies</span></div>

/* prefix-1 ie: Games */
div.prefix-1 > span > i.prefix-1-games {
    width: 16px;
    height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/game.png') no-repeat 0;	
}
div.prefix-1 {
  position: relative;
  height: 20px;
  max-width: 200px;
  margin: 0 5px;
  border-radius: 50px;
  border: none;
  outline: none; 
  color: #F5F5F5;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.5s;
  display: inline-block;
  text-align: center;
  line-height: 20px;  
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
div.prefix-1:before{
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50px; 
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}
div.prefix-1:hover:before{
  opacity: 1;
  z-index: -1;
}
div.prefix-1:hover { 
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
div.prefix-1:first-child:hover{
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
div.prefix-1:last-child:hover{
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
div.prefix-1:first-child:before,
div.prefix-1:last-child:before{
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50px; 
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}
div.prefix-1:first-child:hover:before,
div.prefix-1:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
div.prefix-1 > span {
  padding: 8px;
  vertical-align: middle;
  line-height: normal;
}


/* prefix-2 ie Movies */
div.prefix-2 > span > i.prefix-2-movies {
    width: 16px;
    height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/video.png') no-repeat 0;	
}
div.prefix-2 {
  position: relative;
  height: 20px;
  max-width: 200px;
  margin: 0 5px;
  border-radius: 50px;
  border: none;
  outline: none; 
  color: #F5F5F5;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.5s;
  display: inline-block;
  text-align: center;
  line-height: 20px;  
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
div.prefix-2:before{
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50px; 
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}
div.prefix-2:hover:before{
  opacity: 1;
  z-index: -1;
}
div.prefix-2:hover { 
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
div.prefix-2:first-child:hover{
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
div.prefix-2:last-child:hover{
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
div.prefix-2:first-child:before,
div.prefix-2:last-child:before{
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50px; 
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}
div.prefix-2:first-child:hover:before,
div.prefix-2:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
div.prefix-2 > span {
  padding: 8px;
  vertical-align: middle;
  line-height: normal;
}

@keyframes glow {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 400%;
  }
}

ie:
[Image: Forums-My-Forum.png]

though as I sorta changed a few things and create a tutorial for this you could also just now just visit the more complete tutorial for this with sorting and such at: https://community.mybb.com/thread-230918...pid1361296

Best of luck!
MyBB Community Forums > 1.8 Support > General Support > How to make this box for using as prefix box in mybb ?