Latest topics
» [GAME] Count to 999 using odd numbers Van-Helsing Edition
by Van-Helsing Yesterday at 16:03

» [GAME] Count to 1000 using even numbers Van-Helsing Edition
by Van-Helsing Yesterday at 16:03

» [GAME] Count to One Million!
by Van-Helsing Yesterday at 16:02

» [GAME] Count to 30 - Ange Edition
by Van-Helsing Yesterday at 16:01

» Is there any new update for ForumActif Edge?
by Van-Helsing Yesterday at 16:01

» Add a login popup for the toolbar
by Ape Sun 24 Sep 2017, 17:26

» [GAME] Post a random picture
by SLGray Fri 22 Sep 2017, 19:23

» Topic'It
by Ange Tuteur Fri 22 Sep 2017, 10:06

» Topic'It
by SLGray Thu 21 Sep 2017, 15:52

» FM Themes
by SLGray Thu 21 Sep 2017, 15:51

» User - Made Creations
by SLGray Thu 21 Sep 2017, 15:50

» IconSkouliki
by skouliki Sun 17 Sep 2017, 11:05

» Awards
by Mr_Grande Sun 17 Sep 2017, 08:52

» Modify Category Tabs lead to a desired position and auto scroll click
by djblah Fri 15 Sep 2017, 14:56

» Display a preview of the user profile on hover
by Eiki Thu 14 Sep 2017, 02:38

Recent Tutorials
Who is online?
In total there are 5 users online :: 0 Registered, 0 Hidden and 5 Guests :: 2 Bots

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

[EDGE] Lastpost Icon Colors

View previous topic View next topic Go down

avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 17
Posts : 2128
Points : 2869
Reputation : 85
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Sun 29 Jan 2017, 19:08


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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4688
Points : 9738
Reputation : 2332
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on 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
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 17
Posts : 2128
Points : 2869
Reputation : 85
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on 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:
For the "New Topic" and "Post Reply" buttons on Edge. With this you can change the color8 or background color7.

Code:
.buttons a img { display: none; }

.buttons a[href] {
    border: none;
    padding: 5px 6px;
    margin: 0 0 3px;
    background-color: #69C;
    color: #FFF;
    font-size: 14px;
    text-transform: uppercase;
}

.buttons a[href]:before { font: 16px FontAwesome !important; }
.buttons a[href]:after { vertical-align: top; }

.buttons a[href*="mode=newtopic"]:before { content: '\f0a9'; }
.buttons a[href*="&mode=newtopic"]:after { content: ' New Topic'; }
.buttons a[href*="&mode=reply"]:before { content: '\f055'; }
.buttons a[href*="&mode=reply"]:after { content: ' Post Reply'; }
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 550
Reputation : 34
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Mon 30 Jan 2017, 22:19

Working fine here! Good!

--------

~Dr Jay
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4688
Points : 9738
Reputation : 2332
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on 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:
For the "New Topic" and "Post Reply" buttons on Edge. With this you can change the color8 or background color7.

Code:
.buttons a img { display: none; }

.buttons a[href] {
    border: none;
    padding: 5px 6px;
    margin: 0 0 3px;
    background-color: #69C;
    color: #FFF;
    font-size: 14px;
    text-transform: uppercase;
}

.buttons a[href]:before { font: 16px FontAwesome !important; }
.buttons a[href]:after { vertical-align: top; }

.buttons a[href*="mode=newtopic"]:before { content: '\f0a9'; }
.buttons a[href*="&mode=newtopic"]:after { content: ' New Topic'; }
.buttons a[href*="&mode=reply"]:before { content: '\f055'; }
.buttons a[href*="&mode=reply"]:after { content: ' Post Reply'; }
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
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 550
Reputation : 34
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on 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!

--------

~Dr Jay
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 17
Posts : 2128
Points : 2869
Reputation : 85
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on 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).
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 550
Reputation : 34
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on 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.

--------

~Dr Jay
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 17
Posts : 2128
Points : 2869
Reputation : 85
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Wed 01 Feb 2017, 19:51

Thank you for giving me the idea Smile
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 17
Posts : 2128
Points : 2869
Reputation : 85
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Sun 20 Aug 2017, 13:40

Just made a small update to preserve tooltipsters.

@Ange Tuteur
avatar
Mr_Grande

Title :
New Coder
Gender : Unspecified
Age : 19
Posts : 37
Points : 284
Reputation : 6
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile

PostMr_Grande on Thu 24 Aug 2017, 17:40

This seems like a great Idea

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