How to customize Personalize sub-forums display (more)

[coaogati]

Dear Forumotion,

I have just finished several steps on the topic "
Personalize sub-forums display". However, I have more requests as below:



The image with 5 steps:

- Pic. #1, Categories and forums setup.
- Pic. #2, The completed of construction "Personalize sub-forums display".
- Pic. #3, The icons that I want them show up the topic got news or not.

Link images:
- New responses:

Code:

https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/960132_423705514452924_5132713039085827794_n.jpg?oh=81b0889db832d5834e6fdc547385517e&oe=553F9275&__gda__=1425620889_c853fc987499cc51915fe8a0603e8a45

- Nothing news:

Code:

https://scontent-a-sin.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/10325504_423705524452923_4492252961070206696_n.jpg?oh=91a052273091e31111b3e1083958c27a&oe=54FC6E2C

- Pic. #4, I tried however It is not what I want.

- Pic. #5, I need the Sub-forums must be align (Rows and columns) as per Pic.#5 but the icons can be show that these posts are new or old.

This is link to my forum (Version phpBB3):

Code:

http://coaogati.forumvi.com

Test account if needed:

Code:

Account: testingacc
Password: A123456Z

Merry Christmas and Happy New Year!

Thank you!

[coaogati]

Dear Forumotion,

How to get things done? Is this possible?

[Ange Tuteur]

Hello @coaogati,

You are wanting the sub-forum links to be equal in width ? I didn't understand too well, could you clarify ?

Thanks

[coaogati]

Hello Ange,

Please look at the image below to make my requests clearer.

Since I have many sub-forums in one category. So, I need the sub-forums align as three columns in the picture. In another case, if the width of homepage not enough space, we can arrange sub-forums in 2 columns. We also can call "equal in width" as well.

[Ange Tuteur]

You can do this, however you'll need more width in your forum if you're going to use 3 in a row.

Add to CSS :
Display > Colors > CSS stylesheet

Code:

.s_forum a.gensmall {
  display:inline-block;
  width:250px;
}

[coaogati]

This is what I mean. However, it worked not very well. Could you do this by percent (%)?
This means: column one how many percent, column two how many percent and three too.

Thank you for your support!

[Ange Tuteur]

of course, simply change "250px" to something like "50%"

[coaogati]

Sorry! I want difficult more than that.

For example:

- Column one: 45%
- Column two: 30%
- Column three: 25%.

Something like this.

[coaogati]

Anyway to do that?

With your code below, all sub-forum in horizontal will be the same space.

Code:

.s_forum a.gensmall {
  display:inline-block;
  width:250px;
}

I need your help to get them different spaces as below :
- Column one: 45% of width
- Column two: 30% of width
- Column three: 25% of width

[SLGray]

You will have to give each column a different selector to have different sizes.

[coaogati]

Hello Forumotion,
I hope that you have not yet out of control on many questions of your member.
How long can I have your help?

Thank you!

[coaogati]

Hi @SLGray,

Who is the person working on my request? It is in progress 3 days ago.

Thank you!

[Ange Tuteur]

Hello,

I apologize for the wait, I've been busy. Go to Administration Panel > Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : In the homepage
Paste the code below :

Code:

$(function() {
  var max_by_line = 3;
  for (var i=0,a=document.getElementsByTagName('DIV'); i<a.length; i++) {
    if (/s_forum/.test(a[i].className)) {
      var n = 1;
      for (var j=0,b=a[i].getElementsByTagName('A'); j<b.length; j++) {
        if (/gensmall/.test(b[j].className)) {
          if (n>max_by_line) n = 1;
          b[j].className += ' sublink_' + n;
          n++
        }
      }
    }
  }
});

Modify max_by_line to the amount of links you allow per row.

After that you should be able to modify each link with a unique class, like below.

Code:

.s_forum a.gensmall { display:inline-block }
.sublink_1 { width:45% }
.sublink_2 { width:30% }
.sublink_3 { width:25% }

[coaogati]

Hi @Ange Tuteur,

Anyway to understand it easier? Since I do not know anything about coding, so I think that I only can revise number. Can not touch to code.

Thank you!

[Ange Tuteur]

The script I gave you will number each "column" in a row. So if you have 3 "columns" you would use the following :

for column1 : .sublink_1
for column2 : .sublink_2
for column3 : .sublink_3
and so on...

You can use these classes in your CSS stylesheet. The only thing you need to change in the script I gave you is var max_by_line = 3; change the 3 to the number of columns you have in a row. If it's 2, put 2, if not put whatever it is.

[coaogati]

Hi @Ange Tuteur

I applied in JS and CSS per below image:


Sub-Forum will look like below:


Have I do something wrong?

[Ange Tuteur]

You'll need to lower the total width so it comes under 100%. For example :

37% + 27% + 27% = 91%

It might need to be lower, I'm not sure. Anyway, you just need to play around with different values to see what looks good. If the combined width ( see math above ) is too high, then the sublinks will wrap to the next line or row.

[coaogati]

Icon fourth (#4) of sub-forum is always in the first horizontal line. I am current only use 70% in totally. (30% + 20% + 20% = 70%). I went around with many values, but it does not work. I think it will difficult to resize if we have many categories and sub-forum. So, I will make them the same size (space).



Thank you very much Ange!

[Ape]

Is this problem now solved as it marked as solved on the icon ?

[coaogati]

@APE Done!

[Ape]

Thank you @coaogati

Topic solved and archived

Have A APE New Year