Jump to content
  • 1
Sign in to follow this  
Portocala

Tutorial aranjare subforumuri pe 3 coloane

Question

La baza e acelasi lucru ca si in ipb 3.4 dar in ipb 4.0 s-au schimbat putn if-urile.

Tutorialul:

Mergeti la : ACP > Customization > Themes > Ur theme > HTML & CSS Codes > forums > front > index > forumRow si cautati :

{{if $forum->hasChildren()}}
				<ul class="ipsDataItem_subList ipsList_inline">
					{{foreach $forum->children() as $subforum}}
						<li class="{{if \IPS\forums\Topic::containerUnread( $subforum )}}ipsDataItem_unread{{endif}}">
							<a href="{$subforum->url()}">{{if \IPS\forums\Topic::containerUnread( $subforum )}}<span class='ipsItemStatus ipsItemStatus_tiny {{if !\IPS\forums\Topic::containerUnread( $subforum ) && !$subforum->redirect_on}}ipsItemStatus_read{{endif}}'><i class="fa fa-circle"></i></span>&nbsp;{{endif}}{$subforum->_title}</a>
						</li>
					{{endforeach}}
				</ul>
			{{endif}}

Stergeti asta, si cautati:

{{if $forum->description}}
				<div class="ipsDataItem_meta ipsType_richText">{$forum->description|raw}</div>
			{{endif}}

Dedesupt agauti:

{{if $forum->hasChildren()}}
					<ol class='ipsList_inline ipsType_small subforums2'>
{{foreach $forum->children() as $subforum}}</ol>
<ol class='ipsList_inline ipsType_small subforums3'>
{{if \IPS\forums\Topic::containerUnread( $subforum )}}
<li class='unread'>
{{endif}}
{{if !\IPS\forums\Topic::containerUnread( $subforum )}}
<li>
{{endif}}
{{endforeach}}
</ol>
<ol class='ipsList_inline ipsType_small subforums'>
{{foreach $forum->children() as $subforum}}</ol>
<ol class='ipsList_inline ipsType_small subforums1'>
{{if \IPS\forums\Topic::containerUnread( $subforum )}}<li class='unread'>
{{endif}}
{{if !\IPS\forums\Topic::containerUnread( $subforum )}}
<li>
{{endif}}
<a href="{$subforum->url()}">{$subforum->_title}</a></li>
{{endforeach}}</ol>
			{{endif}}

Aceasta este tot! Munca este gata, aici doar. (In acelasi timp plasati subforumurile sub descrierea forumului "mama")

Acum mergeti la CSS Tab > custom.css si adaugati la sfarsit:

ol.subforums1 {
  
  margin-top: 3px;
  float: left;
  width: 33%;
  
}
ol.subforums1 li {
  
  background: url('http://mixgamers.ro/forum/public/style_images/wipeout/subforum_vechi.png') no-repeat 0 50%;
  padding: 0 15px 0 15px;
  margin: 0;
  float: left;
  
}
.subforums1 li.unread { 
  font-weight: bold; 
  background-image: url('http://mixgamers.ro/forum/public/style_images/wipeout/subforum_nou.png'); 
}
ol.subforums2 {
  
  width: 33%;
  overflow: hidden;
  
}
ol.subforums2 li {
  
  background: url('http://mixgamers.ro/forum/public/style_images/wipeout/subforum_vechi.png') no-repeat 0 50%;
  padding: 0 15px 0 15px;
  margin: 0;
  float: left;
  
}
.subforums2 li.unread { 
  font-weight: bold; 
  background-image: url('http://mixgamers.ro/forum/public/style_images/wipeout/subforum_nou.png'); 
}
ol.subforums3 {
  width: 33%;
  overflow: hidden;
}
ol.subforums3 li {
  background: url('http://mixgamers.ro/forum/public/style_images/wipeout/subforum_vechi.png') no-repeat 0 50%;
  padding: 0 15px 0 15px;
  margin: 0;
  float: left;
}
.subforums3 li.unread { 
  font-weight: bold;
  background-image: url('http://mixgamers.ro/forum/public/style_images/wipeout/subforum_nou.png'); 
}

Ca sa schimbati imaginile la forumurile citite editati link-ul aceasta oriunde il gasiti in codul CSS de mai sus:

http://mixgamers.ro/forum/public/style_images/wipeout/subforum_vechi.png

Si ca sa schimbati imaginile la forumurile necitite editati link-ul aceasta oriunde il gasiti in codul CSS de mai sus:

http://mixgamers.ro/forum/public/style_images/wipeout/subforum_nou.png

Asta este tot! Munca este gata si aici!

