+- Hero Fighter Empire - Forums (https://hf-empire.com/forum)
+-- Forum: Empire Zone (https://hf-empire.com/forum/forumdisplay.php?fid=1)
+--- Forum: Announcements (https://hf-empire.com/forum/forumdisplay.php?fid=2)
+--- Thread: Make your own HFE theme (/showthread.php?tid=236)
Make your own HFE theme - MangaD - 14-08-2018
It is possible to change the HFE forum colors using a browser add-on called Stylus.
1. Install Stylus on your browser.
Chrome | Firefox | Opera
2. Create a new style and add the following content:
(You can change the colors obviously!)
@-moz-document url-prefix(https://hf-empire.com/forum/)
{
:root {
--main-color: #AC221F !important;
--grad-color: #474747 !important;
--grad2-color: #4c4c4c !important;
--grad3-color: #525252 !important;
--grad4-color: #575757 !important;
--grad5-color: #5c5c5c !important;
--grad6-color: #616161 !important;
--hover-color: #8C0200 !important;
--red-overlay: rgba(172,34,31,0.9);
--gold: #11103f !important;
--font-color: #ffffff !important;
--link-color: #ffffff !important;
--bg-a: #131313 !important;
--bg-a2: #171717 !important;
--bg-b: #212121 !important;
--bg-b2: #252525 !important;
--bg-b3: #292929 !important;
--bg-c: #323232 !important;
--bg-c2: #393939 !important;
--bg-d: #434343 !important;
--bg-e: #575757 !important;
--shadow: #222 !important;
--popular-border: rgba(255,162,97,0.5);
--popular-bg: rgba(0,255,0,0.04);
}
#logo {
-webkit-filter: hue-rotate(-20deg) grayscale(20%);
filter: hue-rotate(-20deg) grayscale(20%) !important;
}
.logo-inner {
-webkit-filter: hue-rotate(20deg) grayscale(0%);
filter: hue-rotate(20deg) grayscale(0%) !important;
}
}
3. On the field "Applies to", select "URLs on the domain" and type in "hf-empire.com" without the quotes.
Note: This may not change the editor text area.
RE: Make your own HFE theme - BlazingGale - 23-12-2018
Hello there!
I have made two new styles for HFE that will make it look like a cold desolate land (kind of like HF's community during 2015. Ha, shots fired). As I've said there are two themes available, one is dark and the other is light.
Unfortunately due to limitations some things couldn't be changed, so you may experience some patches of red instead of blue, but hey, I tried.
Enjoy the cold colors :D
Thanks to @MangaD for helping me figure out the color palette, you're a real lad mate.
RE: Make your own HFE theme - MangaD - 23-12-2018
I really like the Dark Winter theme. The only thing I don't like about it is the variable --bg-a. It should be something like #002.
It is almost like an LF2 theme.
The Light Winter theme hurts the eyes, sorry.
RE: Make your own HFE theme - MangaD - 24-12-2018
I created a Dark Red theme and it is awesome in my humble opinion. Might make it official (for switching) later on.
https://userstyles.org/styles/167199/hf-empire-forum-dark-red-theme
Edit: It is official now.
RE: Make your own HFE theme - BlazingGale - 24-12-2018
(24-12-2018, 03:46 PM)MangaD Wrote: I created a Dark Red theme and it is awesome in my humble opinion. Might make it official (for switching) later on.
https://userstyles.org/styles/167199/hf-empire-forum-dark-red-theme
Personally I think the red should be darker.
RE: Make your own HFE theme - MangaD - 24-12-2018
I did some updates to the dark theme and also to the global variables because of the gradient color for quotes and spoilers.
New CSS code to use in stylish (change to your own hex values):
@-moz-document url-prefix(https://hf-empire.com/forum/)
{
:root {
--main-color: #AC221F !important;
--grad-color: #474747 !important;
--grad2-color: #4c4c4c !important;
--grad3-color: #525252 !important;
--grad4-color: #575757 !important;
--grad5-color: #5c5c5c !important;
--grad6-color: #616161 !important;
--hover-color: #8C0200 !important;
--red-overlay: rgba(172,34,31,0.9);
--gold: #11103f !important;
--font-color: #ffffff !important;
--link-color: #ffffff !important;
--bg-a: #131313 !important;
--bg-a2: #171717 !important;
--bg-b: #212121 !important;
--bg-b2: #252525 !important;
--bg-b3: #292929 !important;
--bg-c: #323232 !important;
--bg-c2: #393939 !important;
--bg-d: #434343 !important;
--bg-e: #575757 !important;
--shadow: #222 !important;
--popular-border: rgba(255,162,97,0.5);
--popular-bg: rgba(0,255,0,0.04);
}
#logo {
-webkit-filter: hue-rotate(-20deg) grayscale(20%);
filter: hue-rotate(-20deg) grayscale(20%) !important;
}
.logo-inner {
-webkit-filter: hue-rotate(20deg) grayscale(0%);
filter: hue-rotate(20deg) grayscale(0%) !important;
}
}
Edit: I like the dark theme so much that I made if official. Everyone can now switch between red and dark themes.
Note: Hard refresh the page with Ctrl+F5 or Ctrl+Shift+R