FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

Who is online?
In total there are 33 users online :: 0 Registered, 0 Hidden and 33 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

[EDGE] Lastpost Icon Colors

View previous topic View next topic Go down

Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Sun 29 Jan 2017, 19:08

[EDGE] Lastpost Icon Colors 803068d8a8ed48dc9d4c3eac67e5f151

The gray-highlighted area is usually shown as an image (and you can't change the color of images through CSS). But with the following code, it'll be possible.

ACP > Display > Colors > CSS Stylesheet

Code:
.forum-lastpost span > strong ~ a:after, .newpost-img a:after {
    font-family: FontAwesome !important;
    content: '\f061';
    font-size: 14px;
    margin-left: 3px;
    vertical-align: top;
    color: #333;
}
 
.forum-lastpost span > strong ~ a:hover:after { color: #69C; }
 
.forum-lastpost span > strong ~ a[href*="view=newest"]:after, .newpost-img a:after { color: #F30; }
 
.forum-lastpost span > strong ~ a, .newpost-img a { position: relative; }
.forum-lastpost span > strong ~ a img, .newpost-img a img {
  background-image: none;
  opacity: 0;
  top: 0; left: 0;
  height: 100%; width: 100%;
  position: absolute;
}


You can change the default color:

Code:
    color: #333;

default hover color:

Code:
    color: #69C;

and unseen post color:

Code:
    color: #F30;


Let me know if you guys like it.


Last edited by Ace 1 on Sun 20 Aug 2017, 13:39; edited 3 times in total
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Mon 30 Jan 2017, 10:40

Oh nice modification ! I can't believe I didn't think of doing that when I was working on the theme. Totally makes changing the arrow color a whole lot easier, so nice work ! Very good
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Mon 30 Jan 2017, 14:18

Yeah I used to use JS for some dumb reason to do this but now I'm like CSS ftw.

Ty for the compliment Smile

Post Buttons Styling:
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2929
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay Mon 30 Jan 2017, 22:19

Working fine here! Good!
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Tue 31 Jan 2017, 10:50

Ace 1 wrote:Yeah I used to use JS for some dumb reason to do this but now I'm like CSS ftw.

Ty for the compliment Smile

Post Buttons Styling:
Haha I now what you mean. Back in the day when I didn't know JS, I used to try and solve almost ALL problems with CSS only, learned quite a few tricks doing that. BUT yeah, it's always best to try and achieve something with HTML and/or CSS first before going full JavaScript. Razz

Nice mod for the post buttons btw Thumb right
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2929
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay Tue 31 Jan 2017, 22:07

@Ace 1 - What about this other lastpost icon that you can find embedded in forums and Newest Posts page: http://prntscr.com/e2ydyo

Code info: http://prntscr.com/e2yetu
References this line:
Code:
.author img,.forum-info a[href^="/viewtopic?"] img,.forum-info a[href^="/f"] img,.forum-info a[href^="/t"] img{vertical-align:top;margin-right:3px}

Thanks pal!
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Wed 01 Feb 2017, 00:34

@Dr Jay

Idk what those screenshots are for but I updated the code so it includes new post icons and the lastpost icons within forums (it only worked for the homepage, now for all paths).
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2929
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay Wed 01 Feb 2017, 12:44

Every good coder knows that giving as many details as possible helps tremendously.

With that aside, thanks for updating it.
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Wed 01 Feb 2017, 19:51

Thank you for giving me the idea Smile
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Sun 20 Aug 2017, 13:40

Just made a small update to preserve tooltipsters.

@Ange Tuteur
Mr_Grande
Mr_Grande

Gender : Unspecified
Age : 25
Posts : 42
Points : 2659
Reputation : 9
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision

PostMr_Grande Thu 24 Aug 2017, 17:40

This seems like a great Idea
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum