![]() |
User Tags per Row
Does anyone know where I can find this mod/how to do this?
https://vborg.vbsupport.ru/external/2011/03/22.png |
This was talked about recently (a month or so ago?). Have you tried a search at all?
|
I looked but couldn't find it.. Can you please link me? Thanks in advance.
|
I don't have a link to it. I don't think it was in the modification area, I just remember discussing with a guy how to do it (set up a user profile field, modify width of div tags for ranks based on how many tags per row).
|
I found a link on Displaying Ranks, but he was told to request a Paid Service, however that was nothing that I am looking for.. Basically, I just want it to like.. after 6 or 7 ranks, start a new line with the rest of the ranks. I am not looking for this mod specifically, but I knew that this mod does that. If you can just tell me how to make it so after about 5, 6, or 7 ranks it made a new row of them.. That would be great.
|
You just make divs around each rank:
<div class="$var">rank1</div> <div class="$var">rank2</div> <div class="$var">rank3</div> etc. and use a different class based on the number of tags. 2 tags, $var = class50 3 tags, $vat = class33 4 tags, $var = class25 etc and then: .class50 {width:50%;} .class33 {width:33%;} .class25 {width:25%;} etc |
Uh.. what.. I'm confused, where do I put all of that? I get I put <div class="$var"><img src="whatever"></div>.. but I don't get the other 2 things..
For 4 tags, would I do <div class="$var=class25"><img src="whatever"></div>? If so, where would I put that .class50 {width:50%;} and everything? Also, what are the ones for 5 or 6 tags? |
You'll need to write a plugin to get the field where they set the number of tags and set $var from that. The classes just go in the additional.css template (or whichever template you choose to put them in).
As for widths... 2 tags, width = 1/2. For 3 tags, width = 1/3, etc. Times it by 100 to get the percent. |
Ok, this is what I did.
I put this in Additional CSS; .class50 {width:50%;} .class33 {width:33%;} .class25 {width:25%;} Then I went into the Ranks Manager and did this code; <div class="class25"><img src="myimagelink"></div> But after I did this to every rank, now they are all stacked on top of eachother, which I simply could have done by just using the Yes option with the Stack Rank feature.. How can I make it so its 4 per row? Here's a snapshot. https://vborg.vbsupport.ru/external/2011/03/19.png |
You also need to put all the divs/ranks into a big div that stretches across the whole area (width: 100%). Also, I have no idea what other CSS you may have being applied to your ranks - clear tags? float tags? Very hard to tell by an image but you need to look at that also.
|
No idea what you just said. All I have for my ranks are;
That .class25 stuff you told me to put in Additional CSS. and the HTML code I provided. Here's more pics.. No float tag or clear tags. https://vborg.vbsupport.ru/external/2011/03/17.png <-- Rank Manager (if I listed all it would be too big) https://vborg.vbsupport.ru/external/2011/03/18.png <-- Toon Rank (when on edit mode) Basically, like I said, the HTML code is <div class="class25"><img src="myimagelink"></div> I don't know what you said about another big div.. a walkthrough would be nice >< |
If you need someone to actually code this for you, then you should probably post in the Paid Requests forum. All I can really do is give you pointers and tell you how I would go about it. I'm not going to actually do the work for you.
clear and float are tags that would be in your CSS. If you use firebug, you can see what CSS is being applied to your images. I am suggesting that perhaps there is some being applied and you need to get rid of it, but that is something you would have to look into since images don't tell us what CSS is being used. |
All I need is pointers, but I just don't get how to do it.
I set class33 to be 100% width. I went into the Postbit template and added <div class="class33">$post[rank]</div> Then I kept the ranks HTML at <div class="class25"><img src="myimagelink"></div> class25 = 25%. On firebug, I can't find where it says where they're floating or not.. I went into firebug, and selected a rank with it on a post. What am I doing wrong? |
In your postbit is where your ranks are spit out. It is there that you need to set the .rank tag that spans 100% (or however many pixels) to contain your row. Then, in the ranks themselves, you would have the div/span like you are using. A different div class based on how may tags per row. I think you may have to set those to be display:inline-block also (since the rank class is set to be display:block by default).
Make sure you don't make them stackable since that puts a <br> tags between them. |
Where can I find display:block so I can change it to display:inline-block?
The ranks aren't set to stack. Also, I have set the .class25 and .class 33 to {width:110px;} and {width:440px;} (One rank is 110px long but x4 is 440px) and even changed it back to 25% and 100% but nothing changed. I think I am doing something wrong. :/ |
You need to change the display in the .class that you are using for the ranks. For example:
HTML Code:
.class50 {width:50%; display: inline-block;} |
Thanks. I did this (as also stated in PM) which I replied to, but I will also reply here.
This seems to be working, but it recognizes the 4 ranks.. but it isn't making a new line for these other 2. Look here. https://vborg.vbsupport.ru/external/2011/03/14.png It isn't dropping the other 2 to another line. |
You need to set the width of the outer div/span for the rank to be only large enough to contain the ranks you are putting into it. If you set it to 100% and then put things in it that are set to 25%, then you will only get four in a row before it flows to the next line.
|
Hi.. How to set outer DIV?
I don't know how to go about making a div, and just learned what these classes were when you told me rofl. |
In the postbit is this:
HTML Code:
<span class="rank">{vb:raw post.rank}</span> HTML Code:
.postbit .userinfo .rank { width: 100%;} |
That isn't in the postbit. This is.
Code:
<if condition="$post['rank']"><div class="class33">$post[rank]</div></if> |
How about a link to see this? It's very hard to see if you've done it correctly when you don't post a link. And why did you change it to class33? class33 was supposed to be used if a user wants 3 ranks across and it would be defined as a width of 33%.
|
Quote:
I'll PM you a link. |
Try floating the ranks left also.
I would suggest you bookmark this site for help with CSS - W3Schools |
All times are GMT. The time now is 06:06 PM. |
Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
![]() |
|
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|