Hextech

Started by TwitchisMental, September 07, 2022, 05:26:07 PM

Previous topic - Next topic

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 :
1.0 : Initial Release
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.

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

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.

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.

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.

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

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).  :)
DO NOT pm me for support!

TwitchisMental

Quote from: Steve on September 08, 2022, 07:43:19 AMI 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.  :)
DO NOT pm me for support!

TwitchisMental

Quote from: Steve on September 08, 2022, 12:38:14 PMNo, 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

#6
Thanks @TwitchisMental!

And @Antechinus - thank you as well. That sounds easy enough.
DO NOT pm me for support!

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.
DO NOT pm me for support!

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)?
DO NOT pm me for support!

TwitchisMental

Quote from: Steve on September 09, 2022, 07:02:05 AMSorry 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.

Quote from: Steve on September 09, 2022, 11:01:36 AMHey 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

.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!
DO NOT pm me for support!

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.
DO NOT pm me for support!

TwitchisMental

Quote from: Steve on September 09, 2022, 01:25:13 PMHmmm ... 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)

input#subject {
  height: 28px;
}


Steve

Perfect! Well, I changed the height to 26 but still, it works perfectly. Thanks again Twitch.
DO NOT pm me for support!

Steve

Sorry to keep bothering you but is it intentional that the horizontal rule doesn't show in any post?
DO NOT pm me for support!

TwitchisMental

Quote from: Steve on September 09, 2022, 03:50:12 PMSorry 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

#16
Quote from: Steve on September 08, 2022, 12:38:14 PMNo, 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 :P.

Open Index.CSS

Find line 3150

.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 :

.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

#17
Thank you for the new icons. Much better!  ;D

Quote from: TwitchisMental on September 09, 2022, 11:49:29 PM
Quote from: Steve on September 09, 2022, 03:50:12 PMSorry 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:

.smfthankbutton {
  margin-top: 5px;
}
You can use either 4 or 5px, I just like the 5 better.
DO NOT pm me for support!

TwitchisMental

Quote from: Steve on September 10, 2022, 06:24:14 AMThank you for the new icons. Much better!  ;D

Quote from: TwitchisMental on September 09, 2022, 11:49:29 PM
Quote from: Steve on September 09, 2022, 03:50:12 PMSorry 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:

.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

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 :).

Advertisement: