Jump to the post that solved this thread.
Not Solved [How To?] How to make this box for using as prefix box in mybb ?
#5
Not Solved
(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!
Reply
Jump to the post that solved this thread.


Messages In This Thread
RE: How to make this box for using as prefix box in mybb ? - by censor_deeznutz - 2021-01-19, 04:22 PM

Forum Jump:


Users browsing this thread: 1 Guest(s)