[TRICK] "NEW" post icons to the left - A 10 Seconds Fix By Wellwisher

Started by Wellwisher, May 13, 2016, 07:59:48 AM

Previous topic - Next topic

Wellwisher

What you will achieve in 10 seconds or less with *ONE LINE* of CSS code:



*Image shown for demonstrational purposes




Let's begin!

Open file: Theme/css/index.css

Add at the bottom:



[id^='newicon'] > img{float:left;margin:10px;}.subject.stickybg2 span {display: inline;width: calc(100% - 50px);}



Done. Wow, that was fast. Yep, that's what she said.  :(




Feel free to add your own css modifications and comments below.

Much love - Wellwisher.  8)


qc

Hey Wellwisher,

we seem to have had similar ideas :)

What I did not like about the 'new' icon is the fact that it is an untranslatable 'text'-image and that it is hard to click in order to go directly to the latest unread post - especially on a mobile touch-screen. Therefore I changed the image to a symbol and made the whole topic title a link leading to the latest unread post instead of the first post (also added an 'already replied' icon and removed the rather pointless topic icons).

It looks just much more orderly on the left:
Playing quizduell? Having quizduell questions? Our german quizduell forum quizcommunity.de is looking for quiz freaks to come and play quizduell with us :)

Arantor

It's quite possible to have different images in different languages and is supported in the default theme ;)

Though I do like the icons there, and it was changed in 2.1 to be real-text rather than an image and on the left like this.

lurkalot

Nice trick.  8) Bookmarked this for future reference. Thanks.

Ken.

Very nice indeed!
The OP fix works for me, thanks for the post Wellwisher.  8)
"If you don't have a stack of failures in your shop, you aren't trying hard enough". --Richard Raffin.


Antechinus

Quote from: Wellwisher on May 13, 2016, 07:59:48 AMWhat you will achieve in 10 seconds or less with *ONE LINE* of CSS code:

Well, that just down to your choice of formatting. You could easily do the entire index.css with "one line of code" too. ;) But it's a good tip.

I've always preferred the icons at the left, and am responsible for it being that way in 2.1, but of course that was done with markup changes since we were rewriting things anyway.

Wellwisher

@qc I wish your forum was in english man. It's got a few nifty design features, worth exploring. Btw, You could use my code to target the "new icon" img and use "display:none" and add "content:before" to add "NEW" text instead. The symbols are pretty nifty too. Nice work mate. :)

@Antechinus I meant "one line" in non-coding standards... if there is such a thing. The aim for me is in trying to keep these 'tricks' short, user-friendly and easy to follow. Not everyone is a coder around here.  :P My thanks for sorting it out in 2.1 sir. 


Steve

DO NOT pm me for support!

Wellwisher

Quote from: Steve on May 19, 2016, 08:58:51 AM
Nice! I assume one must do this for each theme?

You can "hook" the css snippet with $context['html_headers'] so you won't have to change it every time you change a theme. Although, I didn't want new users tinkering with core files so I made made a pure css only trick.

I also made a "Demo hooks" mod when I was learning to hook funtions which will help you. Just be sure to add Shambles correction to my mod.  ;)

@rjen

Quote from: qc on May 17, 2016, 01:26:41 PM
Hey Wellwisher,

we seem to have had similar ideas :)

What I did not like about the 'new' icon is the fact that it is an untranslatable 'text'-image and that it is hard to click in order to go directly to the latest unread post - especially on a mobile touch-screen. Therefore I changed the image to a symbol and made the whole topic title a link leading to the latest unread post instead of the first post (also added an 'already replied' icon and removed the rather pointless topic icons).

It looks just much more orderly on the left:


Would you mind sharing the code changes you used for this?
Ik like the idea...
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

qc

@rjen: I changed the topic listing on the MessageIndex.template.php (and all other templates dealing with topic listings) to something like this:
foreach ($context['topics'] as $topic) {
...

echo '<tr>';
echo '<td class="description">';
echo '<span id="msg_'.$topic['first_post']['id'].'">';

// Already replied?
if ($topic['is_posted_in']) {
echo '<span class="glyphicon glyphicon-share-alt icon-topic-replied" title="You have already replied"></span> ';
}

// Is this topic new? (assuming they are logged in!)
if ($topic['new'] && $context['user']['is_logged']) {
echo '<span class="glyphicon glyphicon-certificate icon-topic-new" title="New posts"></span> ';
}

echo $topic['is_sticky'] ? '<strong>' : '', '<span>', '<a href="'.$topic['new_href'].'">'.$topic['subject'].'</a>', (!$context['can_approve_posts'] && !$topic['approved'] ? '&nbsp;<em>(' . $txt['awaiting_approval'] . ')</em>' : ''), '</span>', $topic['is_sticky'] ? '</strong>' : '';

...
You would need to include the glyphicon font and style the icons via the icon-topic-* classes.

If you just want to change or style the new icon, better go with @wellwishers CSS-only change.
Playing quizduell? Having quizduell questions? Our german quizduell forum quizcommunity.de is looking for quiz freaks to come and play quizduell with us :)

CrimeS

This little trick is actually a great theming idea. It makes the forum more tidy.

skb

Nice trick wellwisher.

Just one snag, Where there is no "new" icon, the text tends to align to the extreme left disturbing symmetry.
See 2nd last entry in the right side pane of img you posted.   

SMF 2.1.4 / TP 2.2.2

Wellwisher

Quote from: skb on May 31, 2016, 06:28:04 AM
Nice trick wellwisher.

Just one snag, Where there is no "new" icon, the text tends to align to the extreme left disturbing symmetry.
See 2nd last entry in the right side pane of img you posted.

SMF default theme is designed that way but a lazy man fix for that:



[id^="newicon"] > img {float: left;margin: 10px 10px 10px 0px;}.subject.stickybg2 span {display: inline;width: calc(100% - 50px);}
.subject{padding-left: 10px!important;}


skb

Tried it, but it doesn't seem to work. I'm not complaining, just a beggar who wants to ride.

SMF 2.1.4 / TP 2.2.2

Wellwisher

Quote from: skb on May 31, 2016, 06:57:19 AM
Tried it, but it doesn't seem to work. I'm not complaining, just a beggar who wants to ride.

Make sure you deleted my older code and add the one I posted above. If it's still not working, empty your browser cache.

skb


SMF 2.1.4 / TP 2.2.2

Wellwisher

Quote from: skb on May 31, 2016, 07:10:37 AM
Still the same. The text only posts do not budge.

I can see on your front page the board titles have moved to the left which means it's working even if you can't see it. ;D The lazy man method looks odd, it's prolly better if you add this instead:


[id^="newicon"] > img {float: left;margin: 10px 10px 10px 0px;}.subject.stickybg2 span {display: inline;width: calc(100% - 50px);}
.subject.stickybg2,.subject.windowbg2,.subject.stickybg.locked_sticky2,.subject.lockedbg2{padding-left: 10px;}

skb

I noticed that too. Now the topics are aligned with the description. Thanks.

SMF 2.1.4 / TP 2.2.2

Advertisement: