How can I move the reputation icon? (with example)

[sadiq6210]

Hi,

In vb4, I just want to move the reputation icon as shown:
https://vborg.vbsupport.ru/attachment.php?attachmentid=124131&stc=1&d=1291414516

I tried to edit the postbit_leg. template and move the code up but there is always a problem in place!

[sadiq6210]

up =)

[Lynne]

You need to move the code, but also add in some css (additional.css template) - modify as needed:
/* Move reputation to top bar */
.postbitlegacy .posthead .nodecontrols a.reputation, .postbit .posthead .nodecontrols a.reputation {
background: url({vb:stylevar imgdir_button}/reputation-40b.png) no-repeat {vb:stylevar postbit_control_background} {vb:stylevar left};
padding: {vb:stylevar postbit_control_padding};
padding-{vb:stylevar left}: {vb:math {vb:stylevar postbit_control_padding}+20};
border: {vb:stylevar postbit_control_border};
}
.postbitlegacy .posthead .nodecontrols a.reputation:hover, .postbit .posthead .nodecontrols a.reputation:hover {
background: url({vb:stylevar imgdir_button}/reputation-40b-hover.png) no-repeat {vb:stylevar postbit_control_hover_background} {vb:stylevar left};
padding: {vb:stylevar postbit_control_padding};
padding-{vb:stylevar left}: {vb:math {vb:stylevar postbit_control_padding}+20};
border: {vb:stylevar postbit_control_hover_border};
}

[sadiq6210]

Thanks Lynne (f)

It is moved correctly but I have a problem in reputation popupmenu

see the screenshot (RTL language)

It comes like that:
https://vborg.vbsupport.ru/attachment.php?attachmentid=124714&stc=1&d=1293033786


It should be like this:
https://vborg.vbsupport.ru/attachment.php?attachmentid=124715&stc=1&d=1293033786

Any idea to solve this ?

[Lynne]

All I can say is that it's a CSS issue and you will have to modify the positioning of the box. I don't know what code that is since I don't have this problem on my test site.

[sadiq6210]

Lynne,
I tried to use the default style with NO changes in any template + english language (LTR)

but same issue

https://vborg.vbsupport.ru/attachment.php?attachmentid=124721&stc=1&d=1293083248


____

What I changed in default style?

1- Add this code to template (Additional.css)

/* Move reputation to top bar */
.postbitlegacy .posthead .nodecontrols a.reputation, .postbit .posthead .nodecontrols a.reputation {
background: url({vb:stylevar imgdir_button}/reputation-40b.png) no-repeat {vb:stylevar postbit_control_background} {vb:stylevar left};
padding: {vb:stylevar postbit_control_padding};
padding-{vb:stylevar left}: {vb:math {vb:stylevar postbit_control_padding}+20};
border: {vb:stylevar postbit_control_border};
}
.postbitlegacy .posthead .nodecontrols a.reputation:hover, .postbit .posthead .nodecontrols a.reputation:hover {
background: url({vb:stylevar imgdir_button}/reputation-40b-hover.png) no-repeat {vb:stylevar postbit_control_hover_background} {vb:stylevar left};
padding: {vb:stylevar postbit_control_padding};
padding-{vb:stylevar left}: {vb:math {vb:stylevar postbit_control_padding}+20};
border: {vb:stylevar postbit_control_hover_border};
}

2- In template (postbit_legacy), I cut this code

<vb:if condition="$show['reputationlink']">
<span class="reputationpopupmenu popupmenu popupcustom" title="{vb:raw post.postid}"><a class="popupctrl reputation" title="{vb:rawphrase reputation}" href="reputation.php?{vb:raw session.sessionurl}do=addreputation&amp;p={vb:raw post.postid}" rel="nofollow" id="reputation_{vb:raw post.postid}"><!--<img src="{vb:stylevar imgdir_button}/reputation-40b.png" alt="{vb:rawphrase reputation}" /> -->&nbsp;</a></span>
</vb:if>


and move it up, (paste it after this code)

<span class="date">{vb:raw post.postdate}<vb:if condition="!$show['detailedtime']">&nbsp;<span class="time">{vb:raw post.posttime}</span></vb:if></span>
</vb:if>
</span>
<span class="nodecontrols">

Anything wrong?

[Lynne]

Then just write some CSS to change it. Something like:
.nodecontrols .popupbody li > label {color: pink;}
.formcontrols .blockrow label.full {color: pink;}

[sadiq6210]

Thanks Lynne

Now It is perfect =) Appreciated
I will paste the change here if someone need it in future

.blockhead {
text-align: right;
font-weight:bold;
}
.formcontrols > *:first-child,
.formcontrols .blocksubhead + .blockrow,
.formcontrols .section .blockrow:first-child {
border-top:none;
color: red;
text-align: right;
}
.formcontrols .blockrow label {
color: black;
text-align: right;
}
.formcontrols .blockrow label.full {
color: black;
text-align: right;
}


For LTR language, Just change (right) >> (left)