[SMF 2.1][Trick] Category Description Beside The Category Title

[TwitchisMental]

Category Description Beside The Category Title.

Align the description to the right of the category title instead of underneath it.

In this guide I am going to show you a very simple trick. This trick will move the description of a category to the right of the category title.

We are changing this -

You cannot view this attachment.

To This -

You cannot view this attachment.

I am using the default theme in this guide.

Open BoardIndex.Template.php

Find -

Code Select Expand

        // If this category even can collapse, show a link to collapse it.
        if ($category['can_collapse'])
            echo '
                    <span id="category_', $category['id'], '_upshrink" class="', $category['is_collapsed'] ? 'toggle_down' : 'toggle_up', ' floatright" data-collapsed="', (int) $category['is_collapsed'], '" title="', !$category['is_collapsed'] ? $txt['hide_category'] : $txt['show_category'], '" style="display: none;"></span>';

        echo '
                    ', $category['link'], '
                </h3>', !empty($category['description']) ? '
                <div class="desc">' . $category['description'] . '</div>' : '', '
            </div>
            <div id="category_', $category['id'], '_boards" ', (!empty($category['css_class']) ? ('class="' . $category['css_class'] . '"') : ''), $category['is_collapsed'] ? ' style="display: none;"' : '', '>';
Change to -

Code Select Expand

        // If this category even can collapse, show a link to collapse it.
        if ($category['can_collapse'])
            echo '
                    <span id="category_', $category['id'], '_upshrink" class="', $category['is_collapsed'] ? 'toggle_down' : 'toggle_up', ' floatright" data-collapsed="', (int) $category['is_collapsed'], '" title="', !$category['is_collapsed'] ? $txt['hide_category'] : $txt['show_category'], '" style="display: none;"></span>';

        echo '
                ', $category['link'], '
                ', !empty($category['description']) ? '
                <span class="desc">' . $category['description'] . '</span>' : '', '
             </h3></div>
            <div id="category_', $category['id'], '_boards" ', (!empty($category['css_class']) ? ('class="' . $category['css_class'] . '"') : ''), $category['is_collapsed'] ? ' style="display: none;"' : '', '>';

[Antechinus]

Nifty, but you may want to declare the description span as display: inline-block; so it doesn't get messy on narrower screens (inline-block will make the whole span jump to a new line if it runs out of width). It may also need a right margin or padding so it doesn't overlap the floated toggle at any stage.
Incidentally, I have to wonder why the default markup for the upshrink toggle has cursor: pointer; declared as an inline style, when the toggle_up and toggle_down classes are already declared in index.css, and the cursor style could have gone there (where it should be).

[Diego Andrés]

We all wonder things, but we are missing a McLaren to go back 7 years and ask 

[TwitchisMental]

Nifty, but you may want to declare the description span as display:inline-block; so it doesn't get messy on narrower screens (inline-block will make the whole span jump to  a new line if it runs out of width). It may also need a right margin or padding so it doesn't overlap the floated toggle at any stage.
Incidentally, I have to wonder why the default markup for the upshrink toggle has cursor: pointer; declared as an inline style, when the toggle_up and toggle_down classes are already declared in index.css, and the cursor style could have gone there (where it should be).

I use to use flex to make this all work.(Remember my issue with Blue Evolution 2.1 haha).. However I found have that simply changing the desc div to span and placing it where it is works without issue.This includes phones and tablets.


You cannot view this attachment.

You cannot view this attachment.

[Antechinus]

However I found have that simply changing the desc div to span and placing it where it is works without issue.This includes phones and tablets.

Your first shot is an example of what I mean. Depending on the screen/viewport width, and the category name length, and the description length, it could a bit messy sometimes.

IOW, what I'm saying is it works well if there is enough room to put it all on one line, but if it is going to break to two lines anyway then it would make sense (IMO) to have the entire description span go to the second line. Scans more smoothly that way (again IMO) but people can do what they like. I just suggested a way they can do it. 

[TwitchisMental]

However I found have that simply changing the desc div to span and placing it where it is works without issue.This includes phones and tablets.

Your first shot is an example of what I mean. Depending on the screen/viewport width, and the category name length, and the description length, it could a bit messy sometimes.

IOW, what I'm saying is it works well if there is enough room to put it all on one line, but if it is going to break to two lines anyway then it would make sense (IMO) to have the entire description span go to the second line. Scans more smoothly that way (again IMO) but people can do what they like. I just suggested a way they can do it. 

Gotcha. Sorry for the misunderstanding.

Another option would be simply hiding the description for mobile viewers.

To each their own .