Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: Zagdul on December 07, 2012, 03:49:15 AM

Title: [Tip/Trick] Style Your Current Page (1 ... 6 7 >[8]< 9 10 ... 15)
Post by: Zagdul on December 07, 2012, 03:49:15 AM



This particular one has been bugging me forever as I always wanted to add an 'active' style to the page I'm on rather than have it wrapped in brackets.

in Sources/Subs.php find:

// Show the current page. (1 ... 6 7 >[8]< 9 10 ... 15)
if (!$start_invalid)
$pageindex .= '[<strong>' . ($start / $num_per_page + 1) . '</strong>] ';
else
$pageindex .= sprintf($base_link, $start, $start / $num_per_page + 1);



change to:

// Show the current page. (1 ... 6 7 >[8]< 9 10 ... 15)
if (!$start_invalid)
$pageindex .= '<span id="active_page">' . ($start / $num_per_page + 1) . '</span> ';
else
$pageindex .= sprintf($base_link, $start, $start / $num_per_page + 1);



Then create a style in your CSS #active_page {myawesome:class;}

If you would like to keep the brackets wrapped around your active page, in the $pageindex variable where the <strong> tag opens and closes, don't remove the ones before <strong> and the one at the end after </strong> and instead add them either within your <span> tags or on the outside.... up to you weather you wanna wrap the number or the span element.
Title: Re: [Tip/Trick] Style Your Current Page (1 ... 6 7 >[8]< 9 10 ... 15)
Post by: Mick. on December 07, 2012, 04:02:14 AM
awesome man ;)
Title: Re: [Tip/Trick] Style Your Current Page (1 ... 6 7 >[8]< 9 10 ... 15)
Post by: Zagdul on December 07, 2012, 02:40:35 PM
Glad you like this.

This has been a thorn in my side for a while. One of those (many) inconsistancies in SMF that'll drive you nuts.


Right now I'm working on a completely <div> theme and destroying every <table> tag in it. Simple Portal has become a bit of a pain with doing this, but it's a process.
Title: Re: [Tip/Trick] Style Your Current Page (1 ... 6 7 >[8]< 9 10 ... 15)
Post by: mashby on December 07, 2012, 03:31:50 PM
Sweet! Nice one...moved this here. :)
Title: Re: [Tip/Trick] Style Your Current Page (1 ... 6 7 >[8]< 9 10 ... 15)
Post by: FrizzleFried on December 07, 2012, 03:35:36 PM
I do believe there is a MOD that does this as well... actually... I know there is as my site has it installed.... what was the name...

Oh yeah... "Smart Pagination" ... http://custom.simplemachines.org/mods/index.php?mod=3235
Title: Re: [Tip/Trick] Style Your Current Page (1 ... 6 7 >[8]< 9 10 ... 15)
Post by: Antechinus on December 07, 2012, 03:56:17 PM
If you want to take things a bit further, you could just paste in the entire page index code from 2.1. That includes next and previous pages links.

Note that the <strong> tags for the current page are mainly to help accessibility for screen readers, since obviously visual styles are no use for adding emphasis if you can't see them. You can override this in your css by using .current_page .strong {font-weight: normal;} if you wish to.

This will let you have non-bold text visually but still let users of screen readers known that the emphasis is on that page number (screen readers skip presentational classes, but do call out html tags).

