Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Javascript] Auto alignment subforums



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  weasel

avatar
Punbb Rookie
Punbb Rookie


Tutorial: Auto alignment subforums

Today I will show something interesting, auto arranging child boards on phpBB3 and punBB version, beta version.
Now the settings:
ACP > Display > Homepage > Structure and hierarchy:


Credits: StaarK*

--> Tutorials, tips and tricks <--
Auto alignment subforums


- Css
Code:
.subforums {
margin: 2px 0 3px 5px;
padding-left: 20px;
background: url(http://community.invisionpower.com/filestore/public/style_images/master/subforum_stem.png) no-repeat left 4px;
overflow: hidden;
float: left;
min-width: 100px;
}

.sub:nth-child(odd) {
float: left;
clear: both;
width: 160px;
position: relative;
}

.sub:nth-child(even) {
float: right;
width: auto;
position: relative;
}

.sub:nth-child(even):last-child {
position: relative;
left: -3px;
}
- Javascript
phpBB3
Code:
$(document).ready(function(){
$('.topiclist.forums li.row').each(function(){
$(this).find('.dterm a:has(img)').next().wrap('<li class="sub" />');
$(this).find('.dterm li').wrapAll('<ul class="subforums" />');
$(this).find('.dterm a:has(img)').remove();
});

$('.topiclist.forums').each(function(index){
cm = $(this).html();
cm = cm.replace(/, /gi,'');
$(this).html(cm);
});

});
punBB
Code:
$(document).ready(function(){
$('.subforums').each(function(){
$(this).find('a:has(img)').next().wrap('<li class="sub" />');
$(this).find('a:has(img)').remove();
});

$('.subforums').each(function(index){
cm = $(this).html();
cm = cm.replace(/, /gi,'');
$(this).html(cm);
});

});
ACP > Display > Templates >  General > index_box
find:

Code:
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
replace with:

Code:
<ul class="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</ul>


- Preview
phpBB3
punBB





© PunBB Design



If you have any questions related to this topic create a topic with the following title:
Auto alignment subforums

Powered by PunBB
Currently 0 users have thanked weasel for this post:

2
Offline

  Ethen

avatar
Punbb Rookie
Punbb Rookie
tutorial is copy !!!

Powered by PunBB
Currently 0 users have thanked Ethen for this post:

3
Offline

  Zyon

avatar
Punbb Guru
Punbb Guru
Please tell us from where.

Tutorial will not be accepted before we get answer from where, but it will be open before we get answer.

Powered by PunBB
Currently 0 users have thanked Zyon for this post:

4
Offline

  weasel

avatar
Punbb Rookie
Punbb Rookie
Credits have been added.

Powered by PunBB
Currently 0 users have thanked weasel for this post:

5
Offline

  tommycoo

avatar
Punbb Senior
Punbb Senior
i don't see it will work for punbb ?

Powered by PunBB
Currently 0 users have thanked tommycoo for this post:

6
Offline

  unleashed

avatar
Newbie
Newbie
its not working with punbb any help please ?

Powered by PunBB
Currently 0 users have thanked unleashed for this post:

7
Offline

  weasel

avatar
Punbb Rookie
Punbb Rookie
My mistake . I have not added what need to be edited in index_box . Read over again the tutorial .

Powered by PunBB
Currently 0 users have thanked weasel for this post:

8
Offline

  unleashed

avatar
Newbie
Newbie
ohh thanks but got some error in it i mean about alignment

u can see the picture below



i ticked with green mark u can understand it (colours channel must start with same alignment with above as life ok & below Anime) i mean in same line hope u got it

so where was i wrong any help ?

thanks

Powered by PunBB
Currently 0 users have thanked unleashed for this post:

9
Offline

  Guest

avatar
Guest
Thanks alot just what I was looking for Smile Props Smile

Powered by PunBB
Currently 0 users have thanked Guest for this post:

10
Offline

  Eca|ErcHimA|

avatar
Punbb Rookie
Punbb Rookie
every time you create a new category, they will return to normal, why?

Powered by PunBB
Currently 0 users have thanked Eca|ErcHimA| for this post:

11
Offline

  Shadow

avatar
Administrator
Administrator
Tutorial accepted.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

12
Offline

  Eca|ErcHimA|

avatar
Punbb Rookie
Punbb Rookie
how to make that into 3 lists, because with 2 parts, it will be too long down

Powered by PunBB
Currently 0 users have thanked Eca|ErcHimA| for this post:

13
Offline

  Zyon

avatar
Punbb Guru
Punbb Guru
Hey Eca.

I can make it for u, but tomorrow if you can wait Smile

Powered by PunBB
Currently 0 users have thanked Zyon for this post:

14
Offline

  Virus

avatar
★Moderator★
★Moderator★
Hello. I added this tutorial but in some categories it shows me this space and to some others not! Why?

This is perfect. Take a look:

But this is not:

Why does it make me this distance?

Powered by PunBB
Currently 0 users have thanked Virus for this post:

15
Offline

  Shadow

avatar
Administrator
Administrator
Marios94 wrote:[link="/t177-javascript-auto-alignment-subforums#2773"]Hello. I added this tutorial but in some categories it shows me this space and to some others not! Why?

This is perfect. Take a look:

But this is not:

Why does it make me this distance?

Check if you have at description tags such as: [ic]<br>[/ic] or [ic]<p>[/ic]

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

16
Offline

  Virus

avatar
★Moderator★
★Moderator★
Thanks! You were right! Its perfect now!

Powered by PunBB
Currently 0 users have thanked Virus for this post:

17
Offline

  ICU_Sinner

avatar
Newbie
Newbie
I still have a gap like him =x

Powered by PunBB
Currently 0 users have thanked ICU_Sinner for this post:

18
Offline

  Sponsored content



Powered by PunBB
Currently 0 users have thanked Sponsored content for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum