The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Staff/Mods Colored Post Borders

View previous topic View next topic Go down

Solved Staff/Mods Colored Post Borders

Post by Anzo on September 30th 2015, 3:29 pm

Hi, Very Happy

May I know how can i do something similar to this for my forum? http://prntscr.com/8m62yy

Thanks in advance.

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Staff/Mods Colored Post Borders

Post by Ange Tuteur on September 30th 2015, 3:35 pm

Hi @Anzo,

It's the same method as this, but forget the CSS part. Instead of a background color, you'd color the border.

For example, you have a default border rule for members :
Code:
.post {
  border-top:14px solid #CCC;
}

then for staff you color that border :
Code:
.post.st-answer {
  border-color:#39C;
}


If you want it for specific ranks, just change up the script and the class in your rank title. Admin for example :
HTML :
Code:
<span class="admin-rang"></span>

JS :
Code:
$(function() {
  $('.admin-rang').closest('.post').addClass('admin-answer');
});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Staff/Mods Colored Post Borders

Post by Anzo on September 30th 2015, 7:13 pm

I added it but nothing happened.

I added this to my CSS:
Code:
.post {
    border-top: 10px solid #1485E4!important;
    border-radius: 10px 10px 0px 0px;
}

.post.admin-answer {
  border-color:black;
}

And added this to the JS:
Code:
$(function() {
  $('.admin-rank').closest('.post').addClass('admin-answer');
});

I changed my rank name to:
Code:
<span class="admin-rank">Administrator</span>

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Staff/Mods Colored Post Borders

Post by Ange Tuteur on September 30th 2015, 7:22 pm

Your default rule contains !important on the border declaration. So replace your staff rule :
Code:
.post.admin-answer {
  border-color:black;
}

with this :
Code:
.post.admin-answer {
  border-top-color:black !important;
}

Also, make it border-top-color, you can blame me for using border-color in my example. That affects the whole border. ( top, left, right, bottom ) Razz

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Staff/Mods Colored Post Borders

Post by Anzo on September 30th 2015, 7:50 pm

Okay, thank you a lot Very Happy

I suppose I can just repeat the same process for other staff groups?

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Staff/Mods Colored Post Borders

Post by Ange Tuteur on September 30th 2015, 8:08 pm

Yep, just repeat the same steps for each group. The only difference is you'll give different groups different classes. Wink

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Staff/Mods Colored Post Borders

Post by Anzo on September 30th 2015, 8:14 pm

Okay, thanks Very Happy

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Staff/Mods Colored Post Borders

Post by Ange Tuteur on September 30th 2015, 9:17 pm

You're welcome ^^

Topic archived

If you encounter any problems don't hesitate to open a new topic. Have a good day. Smile

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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