Hextech

[TwitchisMental]

Link to the theme


Hextech
A dark spacey grungy like smf theme.

Features :
Responsive Design
Remixed Info Center
Social Media Section
MultiColor Theme with a color switcher.
Remixed Breadcrumb
Avatar of last poster shown in last post section of the board index.

License :

Font Awesome License - https://fontawesome.com/license/free

SMF Version :



Patch Notes :

Code Select Expand

1.0 : Initial Release

Code Select Expand

1.1 :
Board Icons Update : Replaced the Board Icons with some Font-Awesome icons.
Adjustment : Adjusted the background color of the popup window for emotes.
Adjustment: Fixed the width of the board icon area in the message index.
Adjustment: Adjusted the recent posts section to show less for smaller screens.
Bug Fix : Fixed the user menu lists not showing properly for smaller screens.

Code Select Expand

1.1.1 :
Added Feature : You can now enable or disable the top right color switcher.
Adjustment: Adjusted the header padding.
Update: Updated the Font-Awesome Icons to the latest version 6.2

Code Select Expand

1.1.2 :
Update : Updated for SMF 2.1.3
Adjustment: Adjusted the breadcrumb so that all arrows are even.
Adjustment: Adjusted input box height.
Bug Fix: Fixed the HR tag not displaying.

Code Select Expand

1.1.3 :
Bug Fix : Fixed an issue where the user section and login would not show on smaller screens.
Adjustment: Adjusted the breadcrumb display on smaller screens.
Adjustment: Now shows the unread posts and updated topics links on smaller screens.

Code Select Expand

1.1.4. :
Adjustment: Adjusted how width is set on everything. Removed cap of 1700px.
Adjustment: Adjusted link and text colors on certain background like the approve background.

Code Select Expand

1.1.5 :
Updated for SMF 2.1.4 and the Attachment UI changes.
Adjustment: Adjusted a few text colors for legibility.

Code Select Expand

1.1.6
Adjustment: Adjusted some text colors in the profile section for visibility reasons.
Adjustment: Adjusted the last post section width just a tad.
Adjustment: Adjusted some windowbg  hover background colors.
Adjustment: Adjusted the line-height in the manage board section so the text was centered better vertically.
Adjustment: Adjusted some border colors in the ACP.

[Steve]

I love the colors of this theme. I just need to learn how to change those god-awful default board icons (not for just this theme, but any one). 

[TwitchisMental]

I love the colors of this theme. I just need to learn how to change those god-awful default board icons (not for just this theme, but any one). 

Awww come on, I tweaked them a bit haha.

Maybe I can figure something else out.

[Steve]

No, no. Don't do it just for me. If I learn how to do it myself then I can change out those icons with whatever I want. 

[TwitchisMental]

No, no. Don't do it just for me. If I learn how to do it myself then I can change out those icons with whatever I want. 

By default it can be a bit of a pain, since it uses one big image.

However placing a few guides makes it pretty easy to figure out what you are working with.

Then just know the top left is new posts, the top right is sub forum new posts, bottom left is no new posts, and then the bottom right is the redirect.

Quick Example/s -

You cannot view this attachment.

With a few extra guides -

You cannot view this attachment.

[Antechinus]

You can change the CSS easily, to make it accept individual images if you don't like the sprite (although spriting custom icons is not difficult). You could also use CSS filters to change the colours of the default icons on a per-variant basis.

[Steve]

Thanks @TwitchisMental!

And @Antechinus - thank you as well. That sounds easy enough.

[Steve]

Sorry for the double post.

When clicking the 'More' link at the end of the smiley row in reply or quick reply, the popup comes up with a glaring white background. I changed it to #353535 to match the reply box. Don't know if you want to incorporate that or not but thought I'd let you know.

[Steve]

