The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to make categories like IPB(?)

View previous topic View next topic Go down

Solved How to make categories like IPB(?)

Post by J0k3R^ on April 20th 2014, 12:30 pm

Hello
how can I make my categories titles looking like IPB style?
like this



im using punbb version.


Last edited by J0k3R^ on April 20th 2014, 7:24 pm; edited 1 time in total

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by Pizza Boi on April 20th 2014, 1:21 pm

Hi Very Happy

Hmmm... I'm having a difficult time in adapting for placement, so this is the best I can do for now.

Code:
.page-title h2 {
background: none repeat scroll 0 0 #21385C;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
color: #FFF;
font-size: 12px;
font-weight: 700;
opacity: 1;
padding: 6px 14px;
}

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by J0k3R^ on April 20th 2014, 1:42 pm

gracias Pizza Boi
very good Smile

now its looking like that:




now i just want this blue's width to stop where the categoy title stop like the image i edited:



thank U Smile


Last edited by J0k3R^ on April 20th 2014, 1:49 pm; edited 1 time in total

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by Pizza Boi on April 20th 2014, 1:43 pm

Hi Very Happy

That's actually the problem I encountered in making the code, I tried maneuvering a customized class in the template.

Try placing the classes yourself in index_box and see if you can figure it out. I'm currently working on another problem so I'll get back to this once done.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by J0k3R^ on April 20th 2014, 2:00 pm

well, i dont know what to do, i just tried to add in css "width: XXXpx;" but it becomes the width for all categories (obviously) but i'd like to stop when the categories' titles stop because the title for some categories is big and for some others is very short. when u will finish with ur other problem come back plz Smile

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by Pizza Boi on April 20th 2014, 3:20 pm

Hi Very Happy

LOL, freaking finally, I managed to figure it out :o .

Anyway, in your index_box, find this portion:

Code:
<div class="page-title">{catrow.tablehead.L_FORUM}</div>

Replace it by this:

Code:
<div class="page-title"><span id="thisdesigntoostronk">{catrow.tablehead.L_FORUM}</span></div>

And this in your CSS:

Code:
span#thisdesigntoostronk {
  background: none repeat scroll 0 0 #21385C;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
  color: #FFF;
  font-size: 12px;
  font-weight: 700;
  opacity: 1;
  padding: 6px 14px;
}

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by J0k3R^ on April 20th 2014, 3:58 pm

no? :/


J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by Pizza Boi on April 20th 2014, 4:02 pm

Hi Very Happy

Can you post your index_box please?

Edit: http://tfpbl.forumtl.com/ that's what it looks like in my test forum.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by J0k3R^ on April 20th 2014, 4:06 pm

