Surrounding Categories with differing information

[Boy_Wonder]

forum.veskelregion.com/

Farleep is exactly the style I want for the other categories - however how I have it set up is hiding the other categories... how do I make it display all categories but split into 'groups' with a surrounder around them

{if $[category.id] == "4" || $[category.id] == "5" || $[category.id] == "6" || $[category.id] == "7" || $[category.id] == "8" || $[category.id] == "9" || $[category.id] == "10"}

<div class="category-surrounder">

   <div class="category-title-surrounder"><h2>Farleep Island</h2>

   </div>

   <div class="category-content">

       <p class="flavourtext">Welcome to Farleep Island! This is where most trainers start their journey, and it certainly is an island of two halves. Most the towns are filled with peasants, that are ridden roughshod over by the lorded elite down in Saker Keep. Each month there is the annual hunt from Saker Keep that flushes out and injures many pokemon as the elite look for new 'epic' pokemon to capture and attempt to force to their will. This poverty among the common folk however has meant that many have come to believe in a myth that some time the class may change. The low will become high, and the high will be cast down. But regardless - there is always a party on in Saker Keep, if you can get in that is. The towns have their own charms though, festivals happen four times a year to celebrate each solstice.

</p>

{foreach $[category]}

       {if $[category.id] == "4" || $[category.id] == "5" || $[category.id] == "6" || $[category.id] == "7" || $[category.id] == "8" || $[category.id] == "9" || $[category.id] == "10"}

<div class="category-container">

   <div class="title-area $[category.id]">$[category.display_name]</div>

   <div class="board-area">

       <div class="board-container">

           $[category.board_list]

       </div>

       <div class="category-image">

           {if $[category.id] == "4" }<img src="http://storage.proboards.com/6683759/images/jDf4YOWHpyHGC8nNX21D.png">

            {elseif $[category.id] == "5" }<img src="http://storage.proboards.com/6683759/images/3lPUzO9ujNYTnJQ_H_qs.png">

           {elseif $[category.id] == "6" }<img src="http://storage.proboards.com/6683759/images/NtikCVfAr6Bx2Asd5FEB.png">

           {elseif $[category.id] == "7" }<img src="http://storage.proboards.com/6683759/images/Vnj2pN6ihsDoHeByW_yj.png">

           {elseif $[category.id] == "8" }<img src="http://storage.proboards.com/6683759/images/e9MZG2EmQES22l9oKhqP.png">

           {elseif $[category.id] == "9" }<img src="http://storage.proboards.com/6683759/images/e9MZG2EmQES22l9oKhqP.png">

           {elseif $[category.id] == "10" }<img src="http://storage.proboards.com/6683759/images/bhCMtIDqiUBMZDE4r40Q.png">

           {else}<img src="http://storage.proboards.com/6683759/images/Vnj2pN6ihsDoHeByW_yj.png">{/if}

       </div>

       <div style="clear: both;"></div>

   </div>

</div>

    {/if}

{/foreach}

   </div>

</div>

{else if $[category.id] == "3"|| $[category.id] == "2" || $[category.id] == "1"}

<div class="category-surrounder">

   <div class="category-title-surrounder"><h2>OOC Area</h2>

   </div>

   <div class="category-content">

       <p class="flavourtext">Welcome to the OOC Area! This is a great place to hang out and meet new people! Have fun!

</p>

{foreach $[category]}

<div class="category-container">

   <div class="title-area $[category.id]">$[category.display_name]</div>

   <div class="board-area">

       <div class="board-container">

           $[category.board_list]

       </div>

       <div class="category-image">

          <img src="http://storage.proboards.com/6683759/images/Vnj2pN6ihsDoHeByW_yj.png">

       </div>

       <div style="clear: both;"></div>

   </div>

</div>

{/foreach}

   </div>

</div>

{/if}

[Boy_Wonder]

Bump

[Boy_Wonder]

bump

[Tumbleweed]

Boy_Wonder ,

You aren't going to want the same content (the part that starts..."Welcome to Farleep Island! This is where ..." in each category are you because the way you have them they'd all get the same thing.  I sort of just threw the basics on my test site and the layout of my boards are nothing like yours but just default,  but in your home template, wouldn't you do something like this?

{foreach $[category]}
$[category.anchor]
<div class="container boards">
       <div class="category-surrounder">
{if $[category.id] == "9"}
    <div class="category-title-surrounder"><h2>Farleep Island</h2>
    <div class="category-content">
<p class="flavourtext">Welcome to Farleep Island! This is where most trainers start their journey, and it certainly is an island of two halves. Most the towns are filled with peasants, that are ridden roughshod over by the lorded elite down in Saker Keep. Each month there is the annual hunt from Saker Keep that flushes out and injures many pokemon as the elite look for new 'epic' pokemon to capture and attempt to force to their will. This poverty among the common folk however has meant that many have come to believe in a myth that some time the class may change. The low will become high, and the high will be cast down. But regardless - there is always a party on in Saker Keep, if you can get in that is. The towns have their own charms though, festivals happen four times a year to celebrate each solstice.
</p>
        </div>
  {elseif $[category.id] == "6"}  
    <div class="category-title-surrounder"><h2>Something else</h2>
               <div class="category-content">