Succes! :)

 

  • Like 2
  • Downvote 2

Share this post


Link to post
Share on other sites

16 answers to this question

Recommended Posts

  • 1

Si .... care e greseala? Stiti ce face acel if macar?

Pentru 

<li{{if \IPS\forums\Topic::containerUnread( $subforum )}} class="unread"{{endif}}>

daca 

\IPS\forums\Topic::containerUnread( $subforum )

are valoarea true, atunci devine 

<li class="unread">

in caz contrar e 

<li>

 

On 8/28/2018 at 11:17 PM, dOc MFX said:

O mica corectie ai uitat sa inchizi un > la  ( e inchis gresit )


<li>{{if \IPS\forums\Topic::containerUnread( $subforum )}} class="unread"{{endif}}>

Asta n-are niciun sens. Vrei sa afisezi {{if \IPS\forums\Topic::containerUnread( $subforum )}} class="unread"{{endif}}> in pagina? Pe langa ca dai peste cap tot codul.

Share this post


Link to post
Share on other sites

  • 0
17 minutes ago, AssAssiN said:

Mi-am stricat toata tema cu tn ....

=))  e foarte usor,  nu ai facut tu ceva bine 

  • Sad 1

Share this post


Link to post
Share on other sites
  • 0
2 hours ago, AssAssiN said:

Mi-am stricat toata tema cu tn ....

Oh scuze... :( Pentru tine actulizez tutorialul ca-mi pare rau  :TrollTriste:

Testat pe ipb 4.3.5
 

Spoiler

 

Mergeti la : ACP > Customization > Themes > Ur theme > HTML & CSS Codes > forums > front > index > forumRow si cautati:


			{{if $forum->hasChildren()}}
				<ul class="ipsDataItem_subList ipsList_inline">
					{{foreach $forum->children() as $subforum}}
						<li class="{{if \IPS\forums\Topic::containerUnread( $subforum )}}ipsDataItem_unread{{endif}}">
							<a href="{$subforum->url()}">{{if \IPS\forums\Topic::containerUnread( $subforum )}}<span class='ipsItemStatus ipsItemStatus_tiny {{if !\IPS\forums\Topic::containerUnread( $subforum ) && !$subforum->redirect_on}}ipsItemStatus_read{{endif}}'><i class="fa fa-circle"></i></span>&nbsp;{{endif}}{$subforum->_title}</a>
						</li>
					{{endforeach}}
				</ul>
			{{endif}}
			{{if $forum->description}}
				<div class="ipsDataItem_meta ipsType_richText ipsContained">{$forum->description|raw}</div>
			{{endif}}

Si schimbati in: 


			{{if $forum->description}}
				<div class="ipsDataItem_meta ipsType_richText ipsContained">{$forum->description|raw}</div>
			{{endif}}
			{{if $forum->hasChildren()}}
				<ul class="puffysticks-subforums">
					{{foreach $forum->children() as $subforum}}
						<li{{if \IPS\forums\Topic::containerUnread( $subforum )}} class="unread"{{endif}}>
							<a href="{$subforum->url()}">{{if \IPS\forums\Topic::containerUnread( $subforum )}}<span class='ipsItemStatus ipsItemStatus_tiny {{if !\IPS\forums\Topic::containerUnread( $subforum ) && !$subforum->redirect_on}}ipsItemStatus_read{{endif}}'><i class="fa fa-circle"></i></span> {{endif}}{$subforum->_title}</a>
						</li>
					{{endforeach}}
				</ul>
			{{endif}}

Mai adaugati si asta in ACP > Customization > Themes > Ur theme > HTML & CSS Codes > CSS Tab > front > custom > custom.css ( la sfarsit de fisier )


 .puffysticks_subforums {
     display: grid;
     grid-template-columns: 33% 33% 33%;
     list-style: none;
     padding: 0;
 }

 .puffysticks_subforums li:before {
     content: '\f067';
     font-family: 'FontAwesome'; 
     font-size: 10px;
     position: relative;
     bottom: 1px;
     color: #a5a5a5;
 }

 .puffysticks_subforums li.unread:before {
     color: inherit;
 }

 @media screen and (max-width: 1280px) { 
    .puffysticks_subforums {
        grid-template-columns: 50% 50%;
    }
 }

 @media screen and (max-width: 476px) { 
    .puffysticks_subforums {
        grid-template-columns: 100%;
    }
 }

 

Enjoy :) 

  • Like 1
  • Haha 2

Share this post


Link to post
Share on other sites
  • 0
On 8/24/2018 at 2:51 PM, Portocala said:

Oh scuze... :( Pentru tine actulizez tutorialul ca-mi pare rau  :TrollTriste:

Testat pe ipb 4.3.5
 

  Hide contents

 

Mergeti la : ACP > Customization > Themes > Ur theme > HTML & CSS Codes > forums > front > index > forumRow si cautati:



			{{if $forum->hasChildren()}}
				<ul class="ipsDataItem_subList ipsList_inline">
					{{foreach $forum->children() as $subforum}}
						<li class="{{if \IPS\forums\Topic::containerUnread( $subforum )}}ipsDataItem_unread{{endif}}">
							<a href="{$subforum->url()}">{{if \IPS\forums\Topic::containerUnread( $subforum )}}<span class='ipsItemStatus ipsItemStatus_tiny {{if !\IPS\forums\Topic::containerUnread( $subforum ) && !$subforum->redirect_on}}ipsItemStatus_read{{endif}}'><i class="fa fa-circle"></i></span>&nbsp;{{endif}}{$subforum->_title}</a>
						</li>
					{{endforeach}}
				</ul>
			{{endif}}
			{{if $forum->description}}
				<div class="ipsDataItem_meta ipsType_richText ipsContained">{$forum->description|raw}</div>
			{{endif}}

Si schimbati in: 



			{{if $forum->description}}
				<div class="ipsDataItem_meta ipsType_richText ipsContained">{$forum->description|raw}</div>
			{{endif}}
			{{if $forum->hasChildren()}}
				<ul class="puffysticks-subforums">
					{{foreach $forum->children() as $subforum}}
						<li{{if \IPS\forums\Topic::containerUnread( $subforum )}} class="unread"{{endif}}>
							<a href="{$subforum->url()}">{{if \IPS\forums\Topic::containerUnread( $subforum )}}<span class='ipsItemStatus ipsItemStatus_tiny {{if !\IPS\forums\Topic::containerUnread( $subforum ) && !$subforum->redirect_on}}ipsItemStatus_read{{endif}}'><i class="fa fa-circle"></i></span> {{endif}}{$subforum->_title}</a>
						</li>
					{{endforeach}}
				</ul>
			{{endif}}

Mai adaugati si asta in ACP > Customization > Themes > Ur theme > HTML & CSS Codes > CSS Tab > front > custom > custom.css ( la sfarsit de fisier )



 .puffysticks_subforums {
     display: grid;
     grid-template-columns: 33% 33% 33%;
     list-style: none;
     padding: 0;
 }

 .puffysticks_subforums li:before {
     content: '\f067';
     font-family: 'FontAwesome'; 
     font-size: 10px;
     position: relative;
     bottom: 1px;
     color: #a5a5a5;
 }

 .puffysticks_subforums li.unread:before {
     color: inherit;
 }

 @media screen and (max-width: 1280px) { 
    .puffysticks_subforums {
        grid-template-columns: 50% 50%;
    }
 }

 @media screen and (max-width: 476px) { 
    .puffysticks_subforums {
        grid-template-columns: 100%;
    }
 }

 

Enjoy :) 

O mica corectie ai uitat sa inchizi un > la  ( e inchis gresit )

<li>{{if \IPS\forums\Topic::containerUnread( $subforum )}} class="unread"{{endif}}>

Share this post


Link to post
Share on other sites
  • 0
6 minutes ago, Portocala said:

Nu vad de unde ai scos portiunea aia de cod... Am dat cu ctrl + f and nothing. 

{{if $forum->description}}
				<div class="ipsDataItem_meta ipsType_richText ipsContained">{$forum->description|raw}</div>
			{{endif}}
			{{if $forum->hasChildren()}}
				<ul class="puffysticks-subforums">
					{{foreach $forum->children() as $subforum}}
						<li{{if \IPS\forums\Topic::containerUnread( $subforum )}} class="unread"{{endif}}>
							<a href="{$subforum->url()}">{{if \IPS\forums\Topic::containerUnread( $subforum )}}<span class='ipsItemStatus ipsItemStatus_tiny {{if !\IPS\forums\Topic::containerUnread( $subforum ) && !$subforum->redirect_on}}ipsItemStatus_read{{endif}}'><i class="fa fa-circle"></i></span> {{endif}}{$subforum->_title}</a>
						</li>
					{{endforeach}}
				</ul>
			{{endif}}

Adaugasem eu un > mai sus, de asta nu o gaseai.

Share this post


Link to post
Share on other sites
  • 0

Deci serios, nu vad greseala, ia te rog portiunea de cod si pune varianta incorecta vs cea incorecta, evetual foloseste si culori, ca efectiv is orb aparent =))

Share this post


Link to post
Share on other sites
  • 0
1 hour ago, Portocala said:

