Advertisement:

Author Topic: [TRICK] "NEW" post icons to the left - A 10 Seconds Fix By Wellwisher  (Read 13999 times)

Offline Wellwisher

  • Jr. Member
  • **
  • Posts: 369
  • Gender: Male
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:

Code: [Select]

[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)
« Last Edit: May 13, 2016, 08:14:56 AM by Wellwisher »

Offline ayeweb

  • Semi-Newbie
  • *
  • Posts: 44
    • lottery.co.th on Facebook
    • Siam-Lottery on GitHub
    • @lotteryth on Twitter
    • หวยออก
easy, But work well.
Thanks

Offline qc

  • Jr. Member
  • **
  • Posts: 140
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 :)

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 68,044
    • Arantor on GitHub
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.
To assume is to hope that those who came before had the presence of mind and capacity to implement the dreams of those who would come after.

You either die a hero or live long enough to see yourself become the villain. It seems you have chosen which, and now I must do the same.

Offline lurkalot

  • Sr. Member
  • ****
  • Posts: 978
  • Gender: Male
  • Tinyportal Support
    • guitaristguild on Facebook
    • Tinyportal on GitHub
    • @GuitaristGuild on Twitter
    • Guitarist Guild
Nice trick.  8) Bookmarked this for future reference. Thanks.

Offline Ken.

  • Full Member
  • ***
  • Posts: 496
  • Gender: Male
  • TinyPortal Rocks!
    • Our FamilyForum
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.


Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
What 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.

Offline Wellwisher

  • Jr. Member
  • **
  • Posts: 369
  • Gender: Male
@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. 


Offline Steve

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 3,935
  • Gender: Male
  • I have not yet begun to procrastinate.
Nice! I assume one must do this for each theme?
Please do not PM me for support.

Offline Wellwisher

  • Jr. Member
  • **
  • Posts: 369
  • Gender: Male
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.  ;)

Offline @rjen

  • Jr. Member
  • **
  • Posts: 171
  • Gender: Male
    • FJR-club Nederland
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.0 with Tinyportal 1.3R at www.fjr-club.nl
Testing SMF 2.1 beta 3 with Tinyportal 2.0 at http://test2.fjr-club.nl/

Offline qc

  • Jr. Member
  • **
  • Posts: 140
@rjen: I changed the topic listing on the MessageIndex.template.php (and all other templates dealing with topic listings) to something like this:
Code: [Select]
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 :)

Offline CrimeS

  • Jr. Member
  • **
  • Posts: 212
  • Gender: Male
    • studiocrimes.com
This little trick is actually a great theming idea. It makes the forum more tidy.

Offline skb

  • Charter Member
  • Jr. Member
  • *
  • Posts: 213
    • Metabolically Challenged
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.   
Learning, every day.
Forum - The Diabetic Pub
Because every diabetic needs help
SMF 2.0.15 (default theme) / TP 1.2R3

Offline Wellwisher

  • Jr. Member
  • **
  • Posts: 369
  • Gender: Male
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:

Code: [Select]

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


Offline skb

  • Charter Member
  • Jr. Member
  • *
  • Posts: 213
    • Metabolically Challenged
Tried it, but it doesn't seem to work. I'm not complaining, just a beggar who wants to ride.
Learning, every day.
Forum - The Diabetic Pub
Because every diabetic needs help
SMF 2.0.15 (default theme) / TP 1.2R3

Offline Wellwisher

  • Jr. Member
  • **
  • Posts: 369
  • Gender: Male
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.

Offline skb

  • Charter Member
  • Jr. Member
  • *
  • Posts: 213
    • Metabolically Challenged
Still the same. The text only posts do not budge.
Learning, every day.
Forum - The Diabetic Pub
Because every diabetic needs help
SMF 2.0.15 (default theme) / TP 1.2R3

Offline Wellwisher

  • Jr. Member
  • **
  • Posts: 369
  • Gender: Male
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:

Code: [Select]
[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;}

Offline skb

  • Charter Member
  • Jr. Member
  • *
  • Posts: 213
    • Metabolically Challenged
I noticed that too. Now the topics are aligned with the description. Thanks.
Learning, every day.
Forum - The Diabetic Pub
Because every diabetic needs help
SMF 2.0.15 (default theme) / TP 1.2R3