I converted my forum to fontawesome hosted on my server but I had to go from fontawesome 4 to 5 so many icons changed. I got most of them updated but where/how do you change the thread icons and the thread icon legend? These are the little icons that indicate hot topic and new posts, etc...
I think it is in thread_status.css (Flatty Theme) but I am unsure how to update these unicode icons to inline class icons?
.thread_status { display: inline-block; width: 30px; }
.thread_status:after { font-family: "FontAwesome"; content: "\f005"; font-size: 17px; color: #2c82c9; }
[class*="hot"]:after { color: #fc6042; content: "\f06d"; padding-left: 1px; }
[class*="new"]:after { color: #a19c69; }
[class*="lockfolder"]:after { color: #777; content: "\f023"; padding-left: 2px; }
.thread_status.dot_folder { background-position: 0 0;}
.thread_status.dot_hotfolder { background-position: 0 -20px; }
.thread_status.dot_hotlockfolder { background-position: 0 -40px; }
.thread_status.dot_lockfolder { background-position: 0 -60px; }
.thread_status.dot_newfolder { background-position: 0 -80px;}
.thread_status.dot_newhotfolder { background-position: 0 -100px;}
.thread_status.dot_newhotlockfolder { background-position: 0 -120px;}
.thread_status.dot_newlockfolder { background-position: 0 -140px;}
.thread_status.dot_folder:after {
font-family: FontAwesome;
font-size: 14px;
color: #565656;
content: "\f15c";
}
I also need to change the icons in the USER CP NAV Messenger block as seen in the screen cap I attached...
Maybe you have to change the font-family to:
font-family: 'Font Awesome 5 Free'
(2019-11-07, 01:44 PM)SvePu Wrote: [ -> ]Maybe you have to change the font-family to:
font-family: 'Font Awesome 5 Free'
I tried that and got the 3 of them to work...I can't figure out the others!
Try this in thread_status.css
.thread_status { display: inline-block; width: 30px; }
.thread_status:after { font-family: "Font Awesome 5 Free"; content: "\f005"; font-size: 17px; color: #2c82c9; font-weight: 900;}
[class*="hot"]:after { color: #fc6042; content: "\f06d"; padding-left: 1px; }
[class*="new"]:after { color: #a19c69; }
[class*="lockfolder"]:after { color: #777; content: "\f023"; padding-left: 2px; }
.thread_status.dot_folder { background-position: 0 0;}
.thread_status.dot_hotfolder { background-position: 0 -20px; }
.thread_status.dot_hotlockfolder { background-position: 0 -40px; }
.thread_status.dot_lockfolder { background-position: 0 -60px; }
.thread_status.dot_newfolder { background-position: 0 -80px;}
.thread_status.dot_newhotfolder { background-position: 0 -100px;}
.thread_status.dot_newhotlockfolder { background-position: 0 -120px;}
.thread_status.dot_newlockfolder { background-position: 0 -140px;}
.thread_status.dot_folder:after {
font-family: Font Awesome 5 Free;
font-size: 14px;
color: #565656;
content: "\f15c";
font-weight: 900;
}
That worked!! Thank you so much!!
How about the folder icons in the messenger box in user cp nav? I attached a screen cap. I can probably fix them but I cant find where they are at in the templates!
You have to edit the certain templates manually, because some Icon classes are obsolete.
(2019-11-07, 03:10 PM)SvePu Wrote: [ -> ]You have to edit the certain templates manually, because some Icon classes are obsolete.
I can change them but I can't seem to get the unicode css to work with FontAwesome 5...here is the code for the show thread > thread tools. I just cant seem to get it to work with the new FA 5 ( I did add font awesome 5 free in to the css but no luck)
ul.thread_tools,
ul.thread_tools li {
list-style: none;
padding: 0;
margin: 0;
}
ul.thread_tools li:before {
font-family: Font Awesome 5 Free;
display: inline-block;
padding: 0px 0px 2px 2px;
margin-bottom: 2px;
}
ul.thread_tools li.printable:before {
font-size: 13px;
content: "\f02f";
color: #666;
padding-right: 5px;
}
ul.thread_tools li.sendthread:before {
font-size: 13px;
content: "\f1d8";
padding-right: 5px;
}
ul.thread_tools li.subscription_add:before {
font-size: 13px;
content: "\f02e";
color: #666;
padding-right: 6px;
padding-left: 3px;
}
ul.thread_tools li.subscription_remove:before {
font-size: 13px;
content: "\f097";
color: #666;
padding-right: 6px;
padding-left: 3px;
}
ul.thread_tools li.poll {
background-position: 0 -80px;
}
.showthread_spinner {
width: 100%;
margin: 0 auto;
display: block;
text-align: center;
padding: 20px;
}
And here is my usercp.css file that I already added the FA5 tag line but I cant get this one to work for PM messenger sub folders (trash, sent, etc)
.usercp_nav_item { display: block; padding: 1px; }
.usercp_nav_composepm { background-position: 0 0; }
.usercp_nav_pmfolder { background-position: 0 -20px; }
.usercp_nav_sub_pmfolder { padding-left: 20px; }
.usercp_nav_sub_pmfolder i:before { font-family: "Font Awesome 5 Free"; content: "\f115"; color: #d98b3a; font-weight: 900; }
.usercp_nav_trash_pmfolder { padding-left: 21px; }
.usercp_nav_trash_pmfolder i:before { font-family: "Font Awesome 5 Free"; content: "\f014"; color: #777; padding-right: 3px; font-weight: 900; }
.usercp_nav_email { padding-left: 18px; }
.usercp_nav_password { padding-left: 18px; }
.usercp_nav_username { padding-left: 18px; margin-top: 4px; }
.usercp_nav_editsig { padding-left: 7px; }
.usercp_nav_avatar { padding-left: 7px; margin-top: 7px; }
.usercp_notepad { width: 99%; }
.usercp_container {
margin: 5px;
padding: 8px;
border:1px solid #ccc; }
.pmspace {
float: right;
margin: -3px 5px; }
.pmspace_container {
background: #fff;
border: 1px solid #ccc;
width: 100px;
display: inline-block; }
.pmspace_used {
display: inline-block;
color: #fff;
margin: -1px; }
.pmspace_used.low {
border: 1px solid #0c5a01;
background: #167203; }
.pmspace_used.medium {
background: #ff862b;
border: 1px solid #d7611e; }
.pmspace_used.high {
background: #e73c3c;
border: 1px solid #c00; }
.pmspace_unused {
display: inline-block; }
.pmspace_text {
padding: 1px 5px;
display: inline-block; }
.bdbottom { border-bottom: 1px dashed #eee; }
(2019-11-07, 06:44 PM)SvePu Wrote: [ -> ]I'm also using a modified version of Flatty, but I don't use FontAwesome 5. I prefer the old version 4.7.
=> https://bastler-treffpunkt.de/
Looks pretty clean! I should have stuck with 4.7 but I wanted to host FA locally and I could only find the kit for FA 5. I am almost done converting but I need to get the PM folders and thread tools converted.