Category alignment and div spacing

[Matte]

I'm in the process of creating a new theme for a forum that I'm a part of. I ran into a couple issues when implementing "side-by-side categories" on my home page. Unfortunately, I'm not the main guy in charge, and the forum is currently active, so I can't apply the incomplete theme and post a link to the board. I took a screenshot of the home page and can supply coding that I think may be applicable.



My problems are:

1) The categories aren't centered on the page. I have the page width set to 90% and the container width set to 48.4% (with 5px padding on left and right), but it seems like whatever is housing the container itself is aligned left and I see no way of centering it.

2) The Information/Statistics and Shoutbox "categories" are separated from my other categories. This makes sense, since those two aren't actually categories, but I'm looking for a way to basically combine them into the same div and treat them as categories to keep the padding between everything equal throughout the page. (Referring to the screenshot: the gap between "Cupcakes & Bananas" and "Information & Statistics" is specifically the issue.)



Home page screenshot: i.imgur.com/hSHKMh2.png



Relevant coding in my "Home" template:
{foreach $[category]}
<div class="container1">
$[category.anchor]
<div class="container boards">
<div class="title-bar bbcode"><center><h2><div class="title_wrapper">$[category.display_name]</div></h2></center></div>
<div class="content cap-bottom">
$[category.board_list]
</div>
</div>
</div>
{/foreach}
<div style="clear: both;"></div>
{if $[show_stats]}
   <div class="container2"><div class="container stats">
       <div class="title-bar"><h2><font color="ffffff">Information & Statistics</font></h2></div>
       <div class="content">
           infomation/statistics
       </div></div>
   </div>{/if}$[shoutbox]


Relevant coding in my "Shoutbox" template:
<div class="$[shoutbox_class] container3"><div class="container shoutbox">
   <div class="title-bar"><h2><font color="ffffff">Shoutbox</font></h2></div>
       <div class="content">
           {if $[welcome_message]}
<div class="pad-all-double content-box shoutbox_welcome_message">
$[welcome_message]
</div>
{/if}
<div class="shoutbox_container orientation-$[reply_box_position] {if !$[can.post]}no-post{/if}">
<div class="$[shoutbox_posts_class]" style="height: $[height];" aria-live="polite">
{if $[shoutbox_posts]}
$[shoutbox_posts]
{else}
<b>There are no posts here.{if $[can.post]} Start the conversation {if $[reply_box_position] == 'bottom'}below{else}above{/if}.{/if}</b>
{/if}
</div>


Relevant coding in my style sheet:
.container1 {
  width:48.4%;
  padding: 0px 5px 0px 5px;
  display: block;
  float: left;
  min-height: 0px;
}

.container2 {
  width:48.4%;
  padding: 0px 5px 0px 5px;
  display: block;
  float: left;
  min-height: 0px;
}

.container3 {
  width:48.4%;
  padding: 0px 5px 0px 5px;
  display: block;
  float: left;
  min-height: 0px;
}

   .container.stats > .title-bar { line-height: 26px !important; background-color: ; background-image: url(""); text-align: center; }
   .container.shoutbox > .title-bar { line-height: 26px !important; background-color:  ; background-image: url(""); text-align: center; }



If there's anything else I can explain or supply for more help, please just ask. And thank you!

[Matte]

bump

[Matte]

bump

[Matte]

bump

[Matte]

Starting to think this might go unsolved. I simplified the OP a bit to cut out some of the unnecessary rambling.

bump

[Kami]

Could you provide a URL to the forum where this is occurring? While providing your templates is good and necessary, as is a screenshot of what you see, it's difficult for helpers to diagnose issues if they can't see them in action in relation to the rest of the forum / coding (:

[Matte]

Jun 2, 2021 10:08:35 GMT -8 Kami said:

Could you provide a URL to the forum where this is occurring?

The forum is currently active, so I don't want to apply an unfinished theme for troubleshooting. I was hoping my issues were more in line with general coding misunderstandings that could be pinpointed by someone more experienced just looking at the offending code.

There's always the option of someone being willing to register to the forum and then I could allow all users to apply the theme and they could dissect from there, but I'd only want to make that an option if someone made the offer to do it.

[Kami]

Jun 2, 2021 12:00:49 GMT -8 Matte said:

Jun 2, 2021 10:08:35 GMT -8 Kami said:

Could you provide a URL to the forum where this is occurring?

The forum is currently active, so I don't want to apply an unfinished theme for troubleshooting. I was hoping my issues were more in line with general coding misunderstandings that could be pinpointed by someone more experienced just looking at the offending code.

There's always the option of someone being willing to register to the forum and then I could allow all users to apply the theme and they could dissect from there, but I'd only want to make that an option if someone made the offer to do it.

Unfortunately, the easiest way for any of us to troubleshoot is to look at live code and experiment with fixes. It doesn't look like you're aware of what's housing the containers as per your first post and while I have my suspicions on the root cause, since you've altered the layout templates I can't be sure everything is still using the same names / tags / CSS etc. Without seeing the context in which the changes are made, I can only guess as to the cause and solution.

Initially, my gut feeling is that you'll need to margin:auto the parent container holding the category/board content. It SHOULD be the ID of #content and that change probably would look something like this:

#content {
  margin-left: auto;
  margin-right: auto;
}