Hey Twitch (never did a triple post before I don't think) ...

I want to change a setting but it's in normalize.css ... where is that (I just want to make the subject line of new posts a teensy bit bigger)?

[TwitchisMental]

Sorry for the double post.
When clicking the 'More' link at the end of the smiley row in reply or quick reply, the popup comes up with a glaring white background. I changed it to #353535 to match the reply box. Don't know if you want to incorporate that or not but thought I'd let you know.

Alright I am preventing this one from being missed again.. *Downloads a smiley pack for dev site*

I will get this fixed soon.

Hey Twitch (never did a triple post before I don't think) ...
I want to change a setting but it's in normalize.css ... where is that (I just want to make the subject line of new posts a teensy bit bigger)?

Shouldn't need to mess with normalize.css. That is being called from an external source.

If you are trying to change the subject line in the post section open index.css. Find line 3984

Code Select Expand

.display_title {
  font-weight: normal;
  font-size: 26px;
  line-height: 1.05em;
  overflow-wrap: break-word;
}
Change the font-size to whatever you prefer.

[Steve]

It's not the font-size but the line-height I want to change. Thanks!

[Steve]

Hmmm ... that doesn't do what I want (I tried both font-size and line-height, hard refreshing each time).

I'm trying to increase the height of the box shown below:

You cannot view this attachment.

[TwitchisMental]

Hmmm ... that doesn't do what I want (I tried both font-size and line-height, hard refreshing each time).

I'm trying to increase the height of the box shown below:

You cannot view this attachment.

Ahh I see..

Try this in the index.css. (Just add to the bottom)

Code Select Expand

input#subject {
  height: 28px;
}

[Steve]

Perfect! Well, I changed the height to 26 but still, it works perfectly. Thanks again Twitch.

[Steve]

Sorry to keep bothering you but is it intentional that the horizontal rule doesn't show in any post?

[TwitchisMental]

Sorry to keep bothering you but is it intentional that the horizontal rule doesn't show in any post?

It is alright. Sorry for the late reply.. been a rough day today.

What do you mean by "horizontal rule" ?

[TwitchisMental]

No, no. Don't do it just for me. If I learn how to do it myself then I can change out those icons with whatever I want. 

Well, I figured I had Font-Awesome in this theme already.. So I have another solution either way... I may actually include this by default... so not just for you .

Open Index.CSS

Find line 3150

Code Select Expand

.board_icon a {
    background: url(../images/boardicons.png) no-repeat 0 0 / 90px;
    display: inline-block;
    width: 45px;
    height: 45px;
}
.board_icon a.board_on2 {
    background-position: -45px 0;
}
.board_icon a.board_off {
    background-position: 0 -45px;
}
.board_icon a.board_redirect {
    background-position: -45px -45px;
}
.board_icon {
    text-align: center;
    padding: 8px 4px 0 4px;
    width: 60px;
    flex-shrink: 0;
}
Replace with :

Code Select Expand

.board_icon {
    text-align: center;
    padding: 8px 0px 0px 0px;
}
.board_icon a {
    display: inline;
}
.board_icon a::before {
    display: inline;
    font-family: "Font Awesome 6 Free";
    font-size: 2em;
    content: "\f086";
}
.board_icon a.board_on::before {
    font-weight: 900;
}
.board_icon a.board_on2::before {
    font-weight: 900;
}
.board_icon a.board_off::before {
    font-weight: 400;
}
.board_icon a.board_redirect::before {
    font-weight: 900;
    content: "\f061";
}

The result -

You cannot view this attachment.

[Steve]

Thank you for the new icons. Much better! 

Sorry to keep bothering you but is it intentional that the horizontal rule doesn't show in any post?

It is alright. Sorry for the late reply.. been a rough day today.

What do you mean by "horizontal rule" ?

When you click on this button above the textarea box you see a horizontal line like this:
I can't see the line in this theme.

You cannot view this attachment.


Edit: just an FYI for anyone using this theme ... if you have GL700Wing's Thank mod installed, you'll need to add this at the bottom of index.css:

Code Select Expand

.smfthankbutton {
  margin-top: 5px;
}You can use either 4 or 5px, I just like the 5 better.

[TwitchisMental]

Thank you for the new icons. Much better! 

Sorry to keep bothering you but is it intentional that the horizontal rule doesn't show in any post?

It is alright. Sorry for the late reply.. been a rough day today.

What do you mean by "horizontal rule" ?

When you click on this button above the textarea box you see a horizontal line like this:
I can't see the line in this theme.

You cannot view this attachment.


Edit: just an FYI for anyone using this theme ... if you have GL700Wing's Thank mod installed, you'll need to add this at the bottom of index.css:

Code Select Expand

.smfthankbutton {
  margin-top: 5px;
}You can use either 4 or 5px, I just like the 5 better.

Thank you for the information. I actually just tried it on my end and it seems to be working.

Either way I will have a new version released today with some bug fixes and such.

Screeny -
You cannot view this attachment.

[TwitchisMental]

New Version 1.1

Code Select Expand

Board Icons Update : Replaced the Board Icons with some Font-Awesome icons.
Adjustment : Adjusted the background color of the popup window for emotes.
Looks alot better now. Thank you Steve for the reported issue .