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

ChiprangChiprang New
edited November 2011 in Vanilla 2.0 - 2.8
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)image. It comes on top of the forum user Profile picture.

Can you help me place this button somewhere in the right corner? Thanks.
Tagged:

Best Answer

  • sahotataransahotataran Developer, Bay Area - CA ✭✭✭
    edited November 2011 Answer ✓
    go to http://www.askindia.info/plugins/Voting/design/voting.css
    go to line 131
    find
    ul.MessageList div.Meta span.Votes {
    text-align: center;
    display: block;
    position: absolute;
    right: 684px;
    line-height: normal;
    padding: 0;
    }
    change it to
    ul.MessageList div.Meta span.Votes {
    text-align: center;
    display: block;
    position: absolute;
    right: 0px;
    line-height: normal;
    padding: 0;
    }
    note i changed right:684px to right:0 - this will make it go to right hand side
    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.

Answers

  • 422422 Developer MVP
    Look in voting.css you can float right left position etc, too see the attribute right click and inspect element. Firebug is your friend

    There was an error rendering this rich post.

  • @422, Thanks for the reply. However, after doing to the voting.css I tried changing float to all 'right' it did not work. What should i do now?
  • 422422 Developer MVP
    edited November 2011
    Dont use float right, i havnt got css in front of me for that element , try margin-left:400px for example

    There was an error rendering this rich post.

  • ToddTodd Chief Product Officer Vanilla Staff
    I think the voting button is absolutely positioned. Change either its right or left property.

    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.
  • ChiprangChiprang New
    edited November 2011
    @422, tried but in vain. Here's the voting.css code.
    snip
  • Try harder, use google, try different things, write down the outcomes, etc, etc.

    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.

  • @UnderDog, Thanks for nothing. As i have stated I'm new to this coding..that's why I'm asking reputed members' help. I aslo googled and could not find any solution. I have thrown up mu hands ;) Please help.
  • sahotataransahotataran Developer, Bay Area - CA ✭✭✭
    @Chiprang - this is only some play with CSS.
    find
    ul.MessageList div.Meta span.Votes
    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.

  • @sahotataran, thanks for the efforts. I followed your instruction and it still is not coming perfect in the single page. It has,in face become longer. My forum is http://bit.ly/rwoSlF ... please have a look.
  • sahotataransahotataran Developer, Bay Area - CA ✭✭✭
    edited November 2011 Answer ✓
    go to http://www.askindia.info/plugins/Voting/design/voting.css
    go to line 131
    find
    ul.MessageList div.Meta span.Votes {
    text-align: center;
    display: block;
    position: absolute;
    right: 684px;
    line-height: normal;
    padding: 0;
    }
    change it to
    ul.MessageList div.Meta span.Votes {
    text-align: center;
    display: block;
    position: absolute;
    right: 0px;
    line-height: normal;
    padding: 0;
    }
    note i changed right:684px to right:0 - this will make it go to right hand side
    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.

  • So... I downloaded FireFox for you
    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:right
    or
    right:10px
    The 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.

  • 422422 Developer MVP
    Anytime you see position absolute, it is usually a sibling element, so setting its position using left,right,top,bottom.

    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.

  • sahotataransahotataran Developer, Bay Area - CA ✭✭✭
    hey underdog i guess you can uninstall firefox now. lol joking

    There was an error rendering this rich post.

  • @sahotataran, thanks ... a really BIG one, for the patience and giving me really good beginner tutorial guide. I (in fact 'we') managed to create a beautiful site.

    @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.
  • 422422 Developer MVP
    Ok just checked the css. This is MY css. So Please play with it to suit your needs. In Voting.css

    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.

Sign In or Register to comment.