7 replies to this topic

[Christian M.]

Hey there, I am gong to show you how to make the subforums look like this:


Instruction:
Go to Look & Feel > "Your Style" > CSS> IPB_style.css and find the following:

Spoiler

table.ipb_table .subforums {
margin: 2px 0 3px 5px;
padding-left: 20px;
background: url({style_images_url}/subforum_stem.png ) no-repeat left 4px;
}
table.ipb_table .subforums li.unread { font-weight: bold; }

table.ipb_table .expander {
visibility: hidden;
width: 16px;
height: 16px;
display: inline-block;
}

And Change it to:

table.ipb_table .subforums {
margin: 2px 0 3px 0px;
padding-left: 0px;
overflow: hidden;
}
table.ipb_table .subforums li{
background: url({style_images_url}/subforum_nonew.png) no-repeat left 3px;
width: 38%;
padding: 4px 15px 0px;
margin: 0;
float: left;
}
table.ipb_table .subforums li.unread {
font-weight: bold;
background-image: url({style_images_url}/subforum_new.png);
}

Well the finding for the subforums are a little different depending on the skin, that was the change-up for the Default Master Skin, Other skin style findings may vary depending on the skin, which the css style will look very different from the style finding for the Default skin. Just find it and replace it with the second part.

P.S - Most likely this will go into a tutorial or someplace I don't know about so If you have any questions just PM me and ill get back to you.

[Im#NuMBeR1]

Didn't work on the "Sylo" skin by pezza.

[Sokii]

Didn't work on the "Sylo" skin by pezza.

It can be done for any skin, but it won't be as easy as copy & replace.

[Christian M.]

like i said the skin may vary.

[CallieJo]

Thank you. It works and works inside categories too (Woohoo!!). But, I had to do it differently because it was causing the expander to always be visible and scrunched.

Here's what I did:

Find (does not include the "table.ipb_table .expander" listed above)

table.ipb_table .subforums {
margin: 2px 0 3px 5px;
padding-left: 20px;
background: url({style_images_url}/subforum_stem.png ) no-repeat left 4px;
}
table.ipb_table .subforums li.unread { font-weight: bold; }

and replace with the original replacement code listed above

Spoiler

table.ipb_table .subforums {
margin: 2px 0 3px 0px;
padding-left: 0px;
overflow: hidden;
}
table.ipb_table .subforums li{
background: url({style_images_url}/subforum_nonew.png) no-repeat left 3px;
width: 38%;
padding: 4px 15px 0px;
margin: 0;
float: left;
}
table.ipb_table .subforums li.unread {
font-weight: bold;
background-image: url({style_images_url}/subforum_new.png);
}

My only questions are:
How do you get rid of the commas now?
Is it possible to get more than two columns?
How did you get an icon infront of each subforum? (Nevermind...It's in css, but I needed to create subforum_nonew.png and subforum_new.png)

[Christian M.]

Answer 1 - That has to do with the template bit - If you want I can help you on that, if I have the time
Answer 2 - Yes it is possible - as you can see it uses a fluid width of 38%; - Just change it (You might also need to change the pixel sizes too depending on your overall .content width (The wrapper)
Answer 3 - Yes you will need to, though if you want i could just give them to you if you don't want to make it

[CallieJo]

Answer 1 - That has to do with the template bit - If you want I can help you on that, if I have the time

Thank you.

Messing around with this, I found a partial solution to: How do you get rid of the commas now?

Editing the templates...

boardIndexTemplate

<a href="{parse url="showforum={$__data[0]}" seotitle="{$__data[2]}" template="showforum" base="public"}" title='{$__data[1]}'>{$__data[1]}</a><if test="isNotLast:|: empty($__data[4] )">,</if>

Delete the comma. Save. Works. But, only works on the board index.

forumIndexTemplate

<a href="{parse url="showforum={$__data[0]}" seotitle="{$__data[2]}" template="showforum" base="public"}" title='{$__data[1]}'>{$__data[1]}</a><if test="isNotLast:|: empty($__data[4] )">,</if>

Delete the comma. Save. Doesn't work. I can't get anything to work for inside categories to get rid of the commas.

Answer 2 - Yes it is possible - as you can see it uses a fluid width of 38%; - Just change it (You might also need to change the pixel sizes too depending on your overall .content width (The wrapper)

Thanks. I'll play around with it and see what happens.

Answer 3 - Yes you will need to, though if you want i could just give them to you if you don't want to make it

Thanks again. I created some images, uploaded, and it works perfectly.

[Christian M.]

forumIndexTemplate

<a href="{parse url="showforum={$__data[0]}" seotitle="{$__data[2]}" template="showforum" base="public"}" title='{$__data[1]}'>{$__data[1]}</a><if test="isNotLast:|: empty($__data[4] )">,</if>

Delete the comma. Save. Doesn't work. I can't get anything to work for inside categories to get rid of the commas.

Elaborate on this more, can you give me the link to your website through pm (you dont have to give me any account details or anything, im jsut gonna use "Inspect Element to fiddle with the looks" Since this i what I do everytime), if you don't want to it's completely fine with me.