Two board fixes I'd like to make

[Crystal Klink]

Hello! For the first issue, I was wondering how I get rid of - or at least hide - the word "board", as seen in the below screenshot. It's in each category and gets on my nerves.

For the second one, I would like to get rid of - or hide - the word "Participated", as seen in the red box to the right.

I found the code inside the red box on the left; not sure if editing any of that will solve my problem or not. It's located in Admin Home > Themes > Advanced Syles & CSS > Visual Editor.

Thanks in advance for any help! Ya'll are awesome!

[Todge]

Jan 16, 2022 0:48:52 GMT -8 Crystal Klink said:

Hello! For the first issue, I was wondering how I get rid of - or at least hide - the word "board", as seen in the below screenshot. It's in each category and gets on my nerves.

For the second one, I would like to get rid of - or hide - the word "Participated", as seen in the red box to the right.

I found the code inside the red box on the left; not sure if editing any of that will solve my problem or not. It's located in Admin Home > Themes > Advanced Syles & CSS > Visual Editor.

Thanks in advance for any help! Ya'll are awesome!

Hi,

Try adding this to the bottom of your CSS Stylesheet..

.boards thead .main { visibility: hidden; }
.recent-threads-button { display: none; }

[Lynx]

Also note that you can get rid of the Participated button (for you) via Profile > Edit Profile > Settings (tab) > Show Participated (option). The advantage to that method is that it would leave the Participated button visible for your members who make use of it, but hides it for you.

[Crystal Klink]

Jan 16, 2022 7:06:54 GMT -8 Todge said:

Jan 16, 2022 0:48:52 GMT -8 Crystal Klink said:

Hello! For the first issue, I was wondering how I get rid of - or at least hide - the word "board", as seen in the below screenshot. It's in each category and gets on my nerves.

For the second one, I would like to get rid of - or hide - the word "Participated", as seen in the red box to the right.

I found the code inside the red box on the left; not sure if editing any of that will solve my problem or not. It's located in Admin Home > Themes > Advanced Syles & CSS > Visual Editor.

Thanks in advance for any help! Ya'll are awesome!

Hi,

Try adding this to the bottom of your CSS Stylesheet..

.boards thead .main { visibility: hidden; }
.recent-threads-button { display: none; }

Solved my second problem. Is this code for the first or second one?

[Todge]

<p>

Jan 16, 2022 16:34:14 GMT -8 Crystal Klink said:

Jan 16, 2022 7:06:54 GMT -8 Todge said:

Hi,

Try adding this to the bottom of your CSS Stylesheet..

.boards thead .main { visibility: hidden; }
.recent-threads-button { display: none; }

Solved my second problem. Is this code for the first or second one?

It is for both.

I take it it's not working for the 'Board' removal?</p>

[Crystal Klink]

No, it worked. I just wasn't sure which problem you were helping me with. Thank you!

I liked Lynx 's suggestion about only hiding that opinion for me, though, so I experimented by removing the

.recent-threads-button { display: none; }
part of the code. I'm happy to say it worked like a charm!   Now that the word "board" is gone, is there any way to move my text up a bit and so it fills in that gap?

Also, is it possible to widen the navigation bar? Would like to be able to make my text bigger without having it cut off. As it stands right now, the biggest text that fits is a size small.

[Kami]

As a general rule, we recommend people create one thread per issue — this helps the helpers and admins / mods determine which questions have been resolved and which ones are ongoing, plus it helps other users who may be looking for the same solution.

For the problem of the "space" where the word board is — the only thing that was done here was set the text not to display using CSS; it's still technically there. The reason that the gap exists despite removing the text is because that gap is one cell in a row of the table that contains the boards and categories. The only way to get rid of that is to remove the row altogether, via the HTML in the layout templates.

Are you OK with removing that row completely by editing the HTML? If you're not super familiar with HTML and/or are nervous about it, we can guide you through it. Note that if you have multiple themes this can be tedious so you could theoretically opt for a javascript code to run across all themes, but the downside is that JS loads after the forum loads so there'll be some "hang time" before it takes effect.

[Crystal Klink]

Hi Kami,

I'd be fine with removing that row. The only HTML I'm familiar with is the bold/italic/underline/strikethough one. So yes, I would appreciate some guidance. As long as things are posted step-by-step, I should be able to follow them.

