Customizing SMF > SMF Coding Discussion

[WIP] Change New.gif with CSS3 Button

(1/3) > >>

Antes:
Hello :)
I was working on it for my site, i liked it, and decided to share it with you i hope you like it too :)
Open MessageIndex.template.php

--- Code: (Find) ---<a href="', $topic['new_href'], '" id="newicon' . $topic['first_post']['id'] . '"><img src="', $settings['lang_images_url'], '/new.gif" alt="', $txt['new'], '" /></a>
--- End code ---

--- Code: (Replace) ---<a href="', $topic['new_href'], '" id="newicon' . $topic['first_post']['id'] . '" class="css3button"><strong>', $txt['new'], '</strong></a>
--- End code ---

--- Code: (Find) ---$child['link'] = '<a href="' . $child['href'] . '" ' . ($child['new'] ? 'class="new_posts" ' : '') . 'title="' . ($child['new'] ? $txt['new_posts'] : $txt['old_posts']) . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')">' . $child['name'] . ($child['new'] ? '</a> <a href="' . $scripturl . '?action=unread;board=' . $child['id'] . '" title="' . $txt['new_posts'] . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')"><img src="' . $settings['lang_images_url'] . '/new.gif" class="new_posts" alt="" />' : '') . '</a>';
--- End code ---

--- Code: (Replace) ---$child['link'] = '<a href="' . $child['href'] . '" ' . ($child['new'] ? 'class="new_posts" ' : '') . 'title="' . ($child['new'] ? $txt['new_posts'] : $txt['old_posts']) . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')">' . $child['name'] . ($child['new'] ? '</a> <a href="' . $scripturl . '?action=unread;board=' . $child['id'] . '" title="' . $txt['new_posts'] . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')" class="css3button">'. '<strong>'. $txt['new'] .'</strong>' : '') . '</a>';
--- End code ---
BoardIndex.template.php

--- Code: (Find) ---$child['link'] = '<a href="' . $child['href'] . '" ' . ($child['new'] ? 'class="new_posts" ' : '') . 'title="' . ($child['new'] ? $txt['new_posts'] : $txt['old_posts']) . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')">' . $child['name'] . ($child['new'] ? '</a> <a href="' . $scripturl . '?action=unread;board=' . $child['id'] . '" title="' . $txt['new_posts'] . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')"><img src="' . $settings['lang_images_url'] . '/new.gif" class="new_posts" alt="" />' : '') . '</a>';
--- End code ---

--- Code: (Replace) ---$child['link'] = '<a href="' . $child['href'] . '" ' . ($child['new'] ? 'class="new_posts" ' : '') . 'title="' . ($child['new'] ? $txt['new_posts'] : $txt['old_posts']) . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')">' . $child['name'] . ($child['new'] ? '</a> <a href="' . $scripturl . '?action=unread;board=' . $child['id'] . '" title="' . $txt['new_posts'] . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')" class="css3button">'. '<strong>'. $txt['new'] .'</strong>' : '') . '</a>';
--- End code ---
Recent.template.php

--- Code: (Find) ---<a href="', $topic['new_href'], '" id="newicon', $topic['first_post']['id'], '"><img src="', $settings['lang_images_url'], '/new.gif" alt="', $txt['new'], '" /></a>
--- End code ---

--- Code: (Replace) ---<a href="', $topic['new_href'], '" id="newicon', $topic['first_post']['id'], '" class="css3button">', $txt['new'], '</a>
--- End code ---

--- Code: (Find) ---<a href="', $topic['new_href'], '" id="newicon', $topic['first_post']['id'], '"><img src="', $settings['lang_images_url'], '/new.gif" alt="', $txt['new'], '" /></a>
--- End code ---

--- Code: (Replace) ---<a href="', $topic['new_href'], '" id="newicon', $topic['first_post']['id'], '" class="css3button">', $txt['new'], '</a>
--- End code ---

Open Index.css

--- Code: (Add to End) ---a.css3button {
   font-size: 9px;
   color: #FFF;
   padding: 2px;
   text-decoration: none;
   min-width: 30px;
   background-color: #FD9604;
   border: 1px solid #FD9604;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
}
a.css3button:hover {
   background-color: #FCAA37;
}
--- End code ---

Many many thanks to Arantor & Orangine for making things better :)

Arantor:
Except that a button element is designed to submit a form - which could have interesting consequences given that you're putting it inside a link as well. It will break X/HTML validation and possibly screw up quick moderation.

There's no reason why you can't just make it a span with the same styling you have - but it won't break validation and it will work properly for being a link's text.

Antes:
I don't see any validation error both in XHTML & HTML5.

Arantor:
The validation services only see it as a guest... so they never see the 'New' icons. But it will upset some browsers.

Antes:
What if i skip-pass span & button and use a.class ?


--- Code: ---<a href="', $topic['new_href'], '" id="newicon' . $topic['first_post']['id'] . '" class="css3button"><strong>', $txt['new'], '</strong></a>
--- End code ---

Navigation

[0] Message Index

[#] Next page