vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB3 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=111)
-   -   User Tags per Row (https://vborg.vbsupport.ru/showthread.php?t=260501)

x_Coffee_x 03-16-2011 09:36 PM

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

Lynne 03-16-2011 09:38 PM

This was talked about recently (a month or so ago?). Have you tried a search at all?

x_Coffee_x 03-16-2011 09:53 PM

I looked but couldn't find it.. Can you please link me? Thanks in advance.

Lynne 03-16-2011 09:59 PM

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).

x_Coffee_x 03-16-2011 10:04 PM

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.

Lynne 03-17-2011 12:20 AM

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

x_Coffee_x 03-17-2011 12:50 AM

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?

Lynne 03-17-2011 01:55 AM

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.

x_Coffee_x 03-17-2011 03:48 PM

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

Lynne 03-17-2011 04:24 PM

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.

x_Coffee_x 03-17-2011 05:12 PM

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 ><

Lynne 03-17-2011 08:02 PM

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.

x_Coffee_x 03-17-2011 08:47 PM

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?

Lynne 03-17-2011 09:03 PM

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.

x_Coffee_x 03-17-2011 09:19 PM

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

Lynne 03-17-2011 10:52 PM

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;}
.class33 {width:33%; display: inline-block;}
.class25 {width:25%; display: inline-block;}


x_Coffee_x 03-18-2011 12:01 AM

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.

Lynne 03-18-2011 04:20 AM

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.

x_Coffee_x 03-18-2011 01:03 PM

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.

Lynne 03-18-2011 04:15 PM

In the postbit is this:
HTML Code:

                        <span class="rank">{vb:raw post.rank}</span>
That is where the ranks get spit out. So, you need to set that class to a width.
HTML Code:

.postbit .userinfo .rank {    width: 100%;}

x_Coffee_x 03-18-2011 05:02 PM

That isn't in the postbit. This is.

Code:

<if condition="$post['rank']"><div class="class33">$post[rank]</div></if>
I put the css into my additional CSS template.. but what do I put in the postbit? What do I change the code I have now to? class33 = 440px

Lynne 03-18-2011 05:06 PM

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%.

x_Coffee_x 03-18-2011 05:14 PM

Quote:

Originally Posted by Lynne (Post 2174833)
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%.

I told you that I changed Class 33 to be 440px or 100% and class25 is 110px or 25%.
I'll PM you a link.

Lynne 03-18-2011 07:09 PM

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
  • Page Generation 0.01948 seconds
  • Memory Usage 1,766KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)bbcode_code_printable
  • (3)bbcode_html_printable
  • (1)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (24)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete