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/attachmen...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:



It should be like this:


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




____

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)