Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: Sakae on December 06, 2010, 10:15:26 PM

Title: New CSS to pagelinks class
Post by: Sakae on December 06, 2010, 10:15:26 PM
(It rhymes :D )

Since I've started to use SMF, I wanted to remodelate the pagelinks class, from this:

(http://img715.imageshack.us/img715/9190/pagelinksclass.jpg) (http://img715.imageshack.us/i/pagelinksclass.jpg/)

To something like that (common used to paginate Wordpress pages):

(http://img573.imageshack.us/img573/4213/pagelinksclass2.jpg) (http://img573.imageshack.us/i/pagelinksclass2.jpg/)

And here is how I ALMOST got it:


1) Search @ Display.template.php for (there's 2 matches)

<div class="pagelinks

Replace with:

<div class="pagelinks2


2) Search @ Display.php for (1 match only):

$context['page_index'] .= empty($modSettings['compactTopicPagesEnable']) ? '<strong>' . $txt['all'] . '</strong> ' : '[<strong>' . $txt['all'] . '</strong>] ';

Replace with:

$context['page_index'] .= empty($modSettings['compactTopicPagesEnable']) ? '<strong>' . $txt['all'] . '</strong> ' : '<span class="current"><strong>' . $txt['all'] . '</strong></span> ';

3) Add this @ your Theme's css/index.css:

.pagelinks2 a, .pagelinks2 a:link, .pagelinks2 a:active {
    padding: 2px 4px 2px 4px;
    margin: 20px 0 20px 0;
    text-decoration: none;
    border: 1px solid #87845E;
    color: #333333;
    font-size: 12px;
    font-weight: bold;
    background: url(../images/pagelinks2.png) repeat-x;
}
.pagelinks2 a:hover {   
    border: 1px solid #333333;
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    background-color: #FFFFFF;
    background: transparent;
}

.pagelinks2 span.current {
    padding: 2px 4px 2px 4px;
    margin: 2px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #1C1E1C;
    color: #1C1E1C;
    background-color: white;
}
.pagelinks2 {
    padding: 2px 4px 2px 4px;
    margin: 2px;
    font-size: 12px;
    font-weight: bold;
    color: #1C1E1C;
}
#pagelinks2
{
    padding-top: 3em;
}


4) Upload the file pagelinks2.png to your theme's image folder (your theme/images/)

Working almost pretty nice now:

(http://img63.imageshack.us/img63/4290/pagelinksclass3.jpg) (http://img63.imageshack.us/i/pagelinksclass3.jpg/)

The PROBLEM: I can't put the CSS on the CURRENT PAGE.

Anyone can help me?
Title: Re: New CSS to pagelinks class
Post by: Deaks on December 07, 2010, 12:03:21 PM
what do you mean you cant get it on current page?
Title: Re: New CSS to pagelinks class
Post by: Sakae on December 07, 2010, 12:46:03 PM
I mean, if I am reading page 1, the new CSS I put don't work, it stays (1) (with brackets instead of () - see last screenshot).
Title: Re: New CSS to pagelinks class
Post by: Deaks on December 07, 2010, 12:49:11 PM
post your Display.template.php please
Title: Re: New CSS to pagelinks class
Post by: Sakae on December 07, 2010, 01:40:01 PM
It's the default theme, with some modifications (none of them modified pagelinks, indeed)

Hum... Attached (The message exceeds the maximum allowed length (65530 characters).)
Title: Re: New CSS to pagelinks class
Post by: Hj Ahmad Rasyid Hj Ismail on December 08, 2010, 05:36:27 PM
Quote from: Sakae on December 06, 2010, 10:15:26 PM
2) Search @ Display.php for (1 match only):

$context['page_index'] .= empty($modSettings['compactTopicPagesEnable']) ? '<strong>' . $txt['all'] . '</strong> ' : '[<strong>' . $txt['all'] . '</strong>] ';

Replace with:

