[Solved] [JavaScript] Add border top & bottom color

hi punBB community
i want to ask..

can you give/add color for "border-top-color" and "border-bottom-color" according to the ranking,

I want to replace my own special color (according to rank)
i'am staff on my forum, and I want to change the border color of top / bottom, according to my ranking,

so my border (staff rank) top/bottom color different with border top/bottom color for member (other rank)



my forum
http://budokai.indonesianforum.net/t24-sdfsd#124

my forum:phpbb2

im really appreciate, thanks for help ,

I guess you have a separated css ID's for ranks. The one you use for that is .xyz so it basically will be border-top: color; and border-bottom: color;

So it's like:

Code:

[panda=html]<span class="userrank">Member</span>

and in css you put different colors for userrank and so on.

Hope it helps.

I've tried to put in viewopic_body, besides class = xyz, but when I want to add css nothing comes out, does not happen.

I think this could be solved with javascript, but I do not understand much about javascript. now still learning about JS

example of what I mean you can see here. similar like this
different border color every rank
https://i.imgur.com/x9xaNeh.png
https://i.imgur.com/jkIjfVC.png
https://i.imgur.com/vYF8wJ3.png

source:
http://www.duelacademy.net/t30203-rabbit-cubez#288296

you must login to see that border different every rank
use my ID to login
ID: jawapos
pas: lolwut@123
http://www.duelacademy.net/t30203-rabbit-cubez#288296

thanks for help admin
im really appreciate

You can't do it like that you must to use something like this and delete it from viewtopic.

Open your ranks, and in title put:

Code:

[panda=html]   <div class="poster-profile">Rank Title</div>

Now open javascript and put this code:

Code:

 $(function(){$('.post').each(function(){var thecolor=$(this).find('.name strong a span').css('color');$(this).find('.name').css('border-top-color',thecolor);$(this).find('.poster-profile').css('border-bottom-color',thecolor)})});

Now in your css put:

Code:

[panda=css].poster-profile {
    display: block;
    position: relative;
    top: -28px;
    text-align: center;
    z-index: 99;
    width: 200px;
    background: none repeat scroll 0% 0% rgb(20, 20, 20);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.02) inset, 0px 1px 3px rgba(0, 0, 0, 0.9);
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
    padding-bottom: 15px;
    border-radius: 0px 0px 5px 5px;
    border-bottom: 5px solid rgb(0, 57, 80);
}

For next rank in Javascript add whole code again only change posterprofile to something other and again in css add some other id and change borders  and in rank title
example:

Code:

[panda=html]<div class=".poster-profile2">rank name</div>

Code:

 $(function(){$('.post').each(function(){var thecolor=$(this).find('.name strong a span').css('color');$(this).find('.name').css('border-top-color',thecolor);$(this).find('.poster-profile2').css('border-bottom-color',thecolor)})});

Code:

[panda=css].poster-profile2 {
   display: block;
   position: relative;
   top: -28px;
   text-align: center;
   z-index: 99;
   width: 200px;
   background: none repeat scroll 0% 0% rgb(20, 20, 20);
   box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.02) inset, 0px 1px 3px rgba(0, 0, 0, 0.9);
   margin-left: 10px;
   margin-top: 10px;
   margin-right: 10px;
   padding-bottom: 15px;
   border-radius: 0px 0px 5px 5px;
   border-bottom: 5px solid rgb(0, 57, 80);
}

oh
i done try with your code, but result like this


border color is not in accordance with the place
http://budokai.indonesianforum.net/t24-sdfsd#124

how?
thanks for help admin

------------------

just to remind,
I want to change
border bottom color and border top color.

source:

source:

if you need my account ACP, i will give via PM forum,

thanks admin
im really appreciate

Do you removed

Code:

<div class="xyz">

from your viewtopic_body ?

PS; for postprofile use your css like

Code:

[panda=css].postprofile {
    background-color: rgb(21, 21, 21);
    border-bottom: 7px solid rgb(2, 79, 75);
    border-radius: 0px 0px 0px 0px !important;
    border-style: solid none;
    border-top: 3px solid rgb(2, 79, 75);
    box-shadow: 0px 0px 5px 1px rgb(0, 0, 0);
    margin: 10px !important;
    padding: 10px 0px 30px;
    text-align: center;
    width: 215px;
}

Not, im not remove

If you need check my forum ACP, i will give my acc.

No problem, i will believe you

Well remove it and read https://punbb-design.forumotion.com/t12-javascript-add-border-top-bottom-color#40 again

where class for postprofile?
i done put class with name postprofile on my viewtopic body

btw i done try, put your css postprofile on my css
but nothing happen

you can see

http://budokai.indonesianforum.net/t24-sdfsd#124

where border top color?
and there is background for ranking, it is very annoying, can remove?



thanks for help admin

Will look tonight when i get home, cant do it now from my phone.

okay I'll wait you admin, no problem
thanks for help ...

Looks like you still didn't remove xyz from viewtopic_body, do it.

After that change the postprofile css with

Code:

[panda=css].postprofile {
    background-color: rgb(21, 21, 21);
    border-bottom: 7px solid rgb(2, 79, 75);
    border-radius: 0px 0px 0px 0px !important;
    border-style: solid none;
    border-top: 3px solid rgb(2, 79, 75);
    box-shadow: 0px 0px 5px 1px rgb(0, 0, 0);
    margin: 10px !important;
    padding: 10px 0px 30px;
    text-align: center;
    width: 215px;
}

And that should be it.

hmm, i done remove my xyz
for now looks better

but now problem with background for name/ID.
Background for ID/name nothing.

you can see this
https://i.imgur.com/7SGaS7x.png

http://budokai.indonesianforum.net/t23-poker-face#119
-----------------

and code css for .postprofile {
i done put on my css
but not effect/ nothing happen,
because i think class for: postprofile
nothing on my viewtopicbody, i never put class with name postprofile,

what do you mean postprofile it is: poster-profile?
if like that
result like this
https://i.imgur.com/PBR67YA.png

but color for border-top-color not change, still default, do not change color according to rank

http://budokai.indonesianforum.net/t23-poker-face#119

-----------

this source, i got the idea from here

Source:

thanks for help admin
im really appreciate

For me it's works fine

Look ID admin or compas,

If ID ManUnited, i done put on group :)conclusion, border still default.

If ID admin & kompas i put on different group

EDIT:
if open in google chrome color still default, color doesnt change according rank.

IF open on mozilla border color change according range

That can be if you didn't clear cache, but that's it there are no more changes which can be done.

i done clear chace, but still same (google chrome)

but I expected when I opened contained in (mozilla firefox). the "border-bottom-color" change according to the group / ranking.

open in mozilla ("border-bottom-color" change according to the group / ranking. )


and this open in google chrome other browser ("border-bottom-color" still default)


conclusion: right on mozilla firefox, but this have small problem, chrome cant read border bottom color .

whther this bug or not? how to fix it admin?

---------

i need be like this,
for border-top-color


for bottom color


top and bottom border color matches the color ranking, thanks for help admin

Looks like you manage to add it ?

<div class="solved">Solved & Locked </div>