/**
* Constructs a page list.
*
* - builds the page list, e.g. 1 ... 6 7 [8] 9 10 ... 15.
* - flexible_start causes it to use "url.page" instead of "url;start=page".
* - handles any wireless settings (adding special things to URLs.)
* - very importantly, cleans up the start value passed, and forces it to
*   be a multiple of num_per_page.
* - checks that start is not more than max_value.
* - base_url should be the URL without any start parameter on it.
* - uses the compactTopicPagesEnable and compactTopicPagesContiguous
*   settings to decide how to display the menu.
*
* an example is available near the function definition.
* $pageindex = constructPageIndex($scripturl . '?board=' . $board, $_REQUEST['start'], $num_messages, $maxindex, true);
*
* @param string $base_url
* @param int $start
* @param int $max_value
* @param int $num_per_page
* @param bool $flexible_start = false
* @param bool $show_prevnext = true
*/
function constructPageIndex($base_url, &$start, $max_value, $num_per_page, $flexible_start = false, $show_prevnext = true)
{
global $modSettings, $context, $txt;

// Save whether $start was less than 0 or not.
$start = (int) $start;
$start_invalid = $start < 0;

// Make sure $start is a proper variable - not less than 0.
if ($start_invalid)
$start = 0;
// Not greater than the upper bound.
elseif ($start >= $max_value)
$start = max(0, (int) $max_value - (((int) $max_value % (int) $num_per_page) == 0 ? $num_per_page : ((int) $max_value % (int) $num_per_page)));
// And it has to be a multiple of $num_per_page!
else
$start = max(0, (int) $start - ((int) $start % (int) $num_per_page));

$context['current_page'] = $start / $num_per_page;

// Wireless will need the protocol on the URL somewhere.
if (WIRELESS)
$base_url .= ';' . WIRELESS_PROTOCOL;

$base_link = '<a class="navPages" href="' . ($flexible_start ? $base_url : strtr($base_url, array('%' => '%%')) . ';start=%1$d') . '">%2$s</a>';

// Compact pages is off or on?
if (empty($modSettings['compactTopicPagesEnable']))
{
// Show the left arrow.
$pageindex = $start == 0 ? ' ' : sprintf($base_link, $start - $num_per_page, '<span class="previous_page">' . $txt['prev'] . '</span>');

// Show all the pages.
$display_page = 1;
for ($counter = 0; $counter < $max_value; $counter += $num_per_page)
$pageindex .= $start == $counter && !$start_invalid ? '<span class="current_page"><strong>' . $display_page++ . '</strong></span> ' : sprintf($base_link, $counter, $display_page++);

// Show the right arrow.
$display_page = ($start + $num_per_page) > $max_value ? $max_value : ($start + $num_per_page);
if ($start != $counter - $max_value && !$start_invalid)
$pageindex .= $display_page > $counter - $num_per_page ? ' ' : sprintf($base_link, $display_page, '<span class="next_page">' . $txt['next'] . '</span>');
}
else
{
// If they didn't enter an odd value, pretend they did.
$PageContiguous = (int) ($modSettings['compactTopicPagesContiguous'] - ($modSettings['compactTopicPagesContiguous'] % 2)) / 2;

// Show the "prev page" link. (>prev page< 1 ... 6 7 [8] 9 10 ... 15 next page)
if (!empty($start) && $show_prevnext)
$pageindex = sprintf($base_link, $start - $num_per_page, '<span class="previous_page">' . $txt['prev'] . '</span>');
else
$pageindex = '';

// Show the first page. (prev page >1< ... 6 7 [8] 9 10 ... 15)
if ($start > $num_per_page * $PageContiguous)
$pageindex .= sprintf($base_link, 0, '1');

// Show the ... after the first page.  (prev page 1 >...< 6 7 [8] 9 10 ... 15 next page)
if ($start > $num_per_page * ($PageContiguous + 1))
$pageindex .= '<span class="expand_pages" onclick="' . htmlspecialchars('expandPages(this, ' . JavaScriptEscape(($flexible_start ? $base_url : strtr($base_url, array('%' => '%%')) . ';start=%1$d')) . ', ' . $num_per_page . ', ' . ($start - $num_per_page * $PageContiguous) . ', ' . $num_per_page . ');') . '" onmouseover="this.style.cursor = \'pointer\';"><strong>...</strong></span>';

// Show the pages before the current one. (prev page 1 ... >6 7< [8] 9 10 ... 15 next page)
for ($nCont = $PageContiguous; $nCont >= 1; $nCont--)
if ($start >= $num_per_page * $nCont)
{
$tmpStart = $start - $num_per_page * $nCont;
$pageindex.= sprintf($base_link, $tmpStart, $tmpStart / $num_per_page + 1);
}

// Show the current page. (prev page 1 ... 6 7 >[8]< 9 10 ... 15 next page)
if (!$start_invalid)
$pageindex .= '<span class="current_page"><strong>' . ($start / $num_per_page + 1) . '</strong></span>';
else
$pageindex .= sprintf($base_link, $start, $start / $num_per_page + 1);

// Show the pages after the current one... (prev page 1 ... 6 7 [8] >9 10< ... 15 next page)
$tmpMaxPages = (int) (($max_value - 1) / $num_per_page) * $num_per_page;
for ($nCont = 1; $nCont <= $PageContiguous; $nCont++)
if ($start + $num_per_page * $nCont <= $tmpMaxPages)
{
$tmpStart = $start + $num_per_page * $nCont;
$pageindex .= sprintf($base_link, $tmpStart, $tmpStart / $num_per_page + 1);
}

// Show the '...' part near the end. (prev page 1 ... 6 7 [8] 9 10 >...< 15 next page)
if ($start + $num_per_page * ($PageContiguous + 1) < $tmpMaxPages)
$pageindex .= '<span class="expand_pages" onclick="' . htmlspecialchars('expandPages(this, ' . JavaScriptEscape(($flexible_start ? $base_url : strtr($base_url, array('%' => '%%')) . ';start=%1$d')) . ', ' . ($start + $num_per_page * ($PageContiguous + 1)) . ', ' . $tmpMaxPages . ', ' . $num_per_page . ');') . '" onmouseover="this.style.cursor=\'pointer\';"><strong> ... </strong></span>';

// Show the last number in the list. (prev page 1 ... 6 7 [8] 9 10 ... >15<  next page)
if ($start + $num_per_page * $PageContiguous < $tmpMaxPages)
$pageindex .= sprintf($base_link, $tmpMaxPages, $tmpMaxPages / $num_per_page + 1);

// Show the "next page" link. (prev page 1 ... 6 7 [8] 9 10 ... 15 >next page<)
if ($start != $tmpMaxPages && $show_prevnext)
$pageindex .= sprintf($base_link, $start + $num_per_page, '<span class="next_page">' . $txt['next'] . '</span>');
}

return $pageindex;
}


