English (American)  中文(简体)

Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Make your own HFE theme
#1
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.
[Image: random.php?pic=random]
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
The meaning of life is to give life a meaning.
Stop existing. Start living.
Reply
#2
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.
There ain't no rest for the wicked,
Until we close our eyes for good.
The following 1 user says Thank You to BlazingGale for this post:
  • MangaD
Reply
#3
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.  Smile

The Light Winter theme hurts the eyes, sorry.
[Image: random.php?pic=random]
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
The meaning of life is to give life a meaning.
Stop existing. Start living.
The following 1 user says Thank You to MangaD for this post:
  • BlazingGale
Reply
#4
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-...-red-theme

Edit: It is official now.
[Image: random.php?pic=random]
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
The meaning of life is to give life a meaning.
Stop existing. Start living.
Reply
#5
(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-...-red-theme

Personally I think the red should be darker.
There ain't no rest for the wicked,
Until we close our eyes for good.
Reply
#6
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
[Image: random.php?pic=random]
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
The meaning of life is to give life a meaning.
Stop existing. Start living.
Reply
  


Forum Jump:


Users browsing this thread: 1 Guest(s)