Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Voting button out of place..please help
Chiprang
New
Hi V members, I'm a newbie here with little knowledge of css . Yesterday, I tried using Voting plugin and it was perfectly fine on the homepage but in the single pages it looks out of place ... (see image)
. It comes on top of the forum user Profile picture.
Can you help me place this button somewhere in the right corner? Thanks.
. It comes on top of the forum user Profile picture. Can you help me place this button somewhere in the right corner? Thanks.
Tagged:
0
Best Answer
-
sahotataran
✭✭✭
go to http://www.askindia.info/plugins/Voting/design/voting.css
go to line 131
findul.MessageList div.Meta span.Votes {change it to
text-align: center;
display: block;
position: absolute;
right: 684px;
line-height: normal;
padding: 0;
}ul.MessageList div.Meta span.Votes {note i changed right:684px to right:0 - this will make it go to right hand side
text-align: center;
display: block;
position: absolute;
right: 0px;
line-height: normal;
padding: 0;
}
if you want it to display left of USER NAME
useul.MessageList div.Meta span.Votes {
text-align: center;
display: block;
position: absolute;
right: 720px;
line-height: normal;
padding: 0;
}There was an error rendering this rich post.
2
Answers
There was an error rendering this rich post.
There was an error rendering this rich post.
rightorleftproperty.I second @422 and suggest that you use Firebug. You can select the element that is confusing you right in your browser and see what's wrong. You can also edit css in real time to troubleshoot stuff.
snip
Don't just post an entire .css file, throw your hands in the air and wait for the ctrl-c and ctrl-v code...
There was an error rendering this rich post.
find in your voting.css
here is u can specify for it
float:right - to make go all over to right
if that does not work then there should be something like
right:X px; - make it 0px or 10px if you want it to move to right.
most likely changing the right:10px or any of your value u want will solve ur problem and if you had posted the link to your forum it would have been just a matter of seconds to solve it
There was an error rendering this rich post.
go to line 131
find
ul.MessageList div.Meta span.Votes {change it totext-align: center;
display: block;
position: absolute;
right: 684px;
line-height: normal;
padding: 0;
}
ul.MessageList div.Meta span.Votes {note i changed right:684px to right:0 - this will make it go to right hand sidetext-align: center;
display: block;
position: absolute;
right: 0px;
line-height: normal;
padding: 0;
}
if you want it to display left of USER NAME
use
ul.MessageList div.Meta span.Votes {text-align: center;
display: block;
position: absolute;
right: 720px;
line-height: normal;
padding: 0;
}
There was an error rendering this rich post.
I installed FireBug for you
I right clicked on the problematic CSS item for you
and I clicked on Inspect element for you
This is the HTML code I see:
<div class="Comment"> <div class="Meta"> <span class="Votes"> <a class="VoteUp SignInPopup" href="href"> <span>1</span> <a class="VoteDown SignInPopup" href="href"> </span> <span class="Author"> <a class="ProfileLink" href="notimportant" title="username"> <img class="ProfilePhotoMedium" alt="username" src="url"> </a> <a href="href">username</a> </span> <span class="DateCreated"> <div class="CommentInfo"> </div> <div class="Message"> Not important</div> </div>and this is the CSS:
ul.MessageList div.Meta span.Votes span { color: #000000; font-size: 18px; font-weight: bold; line-height: 1.2; padding: 0; } voting...=1.1.1b (line 143) .MessageList .Meta span { line-height: inherit; } style.....0.18.1 (line 1179) .MessageList .Meta span { line-height: 2.5; padding-left: 10px; } style.....0.18.1 (line 1168) span.Votes span { background: none repeat scroll 0 0 #0065CE; color: #99E2FE !important; min-width: 36px; padding: 0 4px !important; } voting...=1.1.1b (line 150) span.Votes a, span.Votes span { display: block; }Now the user needs to know where he can CTRL-C and CTRL-V the code:
float:rightor
right:10pxThe user will then probably have problems with caching, but let's see if he can resolve this problem with a little effort from himself.
@Chiprang : thank you for your efforts
There was an error rendering this rich post.
If an element is position relative, you usually position it using margin-top , etc, margin- preceeds the positioning attribute.
So left positioning in any guise moves the element -------> this way and right positioning the opposite.
Sometimes you need to cheat and use negative positioning.
Its not like landscaping, and plonking stuff where you think it should go, you need to hink of parent and sibling elements.
DL firebug.
Then on page right click an element, and choose inspect element.
Then in lower right pane , you should see the css handlers for that elelment, a deft clik on that css code and you can change the way the css affects the page LIVE.
Write down how things work, then apply to your css file, upload , refresh page with ctrl plus f5 and see if the changes work.
Always ork on your own theme css, as many attributes are shared across many files, in this case you shoul be ok
Good luck, apologies for spelling errors i am on an ipad.
There was an error rendering this rich post.
There was an error rendering this rich post.
@UnderDog, I know you love to flirt ... even with the .css codes as well. I still could not get your guide though. Like you I downloaded Firebug and tried to figure out what to do. But as I said before, I'm totally new to coding, I couldn't figure out. Thanks for making this page lively.
@422 and @Todd, Thanks for your valuable time and inputs.
ul.MessageList div.Meta span.Votes { display: block; left: -75px; line-height: normal; padding: 0; position: absolute; text-align: center; }left:-75px is what you need to change, perhaps: left:400px; i dont know.
There was an error rendering this rich post.