<p class="flavourtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis condimentum mi, sit amet dapibus mi porttitor sed. Cras euismod elit sed fermentum scelerisque. Donec sagittis elementum euismod. Nunc neque nisl, maximus nec odio at, venenatis sollicitudin purus. Donec eget ligula ullamcorper, pulvinar risus eu, pretium augue.
</p>
        </div>
{elseif $[category.id] == "8"}  
    <div class="category-title-surrounder"><h2>Different name</h2>
    <div class="category-content">
<p class="flavourtext">
Nunc sed metus vel libero condimentum semper. Cras eros elit, cursus non dapibus sed, iaculis ac odio. Duis ut sodales dolor. Duis mattis, neque at egestas aliquet, purus justo ultricies mi, vel mollis tortor sem eu risus. Donec commodo orci ac tortor convallis, tincidunt pulvinar magna elementum. Aenean consectetur scelerisque malesuada.
</p>
        </div>
           
{/if}      
   
<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>
<div class="content cap-bottom">
$[category.board_list]
</div>
</div>
</div>
{/foreach}


I know there would need to be adjustments of where you want things exactly and maybe I'm misunderstanding but here is my test site and again, my boards are default and I only have the first 3 categories with content above, but anyway....have a look. (If need be, I can set up my boards like you have them but that might take a bit, but if it helps, I will.)

[Boy_Wonder]

Basically I want to be able to group categories together but each category group has a different flavour text. I'll check when I'm home

[Tumbleweed]

Feb 12, 2017 4:42:24 GMT -8 Boy_Wonder said:

Basically I want to be able to group categories together but each category group has a different flavour text. I'll check when I'm home

Oh, o.k. I get it now. Well, what I gave you is separating each cat but what I gave you still might help accomplish that. If not, I can jump back on my test site and see what I can do.

[Boy_Wonder]

Feb 12, 2017 15:54:44 GMT -8 Tumbleweed said:

Feb 12, 2017 4:42:24 GMT -8 Boy_Wonder said:

Basically I want to be able to group categories together but each category group has a different flavour text. I'll check when I'm home

Oh, o.k. I get it now. Well, what I gave you is separating each cat but what I gave you still might help accomplish that. If not, I can jump back on my test site and see what I can do.

I've adjusted to that and now its doing what I thought it would do, which is -degrouping- the categories from their groups if that makes sense?

So Farleep island should only show once and 
$[category.id] == "4" || $[category.id] == "5" || $[category.id] == "6" || $[category.id] == "7" || $[category.id] == "8" || $[category.id] == "9" || $[category.id] == "10"

All those categories should show in one box

[Tumbleweed]

Feb 12, 2017 21:17:32 GMT -8 Boy_Wonder said:

Feb 12, 2017 15:54:44 GMT -8 Tumbleweed said:

Oh, o.k. I get it now. Well, what I gave you is separating each cat but what I gave you still might help accomplish that. If not, I can jump back on my test site and see what I can do.

I've adjusted to that and now its doing what I thought it would do, which is -degrouping- the categories from their groups if that makes sense?

So Farleep island should only show once and 
$[category.id] == "4" || $[category.id] == "5" || $[category.id] == "6" || $[category.id] == "7" || $[category.id] == "8" || $[category.id] == "9" || $[category.id] == "10"

All those categories should show in one box

Yep, I get what you mean and now that you said that, I should have realized that what I gave you wouldn't work. Now that I know exactly what you are wanting, I'll fiddle with it some more but maybe not tonight. More likely tomorrow some time. But to be honest, I think you are just as good at this if not better than I am, actually. So if you can't figure it out, I may not be able to either. Just a forewarning, but I'll try.

[Boy_Wonder]

If need be I'll go bug Brian for help as well XD

Basically as I say I just want full control to set one set of categories grouped together

And another set of categories grouped together etc

[Tumbleweed]

Well, I did work on it a bit tonight and you are right, getting a background to surround the designated categories in a group, is a bear. I do have them grouped (just two groups-3 cats in the first group and 2 cats in the second group) and each groups has a special "introduction" but dang, can't work out how to surround each group. I'm currently trying to get jquery to add a background and it goes as far as the first board and then I'm assuming a closing div stops it.

If you want to look.. houseofglass.proboards.com/
You can see that I removed your if statements for images and just have "bbb" showing in the corner to represent the image (wanted less code to deal with) so the bbb are the first group of cats and then the other group has your images. The jquery I used (only on the first group so far) starts a background after the Farleep Island intro stuff and I had it set to end before the "Another title" I have for the second group but like I said, stops after the first cat. 

I've not given up, just need to get to bed but feel free to call in a red name any time you want.

[Boy_Wonder]

I think I'm going to tweak as I had a -bit- of an idea using jquery and nth child to try and set up each category name correctly as the surround is ALWAYS going to stay the same so I'm wondering if there's a way to group categories using a bit of jquery.

[Boy_Wonder]

Managed to make it work with some rather uh... hacky coding XD

[Tumbleweed]

Feb 13, 2017 7:19:19 GMT -8 Boy_Wonder said:

Managed to make it work with some rather uh... hacky coding XD

Hey, that's fantastic. Don't feel bad, I was resorting to hacky coding too. Even though you got it working, I'm sure my brain will mull this over for a while to be certain there wasn't a more obvious approach but me thinks my coding knowledge is just not good enough.

Anyway, kudos for you working it out. 

[Boy_Wonder]

My way was basically to tell each category surrounder to have an id of [category-id]-surr

Then the container to use the id of just [category-id]

and append info to relevant ids XD