Deci serios, nu vad greseala, ia te rog portiunea de cod si pune varianta incorecta vs cea incorecta, evetual foloseste si culori, ca efectiv is orb aparent =))

Cred ca nu puteai sa dormi noaptea de greseala ta.

Here you go.

  • Like 1
  • Haha 1

Share this post


Link to post
Share on other sites
  • 0
2 hours ago, Portocala said:

Deci serios, nu vad greseala, ia te rog portiunea de cod si pune varianta incorecta vs cea incorecta, evetual foloseste si culori, ca efectiv is orb aparent =))

Ti-a trimis strong, unde ai gresit. E tutorialul tau, nu ma bag peste tine!

Share this post


Link to post
Share on other sites
  • 0
12 minutes ago, Courage said:

Si .... care e greseala? Stiti ce face acel if macar?

Pentru 


<li{{if \IPS\forums\Topic::containerUnread( $subforum )}} class="unread"{{endif}}>

daca 


\IPS\forums\Topic::containerUnread( $subforum )

are valoarea true, atunci devine 


<li class="unread">

in caz contrar e 


<li>

 

Asta n-are niciun sens. Vrei sa afisezi {{if \IPS\forums\Topic::containerUnread( $subforum )}} class="unread"{{endif}}> in pagina? Pe langa ca dai peste cap tot codul.

Poti sa imi faci si mie un screen cum iti arata tie forumul cu codul de mai sus? ( Multumesc anticipat )

 

 

Share this post


Link to post
Share on other sites
  • 0
16 hours ago, Courage said:

Si .... care e greseala? Stiti ce face acel if macar?

Cel original are {{if etc.. adaugat in class

<li class="{{if \IPS\forums\Topic::containerUnread( $subforum )}}ipsDataItem_unread{{endif}}">

Cel dat de Portocala il are in jurul lui.

<li{{if \IPS\forums\Topic::containerUnread( $subforum )}} class="unread"{{endif}}>

Nu are rost sa mai lungim discutia aiurea.

Share this post


Link to post
Share on other sites
  • 0
3 minutes ago, strongtaz said:

Este gresit ca nu ne-am uitat mai atent la acel {{if...

Cel original are {{if etc.. adaugat in class


<li class="{{if \IPS\forums\Topic::containerUnread( $subforum )}}ipsDataItem_unread{{endif}}">

Cel dat de Portocala il are in jurul lui.


<li{{if \IPS\forums\Topic::containerUnread( $subforum )}} class="unread"{{endif}}>

Nu are rost sa mai lungim discutia aiurea.

Yes my friend, daca subforumul nu e citit, clasa css care se aplica este "unread" (definita in primul post din acest topic) in loc de "ipsDataItem_unread". So ... unde e greseala?

7 minutes ago, dOc MFX said:

Poti sa imi faci si mie un screen cum iti arata tie forumul cu codul de mai sus? ( Multumesc anticipat )

N-am stat sa rulez, nici n-am timp momentan, sunt la lucru. Dar daca vrei tu neaparat vad mai tarziu. Acel tag <li se inchide la {{endif}}>. Deci n-a uitat sa inchida nimic.

Share this post


Link to post
Share on other sites
  • 0
14 minutes ago, Courage said:

Yes my friend, daca subforumul nu e citit, clasa css care se aplica este "unread" (definita in primul post din acest topic) in loc de "ipsDataItem_unread". So ... unde e greseala?

N-am stat sa rulez, nici n-am timp momentan, sunt la lucru. Dar daca vrei tu neaparat vad mai tarziu. Acel tag <li se inchide la {{endif}}>. Deci n-a uitat sa inchida nimic.

Din pacate am gresit eu, si imi asum, am luat tot codul din nou sa ma uit peste el.-.-

Share this post


Link to post
Share on other sites
  • 0
16 hours ago, Courage said:

Yes my friend, daca subforumul nu e citit, clasa css care se aplica este "unread" (definita in primul post din acest topic) in loc de "ipsDataItem_unread". So ... unde e greseala?

N-am stat sa rulez, nici n-am timp momentan, sunt la lucru. Dar daca vrei tu neaparat vad mai tarziu. Acel tag <li se inchide la {{endif}}>. Deci n-a uitat sa inchida nimic.

Macar ai citit ce am scris acolo?

Am zis ca e gresit? eu doar am dat o poza la ce s-a referit doc + explicatia de ce a crezut ca e gresit.

Share this post


Link to post
Share on other sites
  • 0

Chill ... nu stiam la ce te referi prin 

17 hours ago, strongtaz said:

Este gresit ca nu ne-am uitat mai atent la acel {{if...

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×