$context['page_index'] .= empty($modSettings['compactTopicPagesEnable']) ? '<strong>' . $txt['all'] . '</strong> ' : '<span class="current"><strong>' . $txt['all'] . '</strong></span> ';
Can you check whether this change has really been made (and provide your Display.php here). Based on your display page, that changes hasn't been made as yet? By the way, I don't think you need the span tag. Try to remove it and make it simply:
$context['page_index'] .= empty($modSettings['compactTopicPagesEnable']) ? '<strong>' . $txt['all'] . '</strong> ' : '<strong>' . $txt['all'] . '</strong> ';
See how it goes and update here will ya...
Title: Re: New CSS to pagelinks class
Post by: Sakae on December 08, 2010, 07:25:40 PM
Hi ahrasis

This Display.php changes the pagelink "All", which appears when you allow to see ALL answers of the topic in the same page.

Example: (http://www.simplemachines.org/community/file:///C:/DOCUME%7E1/UserXP/LOCALS%7E1/Temp/moz-screenshot.png)http://www.tigrelog.com.br/index.php?topic=6471.0;all (note the ;all in the end)

This is the only one which works, that's why the span class="current" is really necessary (see screenshot).

The question: I searched Display.php where to change the page numbers, but couldn't find.

Here's the whole part:

    // If they are viewing all the posts, show all the posts, otherwise limit the number.
    if ($can_show_all)
    {
        if (isset($_REQUEST['all']))
        {
            // No limit! (actually, there is a limit, but...)
            $context['messages_per_page'] = -1;
            $context['page_index'] .= empty($modSettings['compactTopicPagesEnable']) ? '<strong>' . $txt['all'] . '</strong> ' : '<span class="current"><strong>' . $txt['all'] . '</strong></span> ';

            // Set start back to 0...
            $_REQUEST['start'] = 0;
        }
        // They aren't using it, but the *option* is there, at least.
        else
            $context['page_index'] .= '&nbsp;<a href="' . $scripturl . '?topic=' . $topic . '.0;all">' . $txt['all'] . '</a> ';
    }
Title: Re: New CSS to pagelinks class
Post by: Hj Ahmad Rasyid Hj Ismail on December 09, 2010, 05:03:28 AM
In your OP the problem was the first page has not followed the style/css that you assigned to it. It appears [1] instead of what you want. It is from this code:
$context['page_index'] .= empty($modSettings['compactTopicPagesEnable']) ? '<strong>' . $txt['all'] . '</strong> ' : '[<strong>' . $txt['all'] . '</strong>] ';
Notice that in [<strong>' . $txt['all'] . '</strong>], "[" and "]" is the one that creates [1]. If you have change that correctly, then there could be something else that caused that to happen.

Secondly, it is up to you to put the span tag. I don't think that it is necessary to make it work but as you have highlighted, you want it to be different, so yes, let it be there. No problem at all. If I were you, I will focus on what creates [1] other then what you have changed.

Title: Re: New CSS to pagelinks class
Post by: Sakae on December 09, 2010, 10:31:13 AM
Thanks for your answer ahrausis, but I insist: I changed the code I wrote on OP and still have problems with it.

Note that the $txt['all'] is not the one that creates [1], but indeed creates [All], when you allow all pages to be seeing. I attach my Display.php to see that I'm saying exactly what it's happening.

Also, what I really want is to change the [1], as you said. I just can't do it!!!

Am I missing something here?
Title: Re: New CSS to pagelinks class
Post by: Hj Ahmad Rasyid Hj Ismail on December 09, 2010, 11:02:20 AM
Then it must elsewhere and not in Display.php. But I am not sure where. This code $context['page_index'] is the one that is called to provide number of pages so it is a good keyword to start your research. Good luck!
Title: Re: New CSS to pagelinks class
Post by: Sakae on December 16, 2010, 02:54:47 PM
LOL, that's exactly what I wanted since the original post...............
Title: Re: New CSS to pagelinks class
Post by: Mick. on December 25, 2010, 01:25:52 PM
Sakae, did you figured it out?  Im curious as im digging this.
Title: Re: New CSS to pagelinks class
Post by: Sakae on December 26, 2010, 08:46:18 AM
Quote from: bluedevil on December 25, 2010, 01:25:52 PM
Sakae, did you figured it out?  Im curious as im digging this.

Not yet... I'm stuck on Display.php, have no clue neither from where to begin :(