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
Info Center Remixed
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.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

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).  :)
Please 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.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

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.  :)
Please 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.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

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.
Please 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.
Please 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)?
Please 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.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Steve

It's not the font-size but the line-height I want to change. Thanks!
Please 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.
Please 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;
}

My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Steve

Perfect! Well, I changed the height to 26 but still, it works perfectly. Thanks again Twitch.
Please 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?
Please 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" ?
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

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.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

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.
Please 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.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

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 :).
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Advertisement: