IMPORTANT

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

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Fri 08 Jun 2018, 11:02

» 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

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

Recent Tutorials
Top posting users this month
Who is online?
In total there are 6 users online :: 0 Registered, 0 Hidden and 6 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
Gender : Unspecified
Age : 18
Posts : 2153
Points : 3183
Reputation : 92
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
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
Gender : Male
Age : 22
Posts : 4733
Points : 9850
Reputation : 2365
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Ace 1
Valued Member
Gender : Unspecified
Age : 18
Posts : 2153
Points : 3183
Reputation : 92
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
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

Gender : Male
Posts : 156
Points : 826
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
View user profile http://www.geekpolice.net

PostDr Jay on Mon 30 Jan 2017, 22:19

Working fine here! Good!

--------

~Dr Jay
Notice: Since FMD is closing, I can help provide support.
See link to my forum on my profile.
avatar
Ange Tuteur
Administrator
Gender : Male
Age : 22
Posts : 4733
Points : 9850
Reputation : 2365
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Dr Jay

Gender : Male
Posts : 156
Points : 826
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
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
Notice: Since FMD is closing, I can help provide support.
See link to my forum on my profile.
avatar
Ace 1
Valued Member
Gender : Unspecified
Age : 18
Posts : 2153
Points : 3183
Reputation : 92
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
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

Gender : Male
Posts : 156
Points : 826
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
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
Notice: Since FMD is closing, I can help provide support.
See link to my forum on my profile.
avatar
Ace 1
Valued Member
Gender : Unspecified
Age : 18
Posts : 2153
Points : 3183
Reputation : 92
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
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
Gender : Unspecified
Age : 18
Posts : 2153
Points : 3183
Reputation : 92
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
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

Gender : Unspecified
Age : 19
Posts : 42
Points : 556
Reputation : 9
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
View user profile

PostMr_Grande on 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