Regarding themes, I only have one of them. That isn't an issue.

[Kami]

Jan 17, 2022 17:35:42 GMT -8 Crystal Klink said:

Hi Kami,

I'd be fine with removing that row. The only HTML I'm familiar with is the bold/italic/underline/strikethough one. So yes, I would appreciate some guidance. As long as things are posted step-by-step, I should be able to follow them.

Regarding themes, I only have one of them. That isn't an issue.

Sorry for the delay in response!

Here are the steps for you to address this:

1. Navigate to your Admin panel. 

2. Once there, you'll see a section in the top right menu that says "Structure"; hover over this and then select the option that says "Layout Templates"

3. On the next screen, you'll see a list of locations; click the one that says "Board"

4. On the next screen, you'll see a text box with some HTML in it; above the text box are some tabs; click the one that says "Board List".

5. Once on the Board List tab, click into the text box; then on the left of the text box, you'll see a bunch of numbers denoting each line of space. Starting on Line 2, and all the way to and including Line 10, is the HTML that makes this row appear.

6. Now you have two options:

Option A: You can put a <!-- at the beginning of Line 2, and a --> at the end of Line 10 to comment out this portion of the HTML. This is useful if you ever decide to add things back in the future.

Option B: You can delete all of the HTML from the beginning of Line 2 to the end of Line 10. This is useful if you want to have a clean style sheet, though the down side of this is that unless you save the original template somewhere or are handy with HTML and feel comfortable adding it back in, you'll have to reset the template entirely to get it back. If you don't make further changes to this template then a reset is no big deal, but if you do more changes this can be a hassle and I'd advise option A if there's a potential you'd want to change more about how boards are listed on the home page.

7. After you make your changes, save the template. This should now remove that row entirely. Just remember that if you decide to have additional themes you'll have to repeat this step if you don't want that content to appear.

8. (Optional, but good practice) Navigate to your theme stylesheet and remove the CSS you originally added - .boards thead .main { visibility: hidden; } - and save, since that content has now been directly removed in the HTML.

[Crystal Klink]

I went with option A. However, if you look at both categories in this screenshot, there's still a slight space in the first one.



What am I doing wrong?

[Kami]

Jan 19, 2022 2:23:25 GMT -8 Crystal Klink said:

I went with option A. However, if you look at both categories in this screenshot, there's still a slight space in the first one.



What am I doing wrong?

Nothing, this is functioning as intended. If you notice in the "last post" column, the content in the first board's cell is taking up 4 lines instead of the 2-3 of the other cells. The board description + board title is also only 3 lines, while the other boards have 4+ lines of text. So, in this first row, the last post column is an extra line of height (4 lines) compared to the board column (2 lines of description + 1 line of board name). In the other rows, the board column has more lines than the last post column, leading for a more condensed appearance initially (the "gap" actually appears in the last post column, if you look).

Think of it like a plastic bag: if you stretch out the bag with a very wide item, the bag won't conform to the shape of smaller items within the bag. This doesn't mean the bag has too much space, it's just it's been stretched to accommodate the largest item within.

What's happening here in simplest terms is that each cell is set to have the text aligned in the middle. This way, if the content of one of the cells in the row takes up more space than the other cells, the "stretched out" space is evenly distributed at the top and bottom. You could change this to align the text to the top or bottom of the cell instead, but all that would do is shift all of the "stretched" space to fill the bottom and top respectively.

Up to you! I personally would recommend to leave it as is because it provides the best user experience overall, but your tastes and mileage may vary.

[Crystal Klink]

Ohhh, I see what you're saying. So if the post that has 4 lines only had 3 or less, both boards would look the same. Is that correct?

I forgot to say it earlier, but my thanks to Todge and Lynx for their help with my first two issues. I really appreciate it!

[Kami]

Jan 19, 2022 5:34:02 GMT -8 Crystal Klink said:

Ohhh, I see what you're saying. So if the post that has 4 lines only had 3 or less, both boards would look the same. Is that correct?

I forgot to say it earlier, but my thanks to Todge and Lynx for their help with my first two issues. I really appreciate it!

Yep exactly. The board cells will always adjust to fit the height of its content, and sometimes that will manifest in "extra" space in its neighbour cells since a row can only be a single height in size.

[Crystal Klink]

Ah, okay. You solved my problem then. Thanks, Kami!

[Kami]

Any time!