Let me know if this works. If not, it's not ideal for me to have to join a forum to troubleshoot, but I have some time today and can do that if needed.

[Matte]

Jun 2, 2021 12:41:07 GMT -8 Kami said:

#content {
  margin-left: auto;
  margin-right: auto;
}

Let me know if this works.

I tried adding this to the style sheet and while it didn't work to center the categories, I did make sure the #content tag was relevant by changing "auto" to a pixel count and everything shifted over as you would expect it to.

If you do find the time to look into it, I'd appreciate it. If not, I completely understand. My situation isn't ideal for outside troubleshooting. Link: natecorbitt.proboards.com/ (theme is called "testing theme for matte")

[Kami]

Jun 2, 2021 15:19:15 GMT -8 Matte said:

Jun 2, 2021 12:41:07 GMT -8 Kami said:

#content {
  margin-left: auto;
  margin-right: auto;
}

Let me know if this works.

I tried adding this to the style sheet and while it didn't work to center the categories, I did make sure the #content tag was relevant by changing "auto" to a pixel count and everything shifted over as you would expect it to.

If you do find the time to look into it, I'd appreciate it. If not, I completely understand. My situation isn't ideal for outside troubleshooting. Link: natecorbitt.proboards.com/ (theme is called "testing theme for matte")

sure, i'll have a peek in the morning (:

[Kami]

So, there are a couple of ways to fix this.

Method 1: Simple CSS edit. Not the greatest fix, but it's the quickest (probably).

Method 2: HTML Restructure + CSS edit. A much better and long-term sustainable fix, but more time consuming.

Pros & Cons: Obviously, there's the time sink; method 1 is definitely less tedious than method 2. Method 2, on the other hand, is better, more sustainable coding in that it's a) contemporary, and b) more 'future proof' in the sense that this is the current standard and will be for the foreseeable future. However, you do have PB v6 coming out Soon™, though the exact date is not yet known to us. When v6 comes out, the layout templates will change to a degree which means that you potentially will need to redo it (personally, I would go with "definitely" need to redo it, as the software is becoming mobile-responsive as opposed to having separate layouts for mobile vs desktop).

So it's up to you: Method 1 for easy and temporary until v6, Method 2 for best practice but possibly short-lived, depending on when v6 comes out.

[Matte]

Jun 3, 2021 9:19:26 GMT -8 Kami said:

So it's up to you: Method 1 for easy and temporary until v6, Method 2 for best practice but possibly short-lived, depending on when v6 comes out.

I like the sound of option 2, but I'm not a very experienced coder. I'm mostly ok with tinkering with things and kind of just figuring them out by context clues, so I don't know how doable a "restructuring" would be for me (not even sure what that entails, entirely). If option 2 is something you think I'd be in way over my head on, option 1 sounds doable.

[Kami]

Jun 3, 2021 10:36:57 GMT -8 Matte said:

Jun 3, 2021 9:19:26 GMT -8 Kami said:

So it's up to you: Method 1 for easy and temporary until v6, Method 2 for best practice but possibly short-lived, depending on when v6 comes out.

I like the sound of option 2, but I'm not a very experienced coder. I'm mostly ok with tinkering with things and kind of just figuring them out by context clues, so I don't know how doable a "restructuring" would be for me (not even sure what that entails, entirely). If option 2 is something you think I'd be in way over my head on, option 1 sounds doable.

TBH I'm always of the opinion to go with best practice, but I do recognise that some folks may be intimidated or frustrated with learning a bunch of new things in a really short timeframe.

Let's try Method 1 first -- it's definitely easier, and if it works it works and nothing terrible should come out of it sustainability wise, since v5 will be deprecated in the near-ish future. If it fails or if you don't like how it is, we can use Method 2.

So, in your CSS, add this at the bottom (or you can add it to the #content CSS natively there instead of overriding it with styles at the bottom, up to you)

#content > div {
    display: inline-block;
    width: 49%;
}

#content {
    margin: 0px auto;
    width: 100%;
}

[Matte]

Jun 3, 2021 11:18:24 GMT -8 Kami said:

So, in your CSS, add this at the bottom (or you can add it to the #content CSS natively there instead of overriding it with styles at the bottom, up to you)

I added the code to the style sheet and played around with it before realizing that it would also apply to the thread lists page (and potentially other pages, also), so I instead placed it in the "Home" layout template. I was able to remove the separate container1, container2, container3 code from my style sheet by using this code in the Home layout template:

#content > div {
   display: inline-block;
   float: left;
   width: 50%;
}

#content {
   margin: 0px auto;
   width: 100%;
}
This centers everything on the home page and I can alter the #content width from 100% and everything remains centered. But I had to remove the left and right padding to do this. (screenshot: i.imgur.com/UDSLI53.png/ ) I want consistent 10px padding between categories, which I was achieving by adding 5px left and right padding (the vertical padding is coded 10px by default), but I think the padding being in pixels and the width being in percentage is what isn't letting me center everything. I set the content div width to 49% and added my padding and it looks like the same issue happens where it's no longer centered.

[Kami]

Could you please undo those changes (: Put back how you had it, and I'll make a much simpler modification to the CSS that will accomplish what you want.