Quantcast
Channel: MyBB Community Forums - Tutorials
Viewing all articles
Browse latest Browse all 690
↧

Yet another basic prefix styling tutorial

January 20, 2021, 4:28 pm
$
0
0
let us simply show an example of say 2 different styled prefixes with images.

Note: now start thinking in terms of say .prefix-#

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

etc, etc....

for this example let us say we have 2 prefixes, one for games and one for Movies....

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

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

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

Instructions:


Home » Thread Prefixes » Edit Thread Prefix

Quote:Prefix *
Plain text version of the prefix to be displayed in selection menus.

Prefix # 1 

Games

Prefix # 2 

Movies

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.

Prefix # 1 => Games

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

Prefix # 2 => Movies

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


Add to your themes css file:
/* Yet another basic prefix styling tutorial by: V */

/* prefix-1 ie: Games */
.prefix-1 > span > i.prefix-1-icon {
  width: 16px;
  height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/game.png') no-repeat 0;	
}
.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; 
}
.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;
}
.prefix-1:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-1:hover { 
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
.prefix-1:first-child:hover{
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
.prefix-1:last-child:hover{
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
.prefix-1:first-child:before,
.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;
}
.prefix-1:first-child:hover:before,
.prefix-1:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-1 > span {
  padding: 8px;
  vertical-align: middle;
  line-height: normal;
}


/* prefix-2 ie Movies */
.prefix-2 > span > i.prefix-2-icon {
  width: 16px;
  height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/video.png') no-repeat 0;	
}
.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; 
}
.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;
}
.prefix-2:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-2:hover { 
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
.prefix-2:first-child:hover{
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
.prefix-2:last-child:hover{
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
.prefix-2:first-child:before,
.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;
}
.prefix-2:first-child:hover:before,
.prefix-2:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-2 > span {
  padding: 8px;
  vertical-align: middle;
  line-height: normal;
}

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

* Now you can carry on and keep editing further for your specific usages....

So for example lets say you want a third prefix for say Music....

ie:

Prefix # 3 => .prefix-3

Home » Thread Prefixes » Edit Thread Prefix

Quote:Prefix *
Plain text version of the prefix to be displayed in selection menus.

Prefix # 3 

Music


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.

Prefix # 3 => Music

<div class="prefix-3"><span><i class="prefix-3-icon"></i>Music</span></div>

You would then add prefix-3 styling to your themes css file directly after the prefix-2 styling:

/* prefix-3 ie Music */

.prefix-3 > span > i.prefix-3-icon {
  width: 16px;
  height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/music.png') no-repeat 0;	
}
.prefix-3 {
  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, #ffeb3b, #f441a5, #03a9f4);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
.prefix-3: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;
}
.prefix-3:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-3:hover { 
  background: linear-gradient(90deg, #fa7199, #e43603, #f5ce62,#fa7199);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
.prefix-3:first-child:hover{
  background: linear-gradient(90deg, #fa7199, #e43603, #f5ce62,#fa7199);
  background-size: 400%;
}
.prefix-3:last-child:hover{
  background: linear-gradient(90deg, #fa7199, #e43603, #f5ce62,#fa7199);
  background-size: 400%;
}
.prefix-3:first-child:before,
.prefix-3: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;
}
.prefix-3:first-child:hover:before,
.prefix-3:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-3 > span {
  padding: 8px;
  vertical-align: middle;
  line-height: normal;
}

ie:

/* Yet another basic prefix styling tutorial by: V */

/* prefix-1 ie: Games */

.prefix-1 > span > i.prefix-1-icon {
  width: 16px;
  height: 16px;
  padding-left: 4px;
  display: inline-block;  
  vertical-align: middle;
  background: url('images/icons/game.png') no-repeat 0; 
}
.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; 
}
.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;
}
.prefix-1:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-1:hover { 
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
.prefix-1:first-child:hover{
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
.prefix-1:last-child:hover{
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
.prefix-1:first-child:before,
.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;
}
.prefix-1:first-child:hover:before,
.prefix-1:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-1 > span {
  padding: 8px;
  vertical-align: middle;
  line-height: normal;
}

/* prefix-2 ie Movies */

.prefix-2 > span > i.prefix-2-icon {
  width: 16px;
  height: 16px;
  padding-left: 4px;
  display: inline-block;  
  vertical-align: middle;
  background: url('images/icons/video.png') no-repeat 0;  
}
.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; 
}
.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;
}
.prefix-2:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-2:hover { 
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
.prefix-2:first-child:hover{
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
.prefix-2:last-child:hover{
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
.prefix-2:first-child:before,
.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;
}
.prefix-2:first-child:hover:before,
.prefix-2:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-2 > span {
  padding: 8px;
  vertical-align: middle;
  line-height: normal;
}

/* prefix-3 ie Music */

.prefix-3 > span > i.prefix-3-icon {
  width: 16px;
  height: 16px;
  padding-left: 4px;
  display: inline-block;  
  vertical-align: middle;
  background: url('images/icons/music.png') no-repeat 0;  
}
.prefix-3 {
  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, #ffeb3b, #f441a5, #03a9f4);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
.prefix-3: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;
}
.prefix-3:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-3:hover { 
  background: linear-gradient(90deg, #fa7199, #e43603, #f5ce62,#fa7199);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
.prefix-3:first-child:hover{
  background: linear-gradient(90deg, #fa7199, #e43603, #f5ce62,#fa7199);
  background-size: 400%;
}
.prefix-3:last-child:hover{
  background: linear-gradient(90deg, #fa7199, #e43603, #f5ce62,#fa7199);
  background-size: 400%;
}
.prefix-3:first-child:before,
.prefix-3: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;
}
.prefix-3:first-child:hover:before,
.prefix-3:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-3 > span {
  padding: 8px;
  vertical-align: middle;
  line-height: normal;
}

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

Now that you have all that sorted out, as you continue editing there is one thing that you may take note of: the hover effects do not work on mobile! that is because we need, to set :active 

Previous examples edited to add :active 
/* Yet another basic prefix styling tutorial by: V */

/* prefix-1 ie: Games */

.prefix-1 > span > i.prefix-1-icon {
  width: 16px;
  height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/game.png') no-repeat 0;	
}
.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; 
}
.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;
}
.prefix-1:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-1:active,
.prefix-1:hover { 
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
.prefix-1:first-child:active,
.prefix-1:first-child:hover{
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
.prefix-1:last-child:active,
.prefix-1:last-child:hover{
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
.prefix-1:first-child:before,
.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;
}
.prefix-1:first-child:active:before,
.prefix-1:last-child:active:before,
.prefix-1:first-child:hover:before,
.prefix-1:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-1 > span {
  padding: 8px;
  vertical-align: middle;
  line-height: normal;
}

/* prefix-2 ie Movies */

.prefix-2 > span > i.prefix-2-icon {
  width: 16px;
  height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/video.png') no-repeat 0;	
}
.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; 
}
.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;
}
.prefix-2:active:before,
.prefix-2:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-2:active,
.prefix-2:hover { 
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
.prefix-2:first-child:active,
.prefix-2:first-child:hover{
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
.prefix-2:last-child:active,
.prefix-2:last-child:hover{
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
.prefix-2:first-child:before,
.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;
}
.prefix-2:first-child:active:before,
.prefix-2:last-child:active:before,
.prefix-2:first-child:hover:before,
.prefix-2:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-2 > span {
  padding: 8px;
  vertical-align: middle;
  line-height: normal;
}

/* prefix-3 ie Music */

.prefix-3 > span > i.prefix-3-icon {
  width: 16px;
  height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/music.png') no-repeat 0;	
}
.prefix-3 {
  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, #ffeb3b, #f441a5, #03a9f4);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
.prefix-3: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;
}
.prefix-3:active:before,
.prefix-3:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-3:active,
.prefix-3:hover { 
  background: linear-gradient(90deg, #fa7199, #e43603, #f5ce62,#fa7199);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
.prefix-3:first-child:active,
.prefix-3:first-child:hover{
  background: linear-gradient(90deg, #fa7199, #e43603, #f5ce62,#fa7199);
  background-size: 400%;
}
.prefix-3:last-child:active,
.prefix-3:last-child:hover{
  background: linear-gradient(90deg, #fa7199, #e43603, #f5ce62,#fa7199);
  background-size: 400%;
}
.prefix-3:first-child:before,
.prefix-3: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;
}
.prefix-3:first-child:active:before,
.prefix-3:last-child:active:before,
.prefix-3:first-child:hover:before,
.prefix-3:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-3 > span {
  padding: 8px;
  vertical-align: middle;
  line-height: normal;
}

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


Now here is one final option for this tutorial, styling prefix sorting (clicking the prefix above threadlist will display the various threads that have that prefix)....

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


Edit Template: forumdisplay_threadlist

Find and copy & cut:

{$prefixselect}

move directly above:
<div class="float_left">

Edit Template: forumdisplay_threadlist_prefixes

Replace with:

<div class="prefix-sort">
{$prefixselect_prefix}
</div>

Edit Template: forumdisplay_threadlist_prefixes_prefix

Replace with:

<a class="prefix-{$prefix['pid']}" href="forumdisplay.php?fid={$fid}&prefix={$prefix['pid']}"><i class="prefix-{$prefix['pid']}-icon"></i>{$prefix['prefix']}</a>

edit css stylesheet already added from previous parts of tutorial and find:

/* Yet another basic prefix styling tutorial by: V */


/* prefix-1 ie: Games */

Add between those:

/* Prefix Sort Div */

.prefix-sort {
	display: inline-block;
	margin-top: 4px;
	margin-bottom: 4px;
}

/* Prefix Sort a. Links */

.prefix-sort a:link {
	color: #FFF;
	text-decoration: none;
}
.prefix-sort a:visited {
	color: #FFF;
	text-decoration: none;
}
.prefix-sort a:hover,
.prefix-sort a:active {
	color: #F5F5F5;
	text-decoration: underline;
}

/* Prefix Sort a. Icons */

 i.prefix-1-icon {
    width: 16px;
    height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/game.png') no-repeat 0;	
}
 i.prefix-2-icon {
    width: 16px;
    height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/video.png') no-repeat 0;	
}
 i.prefix-3-icon {
    width: 16px;
    height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/music.png') no-repeat 0;	
}

/* Prefix Sort a. Padding */

a.prefix-1 {
   padding: 6px;
}
a.prefix-2 {
   padding: 6px;
}
a.prefix-3 {
   padding: 6px;
}


So now your overall css side of your edits from the completed tutorial should be:

/* Yet another basic prefix styling tutorial by: V */

/* Prefix Sort Div */

.prefix-sort {
	display: inline-block;
	margin-top: 4px;
	margin-bottom: 4px;
	max-width: 70%;
}

/* Prefix Sort a. Links */

.prefix-sort a:link {
	color: #FFF;
	text-decoration: none;
}
.prefix-sort a:visited {
	color: #FFF;
	text-decoration: none;
}
.prefix-sort a:hover,
.prefix-sort a:active {
	color: #F5F5F5;
	text-decoration: underline;
}

/* Prefix Sort a. Icons */

 i.prefix-1-icon {
    width: 16px;
    height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/game.png') no-repeat 0;	
}
 i.prefix-2-icon {
    width: 16px;
    height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/video.png') no-repeat 0;	
}
 i.prefix-3-icon {
    width: 16px;
    height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/music.png') no-repeat 0;	
}

/* Prefix Sort a. Padding / Margin */

a.prefix-1 {
   padding: 6px;
   margin-bottom: 4px;
}
a.prefix-2 {
   padding: 6px;
   margin-bottom: 4px;
}
a.prefix-3 {
   padding: 6px;
   margin-bottom: 4px;
}

/* prefix-1 ie: Games */

.prefix-1 > span > i.prefix-1-icon {
    width: 16px;
    height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/game.png') no-repeat 0;	
}
.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; 
  overflow: hidden;
}
.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;
}
.prefix-1:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-1:active,
.prefix-1:hover { 
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
.prefix-1:first-child:active,
.prefix-1:first-child:hover{
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
.prefix-1:last-child:active,
.prefix-1:last-child:hover{
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
.prefix-1:first-child:before,
.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;
}
.prefix-1:first-child:active:before,
.prefix-1:last-child:active:before,
.prefix-1:first-child:hover:before,
.prefix-1:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-1 > span {
  padding: 8px;
  vertical-align: middle;
  line-height: normal;
}

/* prefix-2 ie Movies */

.prefix-2 > span > i.prefix-2-icon {
    width: 16px;
    height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/video.png') no-repeat 0;	
}
.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;
  overflow: hidden; 
}
.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;
}
.prefix-2:active:before,
.prefix-2:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-2:active,
.prefix-2:hover { 
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
.prefix-2:first-child:active,
.prefix-2:first-child:hover{
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
.prefix-2:last-child:active,
.prefix-2:last-child:hover{
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
.prefix-2:first-child:before,
.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;
}
.prefix-2:first-child:active:before,
.prefix-2:last-child:active:before,
.prefix-2:first-child:hover:before,
.prefix-2:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-2 > span {
  padding: 8px;
  vertical-align: middle;
  line-height: normal;
}

/* prefix-3 ie Music */

.prefix-3 > span > i.prefix-3-icon {
    width: 16px;
    height: 16px;
	padding-left: 4px;
	display: inline-block;	
	vertical-align: middle;
	background: url('images/icons/music.png') no-repeat 0;	
}
.prefix-3 {
  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, #ffeb3b, #f441a5, #03a9f4);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
  overflow: hidden;
}
.prefix-3: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;
}
.prefix-3:active:before,
.prefix-3:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-3:active,
.prefix-3:hover { 
  background: linear-gradient(90deg, #fa7199, #e43603, #f5ce62,#fa7199);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite; 
}
.prefix-3:first-child:active,
.prefix-3:first-child:hover{
  background: linear-gradient(90deg, #fa7199, #e43603, #f5ce62,#fa7199);
  background-size: 400%;
}
.prefix-3:last-child:active,
.prefix-3:last-child:hover{
  background: linear-gradient(90deg, #fa7199, #e43603, #f5ce62,#fa7199);
  background-size: 400%;
}
.prefix-3:first-child:before,
.prefix-3: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;
}
.prefix-3:first-child:active:before,
.prefix-3:last-child:active:before,
.prefix-3:first-child:hover:before,
.prefix-3:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
.prefix-3 > span {
  padding: 8px;
  vertical-align: middle;
  line-height: normal;
}

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

and again you can keep editing furthe for usages from there etc, etc...

Best of luck!

~ V  Wink
↧
Search
Viewing all articles
Browse latest Browse all 690

Trending Articles

RAMAYAMPET Mandal Sarpanch | Upa-Sarpanch | Ward member Mobile Numbers Medak...

May 24, 2017, 2:00 am

लड़कियां सेक्स के दौरान क्यों करती है उह! आह!लड़कियां सेक्स के दौरान क्यों करती...

May 19, 2016, 1:54 am

Neem Baba Extra Questions Answer Class 6 English Poorvi

February 1, 2025, 5:19 am

Throw Back: 4×4 — Sikilitele (Ft Castro) Prod by JQ

March 5, 2015, 8:24 am

Rajasthan Board 10th Result 2016 Roll No wise & Name Wise

August 20, 2016, 5:13 pm

Lowe faces four theft charges

November 14, 2017, 6:52 pm

Practice Sheet of Right form of verbs for HSC Students

September 22, 2019, 11:40 pm

Mafia, Murder & Mayhem In The Motor City: Detroit Mob Hit Timeline (1937-2007)

December 7, 2016, 3:57 pm

The 10 Tennessee Cities With The Largest Black Population For 2021

December 21, 2020, 10:12 am

Materials Around Us Class 6 Worksheet Science Chapter 6

October 3, 2024, 5:20 am

デスクトップ ヒープの枯渇

January 18, 2018, 8:31 pm

Best Suvichar in Hindi |बेस्ट सुविचार |शुभ विचार हिंदी में

March 7, 2020, 11:19 pm

Kanulanu Thaake Lyrics and translation | Manam (2014)

May 9, 2014, 5:45 am

Korean Sex Porn Videos: XXX Videos & Free Porn Movies

May 30, 2025, 9:29 pm

Teen Shot In Miami Drive-By Dies From Injuries

August 8, 2011, 1:16 pm

Download: IQ Muzatasha feat Shy D & Pmj – Ulesi NiFertilizer Yamavuto

March 22, 2018, 7:23 pm

Mahakal Attitude Status

February 29, 2020, 9:52 am

Property developer set up cannabis factory to help pay off debts...

August 3, 2015, 2:29 am

♡

July 11, 2015, 6:15 am

KB: How to troubleshoot issues when adding a Hyper-V host in System Center...

August 14, 2012, 10:05 am
Search