Code:
<div class="pun-crumbs">
   <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
          <div class="contcolor"><div class="main-head">
         <div class="page-title"><span id="thisdesigntoostronk">{catrow.tablehead.L_FORUM}</span></div>
      </div>
      <div class="main-content">
         <table cellspacing="0" class="table">
            <thead>
               <tr>
                 <th nowrap="nowrap" width="385"><div style="width:385px;"><i>Δημόσια Συζήτηση</i></div></th>
                 <th nowrap="nowrap" width="115"><div style="width:115px;"><i>Θέματα</i></div></th>
                                          <th nowrap="nowrap" width="130"><div style="width:130px;"><i>Τελευταία Απάντηση</i></div></th>
               </tr>
            </thead>
            <tbody class="statused">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
               <tr>
                            <td>
            <a href="{catrow.forumrow.U_VIEWFORUM}" class=
                                                            "forumtitle"><font size="2" face="Verdana"><b>{catrow.forumrow.FORUM_NAME}</b></font></a>
                        <br />
                        <div class="descript"><div class="plaisiocat">
                          {catrow.forumrow.FORUM_DESC}
                          </div></div>
                     <!-- BEGIN switch_moderators_links -->
                     <br />
                     {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                     <!-- END switch_moderators_links -->
                     {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                     <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                  </td>
                                              <td class="tc2" align="center" valign="middle" height="50" width="50">
          <span class="gensmall">Απαντήσεις: {catrow.forumrow.POSTS}<br />Θέματα: {catrow.forumrow.TOPICS}</span>
        </td>
                  <td class="tcr">
                     <span>
                     <!-- BEGIN switch_topic_title -->
                     <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                     <!-- END switch_topic_title -->
                     {catrow.forumrow.USER_LAST_POST}
                     </span>
                  </td>
               </tr>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </tbody>
         </table>
                      </div></div>
   <!-- END tablefoot -->
<!-- END catrow -->
</div>

<!-- BEGIN switch_on_index -->
   <!-- BEGIN switch_delete_cookies -->
   <!-- END switch_delete_cookies -->
<!-- END switch_on_index -->

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by Pizza Boi on April 20th 2014, 4:08 pm

Hi Very Happy

Can you please post your forum URL and make sure it's not under maintenance.

This is the index_box I have:

Code:
<div class="pun-crumbs">
   <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="main-head">
                  <div class="page-title"><span id="der">{catrow.tablehead.L_FORUM}</span></div>
      </div>
      <div class="main-content">
         <table cellspacing="0" class="table">
            <thead>
               <tr>
                  <th class="tcl">{L_FORUM}</th>
                  <th class="tc2">{L_TOPICS}</th>
                  <th class="tc3">{L_POSTS}</th>
                  <th class="tcr">{L_LASTPOST}</th>
               </tr>
            </thead>
            <tbody class="statused">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
               <tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                     <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                     </span>
                                                  <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                     <br />
                     {catrow.forumrow.FORUM_DESC}
                     <!-- BEGIN switch_moderators_links -->
                     <br />
                     {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                     <!-- END switch_moderators_links -->
                     {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                     <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                  </td>
                  <td class="tc2">{catrow.forumrow.TOPICS}</td>
                  <td class="tc3">{catrow.forumrow.POSTS}</td>
                  <td class="tcr">
                     <span>
                     <!-- BEGIN switch_topic_title -->
                     <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                     <!-- END switch_topic_title -->
                     {catrow.forumrow.USER_LAST_POST}
                     </span>
                  </td>
               </tr>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </tbody>
         </table>
      </div>
   <!-- END tablefoot -->
<!-- END catrow -->
</div>

<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
   <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
   </ul>
   <!-- BEGIN switch_delete_cookies -->
   <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
   </p>
   <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

Instead of using thisdesigntoostronk, I used der.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by J0k3R^ on April 20th 2014, 4:11 pm

this is my forumhttp://myplanet.forumgreek.com/forum
and its not under maintance

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by Pizza Boi on April 20th 2014, 4:18 pm

Hi Very Happy

I just realized something in this part of your code:

Code:
<div class="contcolor"><div class="main-head">
        <div class="page-title"><span id="thisdesigntoostronk">{catrow.tablehead.L_FORUM}</span></div>
      </div>

Contcolor MIGHT be conflicting with thisdesigntoostronk. If ever, can you just mix the CSS you used for contcolor with thisdesigntoostronk? Because if you compare it with mine, this is our difference in terms of organization:

Code:
<div class="main-head">
                  <div class="page-title"><span id="der">{catrow.tablehead.L_FORUM}</span></div>
      </div>

Or if ever, change your index_box to this:

Code:
<div class="contcolor">
<div class="main-head">
        <div class="page-title">
<span id="thisdesigntoostronk">{catrow.tablehead.L_FORUM}
</span>
</div>
      </div>
</div>

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by J0k3R^ on April 20th 2014, 4:24 pm

unfortunatelly nothing worked ^^

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by Pizza Boi on April 20th 2014, 4:26 pm

Hi Very Happy

Damn... well if ever, if you don't have ANYMORE modifications in your index_box other than thisdesigntoostronk AND colorcont, please just use my index_box that I posted and the CSS so far.

Edit: Please take note that I use der, so when declaring in CSS, use span#der instead of thisdesigntoostronk.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by J0k3R^ on April 20th 2014, 4:28 pm

i tried already.. no effect..

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by Pizza Boi on April 20th 2014, 4:42 pm

Hi Very Happy

Well... this is highly depressing, lol... anyway, I tried your index_box fine for my test forum and the code I provided works :/ .

Perhaps it has something to do with your CSS, can you please post it here? If any changes I do doesn't work next, I'm out of ideas, sorry :/ .

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by J0k3R^ on April 20th 2014, 4:48 pm

im starting thinking about my css aswell but its about 1.7k linesVery Happy

i sent u PM with that. check it but answer me here so u dont support me via pm

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by Pizza Boi on April 20th 2014, 4:58 pm

Hi Very Happy

Well, if you check it here: http://tfpbl.forumtl.com/ the code still works. I'm even using your CSS. Try changing the general width of your forum via ACP < General < Configuration, if it does not work, I don't know anymore Sad .

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by J0k3R^ on April 20th 2014, 5:02 pm

i see.. :/
i disabled JS and widgets if something were blocking with a way but nothing... still looking like that... :/

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by Luffy on April 20th 2014, 6:44 pm

The only thing you have to do is rename the title of the forums in the templates. Go to index_box
and where it says
Code:
<div class="page-title">{catrow.tablehead.L_FORUM}</div>
replace it with
Code:
<div class="page-title"><div class="nameboxes">{catrow.tablehead.L_FORUM}</div></div>
save and publish and then add in css
Code:
.nameboxes {
background: none repeat scroll 0 0 #21385C;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
color: #FFF;
font-size: 12px;
font-weight: 700;
opacity: 1;
padding: 6px 14px;
text-align:center;
width:200px !important;
}

It works fine to me! This works 100% for PunBB forums.

EDIT: This does not work if you set width as |auto|. I don't know why..

Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by levy on April 20th 2014, 6:56 pm

Add this code in your css;

Code:
.page-title h2{
background: none repeat scroll 0 0 #21385C;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
color: #FFF;
font-size: 12px;
font-weight: 700;
opacity: 1;
padding: 6px 14px;
display:inline-block;
}

levy
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by J0k3R^ on April 20th 2014, 7:04 pm

candy_fear wrote:Add this code in your css;

Code:
.page-title h2{
background: none repeat scroll 0 0 #21385C;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
color: #FFF;
font-size: 12px;
font-weight: 700;
opacity: 1;
padding: 6px 14px;
display:inline-block;
}

thanks man!
worked like charm Very Happy

*Solved*

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by levy on April 20th 2014, 7:13 pm

Anytime. cheers

levy
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by Pizza Boi on April 20th 2014, 7:19 pm

candy_fear wrote:Anytime. cheers

Hi Very Happy

After all that hassle, thanks for solving this candy_fear, lol.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to make categories like IPB(?)

Post by Ange Tuteur on April 20th 2014, 8:32 pm

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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