Hello!
After reading this tutorial i tried to change the stars with fontawsome icons.
Sadly i was unable to made the changes as written and explained in that tutorial.
As i'm not a coder or a developer,it took me a lot of time to make these few little changes and i have got the result i was looking for.
So,i would like to share it with people who are also looking for these changes but can't get them to work,may be because the other tutorial has been made for the default theme,i am using the Dark1.8 theme.
So,open your postbit template and replace:
If you like to have the stars before the user title,then add the above code like this:
![.png]( "PNG Image")
Cattura.PNG (Size: 15.88 KB / Downloads: 2)
I prefer the stars before the user title better.However,depends on you.
If you are using the setting "display posts in classic mode" then you would need to modify your postbit classic template by replacing :
After that open your memberlist_user template and replace:
Here too,i have added it in the way that i see the stars before the uder title,so,like this:
![.png]( "PNG Image")
1.PNG (Size: 28.12 KB / Downloads: 0)
You can add it as you prefer.
Then,open your member_profile template and replace:
Again,if you like to have the stars before the user title,then add it like this:
![.png]( "PNG Image")
2.PNG (Size: 26.71 KB / Downloads: 0)
Now comes the main part.
This part is very important,without this part,you won't be able to see any stars.
So,now open your headerinclude template and add the following:
Like this:
![.png]( "PNG Image")
3.PNG (Size: 73.3 KB / Downloads: 1)
After that open you global.css and in the end add the following:
I have made a different color for every single group which can be modified as you prefer in the field "color".
After trying for a long time i wasn't able to made the changes work with the code in the original tutorial,after visiting the website from fontawesome,i made some little but important changes which did the job.
![.png]( "PNG Image")
4.PNG (Size: 13.62 KB / Downloads: 0)
The above indicated Colons made the difference for me,using only one,it didn't work.
The default star image location "images/star.png" can be left as it is,no need to delete it.
However,it is my first tutorial for this community and i would kindly like to thanks the user Eldenroot who made the original tutorial,without the original one,i couldn't make this one.
This tutorial is for the users who are usingthe latest version of fontsawesome i.e. 5.3.1
Please forgive my errors,if i made any.
Regards.
![.png]( "PNG Image")
Cattulra.PNG (Size: 26.31 KB / Downloads: 2)
After reading this tutorial i tried to change the stars with fontawsome icons.
Sadly i was unable to made the changes as written and explained in that tutorial.
As i'm not a coder or a developer,it took me a lot of time to make these few little changes and i have got the result i was looking for.
So,i would like to share it with people who are also looking for these changes but can't get them to work,may be because the other tutorial has been made for the default theme,i am using the Dark1.8 theme.
So,open your postbit template and replace:
Code:
{$post['userstars']}
with
<span style="text-align: center;" class="userstar star_{$post['stars']}" title="{$post['usertitle']}"></span><br />If you like to have the stars before the user title,then add the above code like this:
Cattura.PNG (Size: 15.88 KB / Downloads: 2)
I prefer the stars before the user title better.However,depends on you.
If you are using the setting "display posts in classic mode" then you would need to modify your postbit classic template by replacing :
Code:
{$post['userstars']}
with
<span style="text-align: center;" class="userstar star_{$post['stars']}" title="{$post['usertitle']}"></span>After that open your memberlist_user template and replace:
Code:
{$user['userstars']}
with
<span style="text-align: center;" class="userstar star_{$user['stars']}" title="{$user['usertitle']}"></span><br />Here too,i have added it in the way that i see the stars before the uder title,so,like this:
1.PNG (Size: 28.12 KB / Downloads: 0)
You can add it as you prefer.
Then,open your member_profile template and replace:
Code:
{$userstars}
with
<span style="text-align: center;" class="userstar star_{$stars}" title="{$usertitle}"></span><br />Again,if you like to have the stars before the user title,then add it like this:
2.PNG (Size: 26.71 KB / Downloads: 0)
Now comes the main part.
This part is very important,without this part,you won't be able to see any stars.
So,now open your headerinclude template and add the following:
Code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">Like this:
3.PNG (Size: 73.3 KB / Downloads: 1)
After that open you global.css and in the end add the following:
Code:
.userstar {
font-family: Font Awesome\ 5 Free;
font-size: 13px;
line-height: 13px;
display: inline-block;
letter-spacing: 2px;
font-weight: 400;
}
.star_1::before {
font-weight: 400;
content: "\f005";
color: white;
}
.star_2::before {
font-weight: 400;
content: "\f005\f005";
color: #ac95f9;
}
.star_3::before {
font-weight: 400;
content: "\f005\f005\f005";
color: #00ecff;
}
.star_4::before {
font-weight: 400;
content: "\f005\f005\f005\f005";
color: gold;
}
.star_5::before {
font-weight: 400;
content: "\f005\f005\f005\f005\f005";
color: #CC00CC;
}
.star_6::before {
font-weight: 400;
content: "\f005\f005\f005\f005\f005\f005";
}
.star_7::before {
font-weight: 400;
color: red;
content: "\f005\f005\f005\f005\f005\f005\f005";
}I have made a different color for every single group which can be modified as you prefer in the field "color".
After trying for a long time i wasn't able to made the changes work with the code in the original tutorial,after visiting the website from fontawesome,i made some little but important changes which did the job.
4.PNG (Size: 13.62 KB / Downloads: 0)
The above indicated Colons made the difference for me,using only one,it didn't work.
The default star image location "images/star.png" can be left as it is,no need to delete it.
However,it is my first tutorial for this community and i would kindly like to thanks the user Eldenroot who made the original tutorial,without the original one,i couldn't make this one.
This tutorial is for the users who are usingthe latest version of fontsawesome i.e. 5.3.1
Please forgive my errors,if i made any.
Regards.
Cattulra.PNG (Size: 26.31 KB / Downloads: 2)