ETA: Oh and it's easy to do similar styling tweaks to the small pages lists for each topic inside mesage index and unread/replies. Code is much the same. Just look for "page" inside MessageIndex.php and Recent.php. Throw in spans and class names where you think they're appropriate. Example:

// If we can use all, show all.
if (!empty($modSettings['enableAllMessages']) && $row['num_replies'] + 1 < $modSettings['enableAllMessages'])
$pages .= ' &nbsp;<a href="' . $scripturl . '?topic=' . $row['id_topic'] . '.0;all">' . $txt['all'] . '</a>';
Title: Re: [Tip/Trick] Style Your Current Page (1 ... 6 7 >[8]< 9 10 ... 15)
Post by: Antechinus on December 07, 2012, 04:00:28 PM
Quote from: Zagdul on December 07, 2012, 02:40:35 PM
Glad you like this.

This has been a thorn in my side for a while. One of those (many) inconsistancies in SMF that'll drive you nuts.


Right now I'm working on a completely <div> theme and destroying every <table> tag in it. Simple Portal has become a bit of a pain with doing this, but it's a process.

TBH destroying every table is not necessarily productive. Tables are valid html elements if they are used for displaying genuinely tabular data (basically, spreadsheets). It's just that the use of them for non-tabular data that should be avoided.

And yes, the use of them for the current board index and message index is not really good usage. I've rewritten those as lists myself, with suitable sub-elements inside each main <li>.
Title: Re: [Tip/Trick] Style Your Current Page (1 ... 6 7 >[8]< 9 10 ... 15)
Post by: Zagdul on December 07, 2012, 08:14:55 PM
Quote from: Antechinus on December 07, 2012, 04:00:28 PM
Quote from: Zagdul on December 07, 2012, 02:40:35 PM
Glad you like this.

This has been a thorn in my side for a while. One of those (many) inconsistancies in SMF that'll drive you nuts.


Right now I'm working on a completely <div> theme and destroying every <table> tag in it. Simple Portal has become a bit of a pain with doing this, but it's a process.

TBH destroying every table is not necessarily productive. Tables are valid html elements if they are used for displaying genuinely tabular data (basically, spreadsheets). It's just that the use of them for non-tabular data that should be avoided.

And yes, the use of them for the current board index and message index is not really good usage. I've rewritten those as lists myself, with suitable sub-elements inside each main <li>.

I don't disagree, and potentially I should start a thread to discuss this. However, I find that having to collapse borders on tables to get a desired effect only to have to re-open them later (amongst many other faults of using 'tables' is more counter productive when designing something such as a forum.

If I'm strictly displaying rows and columns to display information such as statistical details tables work great, however when designing a forum or community site, they actually get in the way.
Title: Re: [Tip/Trick] Style Your Current Page (1 ... 6 7 >[8]< 9 10 ... 15)
Post by: Antechinus on December 07, 2012, 08:19:26 PM
That's basically what I said. :D