The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Change Username Font.

View previous topic View next topic Go down

Solved Change Username Font.

Post by jarn on July 29th 2014, 4:55 pm

Pics:



Anyone know how to create an effect like this?

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: Change Username Font.

Post by TK2 on July 29th 2014, 8:32 pm

Add to your CSS:



Code:
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'), url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v7/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff) format('woff');
}

.body {
 font-family: 'Open Sans Condensed';
}

TK2
New Member

Posts : 1
Reputation : 1
Language : English

http://help.forumotion.com

Back to top Go down

Solved Re: Change Username Font.

Post by jarn on July 30th 2014, 5:12 am

Nothing happened.

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: Change Username Font.

Post by SLGray on July 30th 2014, 5:31 am

Add it to the top of your CSS stylesheet.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35613
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Change Username Font.

Post by jarn on July 30th 2014, 5:57 am

Still the same result, nothing happened.

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: Change Username Font.

Post by SLGray on July 30th 2014, 6:13 am

Code:
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 700;
  src:
 local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'),
url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v7/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff)
 format('woff');
}

.body {
 font-family: 'Open Sans Condensed' !important;


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35613
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Change Username Font.

Post by jarn on July 30th 2014, 6:18 am

''Detected error
We have counted a different number of "{" and of "}". It means your CSS risks to be not valid and will not be posted correctly on your forum.

We advise you to reread your code.''

That popped up after I put in the code.

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: Change Username Font.

Post by Luffy on July 30th 2014, 10:11 am

Hello,

SLGray forgot to close the last code. Please replace his code with the below:
Code:
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 700;
  src:
 local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'),
url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v7/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff)
 format('woff');
}

.body {
 font-family: 'Open Sans Condensed' !important;
}






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Change Username Font.

Post by jarn on July 30th 2014, 10:56 am

The error is gone, but there is still no change. I think maybe I'm doing something wrong. My CSS stylesheet looks like this.

Code:
    @font-face {
      font-family: 'Open Sans Condensed';
      font-style: normal;
      font-weight: 700;
      src:
    local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'),
    url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v7/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff)
    format('woff');
    }

    .body {
    font-family: 'Open Sans Condensed' !important;
    }

.circular {
   width: 75px;
   height: 75px;
   border-radius: 150px;
   -webkit-border-radius: 150px;
   -moz-border-radius: 150px;
   background: url(http://link-to-your/image.jpg) no-repeat;
   box-shadow: 0 0 8px rgba(0, 0, 0, .8);
   -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
   -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
   }


jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: Change Username Font.

Post by SLGray on July 30th 2014, 11:05 am

Do you have that font in your font library on your computer?

This is how it should look - https://www.google.com/fonts/specimen/Open+Sans+Condensed .


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35613
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Change Username Font.

Post by jarn on July 30th 2014, 11:21 am

Yes, I'm sure I have the font. Is there anything else that could be the problem?

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: Change Username Font.

Post by SLGray on July 30th 2014, 11:24 am

Code:
    @font-face {
      font-family: 'Open Sans Condensed';
      font-style: normal;
      font-weight: 700;
    }

    .body {
     font-family: 'Open Sans Condensed' !important;
    }



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35613
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Change Username Font.

Post by jarn on July 30th 2014, 11:42 am

Still nothing. Does this mean I don't have the original font installed?

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: Change Username Font.

Post by SLGray on July 30th 2014, 8:33 pm

Have you tried adding the font here?

Administration Panel > Display > Colors & Pictures > Colors
The font options are in the first section box.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35613
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Change Username Font.

Post by Ange Tuteur on July 31st 2014, 6:45 am

Try this :
Code:
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v7/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff) format('woff');
}

* { font-family:'Open Sans Condensed' }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Change Username Font.

Post by jarn on July 31st 2014, 12:39 pm

That worked, although it changed the entire font of the forum, not only the usernames. Is there any way for it to work only on usernames and not the whole forum?

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: Change Username Font.

Post by Japorized on July 31st 2014, 1:01 pm

Just a suggestion but this method will be slightly tedious.
You can add everyone into a certain group and give them all a certain hex color.
With that, add in
Code:
a span[style="color:#000000"] strong {
  /* font-family and other styles go here */
}

The downside to this is that everyone's username will be under the strong font-weight, and you might have to repeat the code for users who already have another color to their usernames.

As I said, this is just a suggestion. Hopefully the someone else can come up with a better idea from this.

Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Solved Re: Change Username Font.

Post by Ange Tuteur on July 31st 2014, 1:11 pm

Of course Wink

Replace the CSS I gave you by :
Code:
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v7/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff) format('woff');
}

a[href^="/u"] { font-family:'Open Sans Condensed' }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Change Username Font.

Post by jarn on July 31st 2014, 1:26 pm

Thanks! Just one more thing though - is there a way to make the letters in capitals like in the original post without having to manually change every name to caps?

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: Change Username Font.

Post by Japorized on July 31st 2014, 1:34 pm

Code:
a[href^="/u"]::first-letter {
text-transform:capitalize;
}

See if this works

Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Solved Re: Change Username Font.

Post by jarn on July 31st 2014, 1:37 pm

It didn't work, unfortunately.

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: Change Username Font.

Post by Japorized on July 31st 2014, 1:56 pm

Hmm... Then try this.
Create a new javascript file and apply it to all pages.
Code:
$(document).ready(function(){
    $('a[href^="/u"]').addClass("capitalize");
});
Then go to your CSS stylesheet
Code:
.capitalize {
text-transform: capitalize;
}
Here's a sample of it working
http://jsfiddle.net/JnY65/

Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Solved Re: Change Username Font.

Post by jarn on July 31st 2014, 3:09 pm

Nothing happened. But wouldn't your solution only make the first letter capitalized since it says "Test" rather than "TEST"?

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: Change Username Font.

Post by Japorized on July 31st 2014, 3:15 pm

Oh, ahaha. Sorry. My bad.
Then you won't need all the jQuery.
Just change
Code:
a[href^="/u"] {
  font-family:'Open Sans Condensed';
}
to
Code:
a[href^="/u"] {
  font-family:'Open Sans Condensed';
  text-transform: capitalize;
}
will do.

Hope this helps now. Smile

Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Solved Re: Change Username Font.

Post by jarn on July 31st 2014, 3:37 pm

I did a quick google search. If I change it from 'capitalize' to 'uppercase', it works. Thanks for the help guys, you can lock this now!

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: Change Username Font.

Post by Ange Tuteur on July 31st 2014, 5:20 pm

Topic archived

Have a good day. ^^

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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