Latest topics
» [GAME] Post a random picture
by SLGray Yesterday at 19:23

» [GAME] Count to 30 - Ange Edition
by SLGray Yesterday at 19:21

» [GAME] Count to One Million!
by SLGray Yesterday at 19:21

» Topic'It
by Ange Tuteur Yesterday at 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

» Rank CSS
by Mr_Grande Fri 08 Sep 2017, 09:24

» make the topic a color
by Ultimas Wed 06 Sep 2017, 19:44

» Chit Chat Thread
by Valoish Sun 03 Sep 2017, 23:20

» The like/thumbs up or down feature
by Dr.kran Sun 03 Sep 2017, 19:21

Recent Tutorials
Who is online?
In total there are 12 users online :: 1 Registered, 0 Hidden and 11 Guests :: 1 Bot

Eslam Love

[ View the whole list ]


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

[Implemented] Forum Stats Look

View previous topic View next topic Go down

avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 17
Posts : 2128
Points : 2867
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 12 Oct 2016, 14:20

@Ange Tuteur

The forum stats (topics, posts, views) are kind of elevated.

I know this is picky but this works on my forum and I modified it to work here on FMDesign.

Code:
$(function() {
  var e = $('.forum-block .forum-block-inner > div'), s, h;
  if ( e.html() != undefined ) {
    s = window.getComputedStyle(e.filter('.forum-lastpost')[0]);
    h = s.getPropertyValue('height');
    e.filter('.forum-stats').css('height', h);
    e.filter('.forum-stats').find('.number').css('line-height', ( h.replace('px', '') / (3 / 2) ) + 'px');
  }
});

Edit: Hey AT <3



Last edited by Ace 1 on Fri 04 Nov 2016, 14:46; edited 14 times in total
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4688
Points : 9735
Reputation : 2331
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 Wed 12 Oct 2016, 14:28

Ah yeah, I know about that, it's the same on phpbb3 too. It doesn't bother me, but I'm sure your script will be useful to people who don't like it either. Personally, I don't like making style modifications via JS, but in some instances it's necessary like in this case. Still, I wonder if we can reach the same result with CSS. I have a few ideas, but they're kind of hackish -- especially the position related ones.. perhaps calc might be useful ..? hm.. this is something to think about.. Computer
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 17
Posts : 2128
Points : 2867
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 12 Oct 2016, 14:35

Oh true. Vertical align doesn't really work and I don't like using position unless the container is really small.

Mind sharing your ideas? Grin
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4688
Points : 9735
Reputation : 2331
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 Wed 12 Oct 2016, 14:45

I was thinking calc might come in handy, but at the moment I'm drawing a blank. Toothless

It's like a journy for the holy grail, finding a solution that doesn't require javascript. I always used to do it back in the day. I'll probably look over it more later unless you beat me to the grail. Razz
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 17
Posts : 2128
Points : 2867
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 12 Oct 2016, 15:02

Oh WHAT I didn't think normal CSS could pass functions as the property values

I guess it's time to put this to use

Angel
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 17
Posts : 2128
Points : 2867
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 Thu 13 Oct 2016, 11:27

@Ange Tuteur Guess I won lol Razz

Code:
.forum-stats { height: 40px; }

.forum-stats > div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


Last edited by Ace 1 on Fri 04 Nov 2016, 13:55; edited 1 time in total (Reason for editing : 42px --> 40px)
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4688
Points : 9735
Reputation : 2331
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 Thu 13 Oct 2016, 15:02

Oh damn, that seems to be spot on ! Nice Surprised

Ace 1 wrote:Oh WHAT I didn't think normal CSS could pass functions as the property values
There's a lot of experimental tech. Did you check out the CSS variables ? It's sorta like SASS.
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 17
Posts : 2128
Points : 2867
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 Thu 13 Oct 2016, 18:00

Oh snap, is this how you did ForumActif Edge?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4688
Points : 9735
Reputation : 2331
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 Fri 14 Oct 2016, 05:46

Nah, since the tech isn't a standard yet I just used a class name for the majority of colors. They are :

- .color-primary (69C)
- .color-secondary (345)
- .color-tertiary (FFF)

First two were used the most if I recall correctly.
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 17
Posts : 2128
Points : 2867
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 Fri 14 Oct 2016, 13:29

I read the browser compatibility and it works on everything but Explorer ._.

And everything I read about is "experimental" and "hasn't been released yet" smh. W3C needs to stop keeping all this good stuff from us.
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 17
Posts : 2128
Points : 2867
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 Fri 04 Nov 2016, 13:53

@Ange Tuteur When you gonna implement this babe Rose
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4688
Points : 9735
Reputation : 2331
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 Fri 04 Nov 2016, 14:06

Forgot Shocked How's it now ? Surprised
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 17
Posts : 2128
Points : 2867
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 Fri 04 Nov 2016, 14:07

LES GOO

I'm important

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