News:

SMF 2.1.3 has been released! Take it for a spin! Read more.

Main Menu

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

Started by TwitchisMental, February 26, 2022, 05:26:45 PM

Previous topic - Next topic

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 -
        // 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 -
        // 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;"' : '', '>';
My SMF Themes - Remixed Breadcrumb Tutorial -
My SMF 2.1 Themes Demo
Need a Custom SMF Theme? Send me a message.

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). :P

Diego Andrés

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

SMF Tricks - Free & Premium Responsive Themes for SMF.

TwitchisMental

Quote from: Antechinus on February 26, 2022, 06:14:39 PMNifty, 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). :P

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.
My SMF Themes - Remixed Breadcrumb Tutorial -
My SMF 2.1 Themes Demo
Need a Custom SMF Theme? Send me a message.

Antechinus

Quote from: TwitchisMental on February 26, 2022, 06:21:31 PMHowever 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

Quote from: Antechinus on February 26, 2022, 06:29:19 PM
Quote from: TwitchisMental on February 26, 2022, 06:21:31 PMHowever 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 :).
My SMF Themes - Remixed Breadcrumb Tutorial -
My SMF 2.1 Themes Demo
Need a Custom SMF Theme? Send me a message.

Advertisement: