Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Theme Site Themes => Topic started by: TwitchisMental on September 07, 2022, 05:26:07 PM

Title: Hextech
Post by: TwitchisMental on September 07, 2022, 05:26:07 PM
Link to the theme (https://custom.simplemachines.org/index.php?theme=3012)
(https://custom.simplemachines.org/index.php?action=download;theme=3012;attach=283439;image;thumb)

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 :
(https://img.shields.io/badge/license-MIT-blue)
Font Awesome License - https://fontawesome.com/license/free

SMF Version :
(https://img.shields.io/badge/SMF-2.1-blue)


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.
Title: Re: Hextech
Post by: Steve on September 08, 2022, 07:43:19 AM
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).  :)
Title: Re: Hextech
Post by: TwitchisMental on September 08, 2022, 10:43:36 AM
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.
Title: Re: Hextech
Post by: Steve on September 08, 2022, 12:38:14 PM
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.  :)
Title: Re: Hextech
Post by: TwitchisMental on September 08, 2022, 08:03:11 PM
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 -

boardiconsexample.png

With a few extra guides -

boardiconsexample2.png
Title: Re: Hextech
Post by: Antechinus on September 09, 2022, 04:06:16 AM
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. :)
Title: Re: Hextech
Post by: Steve on September 09, 2022, 06:10:15 AM
Thanks @TwitchisMental!

And @Antechinus - thank you as well. That sounds easy enough.
Title: Re: Hextech
Post by: Steve on September 09, 2022, 07:02:05 AM
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.
Title: Re: Hextech
Post by: Steve on September 09, 2022, 11:01:36 AM
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)?
Title: Re: Hextech
Post by: TwitchisMental on September 09, 2022, 11:40:56 AM
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.
Title: Re: Hextech
Post by: Steve on September 09, 2022, 01:13:33 PM
It's not the font-size but the line-height I want to change. Thanks!
Title: Re: Hextech
Post by: Steve on September 09, 2022, 01:25:13 PM
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:

subjectline.jpg
Title: Re: Hextech
Post by: TwitchisMental on September 09, 2022, 01:37:05 PM
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:

subjectline.jpg
Ahh I see..

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

input#subject {
  height: 28px;
}

Title: Re: Hextech
Post by: Steve on September 09, 2022, 01:58:56 PM
Perfect! Well, I changed the height to 26 but still, it works perfectly. Thanks again Twitch.
Title: Re: Hextech
Post by: Steve on September 09, 2022, 03:50:12 PM
Sorry to keep bothering you but is it intentional that the horizontal rule doesn't show in any post?
Title: Re: Hextech
Post by: 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" ?
Title: Re: Hextech
Post by: TwitchisMental on September 10, 2022, 01:09:05 AM
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 -

new icons.png
Title: Re: Hextech
Post by: Steve on September 10, 2022, 06:24:14 AM
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.

hr.jpg


Edit: just an FYI for anyone using this theme ... if you have GL700Wing's Thank mod (https://custom.simplemachines.org/index.php?mod=4333) 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.
Title: Re: Hextech
Post by: TwitchisMental on September 10, 2022, 12:21:14 PM
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.

hr.jpg


Edit: just an FYI for anyone using this theme ... if you have GL700Wing's Thank mod (https://custom.simplemachines.org/index.php?mod=4333) 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 -
This-is-a-test-with-evil-intentions-.png
Title: Re: Hextech
Post by: TwitchisMental on September 10, 2022, 01:32:29 PM
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 :).
Title: Re: Hextech
Post by: Steve on September 10, 2022, 01:40:28 PM
Cool beans. I have a couple of other minor issues but I'll give you a break for awhile lol.
Title: Re: Hextech
Post by: TwitchisMental on September 10, 2022, 01:43:51 PM
Quote from: Steve on September 10, 2022, 01:40:28 PMCool beans. I have a couple of other minor issues but I'll give you a break for awhile lol.
No problem.

If you are having other issues, please feel free to report them.
Title: Re: Hextech
Post by: Steve on September 10, 2022, 01:55:44 PM
Okay, you asked for it ...  :laugh:

First, a question  ... no search box on the main index page? That's not a problem, just takes a little getting used to.  :)

Secondly, in the topic list, the message icons are pushed up against the left border. How can one get rid of this:

topiclist.jpg

And then center the message icons?
Title: Re: Hextech
Post by: TwitchisMental on September 10, 2022, 02:07:46 PM
Quote from: Steve on September 10, 2022, 01:55:44 PMOkay, you asked for it ...  :laugh:

First, a question  ... no search box on the main index page? That's not a problem, just takes a little getting used to.  :)

Secondly, in the topic list, the message icons are pushed up against the left border. How can one get rid of this:

topiclist.jpg

And then center the message icons?
Answer to your question : Yeah honestly I do not find that as needed. Especially when you have a search button in the main menu. 

2nd: Ahhhhh okay. I see where mistakes were made.

Open index.css

Find Line 3150 -

.board_icon {
    text-align: center;
    padding: 8px 4px 0px 4px;
}

Replace with -

.board_icon {
    text-align: center;
    padding: 8px 4px 0px 4px;
    width: 60px;
}
Title: Re: Hextech
Post by: Steve on September 10, 2022, 02:44:42 PM
Okay, that fixes the message icon problem. But what about the icon shown by the arrow in my last image? Can that be gotten rid of since it doesn't seem to do anything?
Title: Re: Hextech
Post by: TwitchisMental on September 10, 2022, 02:55:40 PM
Quote from: Steve on September 10, 2022, 02:44:42 PMOkay, that fixes the message icon problem. But what about the icon shown by the arrow in my last image? Can that be gotten rid of since it doesn't seem to do anything?
Do you mean the little user icon? The one that is shown when you have posted in the topic? (The one the red arrow is pointing at).

If so, a simple template edit would be needed.
Title: Re: Hextech
Post by: Steve on September 10, 2022, 03:09:15 PM
That's the one I mean all right.
Title: Re: Hextech
Post by: TwitchisMental on September 10, 2022, 03:15:06 PM
Quote from: Steve on September 10, 2022, 03:09:15 PMThat's the one I mean all right.
You will need to make a copy of the messageindex.index.php from the default and put it in the hextech folder.

Go to line 182

Delete
', $topic['is_posted_in'] ? '<span class="main_icons profile_sm"></span>' : '', '
Title: Re: Hextech
Post by: Steve on September 10, 2022, 03:38:29 PM
I had to do a search for it in MessageIndex.template.php because it wasn't on that line. I found it though and it works perfectly! (I may have made changes to my template so that's probably why the difference.)

Thanks for everything Twitch.  ;D
Title: Re: Hextech
Post by: TwitchisMental on September 10, 2022, 03:45:38 PM
Quote from: Steve on September 10, 2022, 03:38:29 PMI had to do a search for it in MessageIndex.template.php because it wasn't on that line. I found it though and it works perfectly! (I may have made changes to my template so that's probably why the difference.)

Thanks for everything Twitch.  ;D

Awesome, glad you got it how you want it :).

Thank you for your help aswell :).
Title: Re: Hextech
Post by: Steve on September 10, 2022, 03:52:47 PM
Any time my friend.  :)
Title: Re: Hextech
Post by: seekier on October 11, 2022, 08:17:27 AM
The theme is awesome, beautiful design and the colour is great but there is still work to be done to be fully responsive on mobile

Issues: it fails to fully display pagenation notification when you click any of the top left images above, e.g profile, Inbox and notification.

See the attachment bellow

20221011_135823.jpg


20221011_135833.jpg


20221011_135838.jpg 

I will gladly give 5⭐⭐⭐⭐+ if this issue is resolve.
Title: Re: Hextech
Post by: TwitchisMental on October 11, 2022, 01:47:03 PM
Quote from: seekier on October 11, 2022, 08:17:27 AMThe theme is awesome, beautiful design and the colour is great but there is still work to be done to be fully responsive on mobile

Issues: it fails to fully display pagenation notification when you click any of the top left images above, e.g profile, Inbox and notification.

See the attachment bellow

20221011_135823.jpg


20221011_135833.jpg


20221011_135838.jpg 

I will gladly give 5⭐⭐⭐⭐+ if this issue is resolve.

Thank you for reporting this issue.

Try this out for me -

Open responsive.css and go to the bottom and add this -

@media (max-width: 330px) {
#pm_menu, #alerts_menu, #profile_menu {
left: 0;
right: 0;
padding-right: 0px;
}
}

This should resolve the issue that you are reporting.
Title: Re: Hextech
Post by: seekier on October 11, 2022, 02:59:58 PM
Quote from: TwitchisMental on October 11, 2022, 01:47:03 PMThank you for reporting this issue.

Try this out for me -

Open responsive.css and go to the bottom and add this -

@media (max-width: 330px) {
#pm_menu, #alerts_menu, #profile_menu {
left: 0;
right: 0;
padding-right: 0px;
}
}

This should resolve the issue that you are reporting.

It is fixed.
Title: Re: Hextech
Post by: TwitchisMental on October 11, 2022, 03:22:49 PM
Quote from: seekier on October 11, 2022, 02:59:58 PM
Quote from: TwitchisMental on October 11, 2022, 01:47:03 PMThank you for reporting this issue.

Try this out for me -

Open responsive.css and go to the bottom and add this -

@media (max-width: 330px) {
#pm_menu, #alerts_menu, #profile_menu {
left: 0;
right: 0;
padding-right: 0px;
}
}

This should resolve the issue that you are reporting.

It is fixed.
Thank you for the confirmation. I will be uploading a fixed version for everyone soon.
Title: Re: Hextech
Post by: TwitchisMental on October 11, 2022, 08:04:30 PM
New Version has been uploaded.

Fixed the reported bug above.

Adjusted the recent posts section to show less info on smaller screens.
Title: Re: Hextech
Post by: seekier on October 17, 2022, 09:03:57 PM
So I have another issue to report on a large mobile screen, I have theme toggle mods install on my website so that members can toggle by themselves but the toggle is join together with "unread post" which is not supposed to be.
check the attachment below.
20221018_015138.jpg

See Smf default theme and see what I am trying to say
20221018_015109.jpg 
Title: Re: Hextech
Post by: TwitchisMental on October 17, 2022, 09:40:16 PM
Quote from: seekier on October 17, 2022, 09:03:57 PMSo I have another issue to report on a large mobile screen, I have theme toggle mods install on my website so that members can toggle by themselves but the toggle is join together with "unread post" which is not supposed to be.
check the attachment below.
20221018_015138.jpg

See Smf default theme and see what I am trying to say
20221018_015109.jpg 

This would be due to how the menu is styled. Basically the menu has filled up so the link drops down to the next line.

It is just reaching the limits due to width and such. If you enable calendar, even the default theme has this issue.

Example :

Twitch-s-World-Index(1).png

An easy way to resolve this would just be changing the resolution that would switch the main menu to mobile menu.

Open responsive.css in your favorite text editor.

Find Line 466
@media (min-width: 561px) {
Replace with

@media (min-width: 601px) {
Find Line 481
@media (max-width: 560px) {
Replace with
@media (max-width: 600px) {
Title: Re: Hextech
Post by: seekier on October 17, 2022, 10:08:21 PM
Quote from: TwitchisMental on October 17, 2022, 09:40:16 PM
Quote from: seekier on October 17, 2022, 09:03:57 PMSo I have another issue to report on a large mobile screen, I have theme toggle mods install on my website so that members can toggle by themselves but the toggle is join together with "unread post" which is not supposed to be.
check the attachment below.
20221018_015138.jpg

See Smf default theme and see what I am trying to say
20221018_015109.jpg 

This would be due to how the menu is styled. Basically the menu has filled up so the link drops down to the next line.

It is just reaching the limits due to width and such. If you enable calendar, even the default theme has this issue.

Example :

Twitch-s-World-Index(1).png

An easy way to resolve this would just be changing the resolution that would switch the main menu to mobile menu.

Open responsive.css in your favorite text editor.

Find Line 466
@media (min-width: 561px) {
Replace with

@media (min-width: 601px) {
Find Line 481
@media (max-width: 560px) {
Replace with
@media (max-width: 600px) {
it's like you don't get my point, I am not talking about menu been filled up here. What I am saying is that unread posts is merged together with theme toggle. Pls check carefully the dark theme attachment I shared above,  there is no space between unread posts and theme toggle, hence both are on top of each other and only one is functioning properly. everyone Should stand alone just as updated Topic stands alone
Title: Re: Hextech
Post by: TwitchisMental on October 17, 2022, 10:30:27 PM
Quote from: seekier on October 17, 2022, 10:08:21 PM
Quote from: TwitchisMental on October 17, 2022, 09:40:16 PM
Quote from: seekier on October 17, 2022, 09:03:57 PMSo I have another issue to report on a large mobile screen, I have theme toggle mods install on my website so that members can toggle by themselves but the toggle is join together with "unread post" which is not supposed to be.
check the attachment below.
20221018_015138.jpg

See Smf default theme and see what I am trying to say
20221018_015109.jpg 

This would be due to how the menu is styled. Basically the menu has filled up so the link drops down to the next line.

It is just reaching the limits due to width and such. If you enable calendar, even the default theme has this issue.

Example :

Twitch-s-World-Index(1).png

An easy way to resolve this would just be changing the resolution that would switch the main menu to mobile menu.

Open responsive.css in your favorite text editor.

Find Line 466
@media (min-width: 561px) {
Replace with

@media (min-width: 601px) {
Find Line 481
@media (max-width: 560px) {
Replace with
@media (max-width: 600px) {
it's like you don't get my point, I am not talking about menu been filled up here. What I am saying is that unread posts is merged together with theme toggle. Pls check carefully the dark theme attachment I shared above,  there is no space between unread posts and theme toggle, hence both are on top of each other and only one is functioning properly. everyone Should stand alone just as updated Topic stands alone
I understand your point just fine. The issue is due to the main menu and how it works. Due to the limitation of space, that is why the theme toggle link is stacked on top of the unread post/updated topics.

I was explaining exactly why that was the case and how to resolve it.

I do not appreciate the attitude.
Title: Re: Hextech
Post by: seekier on October 17, 2022, 10:49:34 PM
Quote from: TwitchisMental on October 17, 2022, 10:30:27 PMI do not appreciate the attitude.

Apologies, I misunderstood you and I should have given it a try before complaining.
Title: Re: Hextech
Post by: Diego Andrés on October 17, 2022, 10:51:47 PM
Sorry to disrupt, the best solution is to change the height, to min-height.

#main_menu {
height: 50px;

#main_menu {
min-height: 50px;
Title: Re: Hextech
Post by: TwitchisMental on October 17, 2022, 10:57:09 PM
Quote from: Diego Andrés on October 17, 2022, 10:51:47 PMSorry to disrupt, the best solution is to change the height, to min-height.

#main_menu {
    height: 50px;

#main_menu {
    min-height: 50px;
Humm, that is another way to resolve it. This keeps it within the div and doesn't cause the text overlapping. Thank you for this solution Diego. 

I still don't like the double line... rather go with mobile menu option.  XD.

Quote from: seekier on October 17, 2022, 10:49:34 PM
Quote from: TwitchisMental on October 17, 2022, 10:30:27 PMI do not appreciate the attitude.

Apologies, I misunderstood you and I should have given it a try before complaining.
Thank you for the apology.  Diego has provided another solution which may suit your needs better.
Title: Re: Hextech
Post by: TwitchisMental on October 28, 2022, 05:50:39 PM
New Version Uploaded -

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
Title: Re: Hextech
Post by: Steve on October 28, 2022, 07:01:26 PM
Thanks Twitch.  :)
Title: Re: Hextech
Post by: TwitchisMental on October 28, 2022, 07:07:16 PM
Quote from: Steve on October 28, 2022, 07:01:26 PMThanks Twitch.  :)
No problem :) .
Title: Re: Hextech
Post by: stefanop039 on November 17, 2022, 03:36:09 PM
Hi, it is possible to put it in full screen, I hope I have explained myself, I am a beginner I do not know how to say, in all fields.
Thanks for your attention and congratulations
Title: Re: Hextech
Post by: TwitchisMental on November 17, 2022, 07:13:21 PM
Quote from: stefanop039 on November 17, 2022, 03:36:09 PMHi, it is possible to put it in full screen, I hope I have explained myself, I am a beginner I do not know how to say, in all fields.
Thanks for your attention and congratulations
Open index.css and find -

/* Set maximum width limit for content */
#top_section .inner_wrap, #wrapper, #header {
max-width: var(--set_width); /* Go to the top of this index.css and change the width on the --set_width variable to whatever you would like in px. Ex 1200px, 1600px, etc) */
margin: 0 auto;
width: 90%;
}

Replace with -

/* Set maximum width limit for content */
#top_section .inner_wrap, #wrapper, #header {
max-width: 100%
margin: 0 auto;
width: 100%;
}

Title: Re: Hextech
Post by: stefanop039 on November 18, 2022, 05:01:34 AM
Thanks so much it works great and thanks for the quick response
Title: Re: Hextech
Post by: TwitchisMental on November 18, 2022, 10:45:10 AM
Quote from: stefanop039 on November 18, 2022, 05:01:34 AMThanks so much it works great and thanks for the quick response
You're welcome.
Title: Re: Hextech
Post by: TwitchisMental on December 04, 2022, 12:56:37 PM
New Version Uploaded

1.1.2 :
Update : Updated for SMF 2.1.3
Adjustment: Adjusted the breadcrumb so that all arrows are even.
Title: Re: Hextech
Post by: Steve on December 06, 2022, 11:12:55 AM
There's still the horizontal rule problem as reported in this post: https://www.simplemachines.org/community/index.php?msg=4134546

It is invisible to me when clicking the HR button.
Title: Re: Hextech
Post by: TwitchisMental on December 06, 2022, 12:33:22 PM
Quote from: Steve on December 06, 2022, 11:12:55 AMThere's still the horizontal rule problem as reported in this post: https://www.simplemachines.org/community/index.php?msg=4134546

It is invisible to me when clicking the HR button.
Ahh I found the issue.

Go into index.css and find
hr {
    border: none;
    margin: 12px 0;
    height: 2px;
    background: var(--cb-color-light);
    box-shadow: 0 1px 0 var(--cb-color-dark)inset;
}

change to

hr {
    border: none;
    margin: 12px 0;
    height: 2px!important;
    background: var(--cb-color-light);
    box-shadow: 0 1px 0 var(--cb-color-dark)inset;
}


The normalize.css is overriding it. That or I could change the order in which the css loads >.>.
Title: Re: Hextech
Post by: TwitchisMental on December 06, 2022, 01:06:22 PM
New Version has been uploaded fixing the issue.
Title: Re: Hextech
Post by: Steve on December 06, 2022, 01:17:29 PM
Thanks Twitch!  ;D
Title: Re: Hextech
Post by: TwitchisMental on December 06, 2022, 01:21:34 PM
Quote from: Steve on December 06, 2022, 01:17:29 PMThanks Twitch!  ;D
No problem, another issue I fixed in this update that you may wanna do manually -

Find
input, button, select {
padding: 0 0.4em;
line-height: 2em;
}

Replace With
input, button, select {
padding: 0 0.4em;
line-height: 2em!important;
}

Title: Re: Hextech
Post by: Steve on December 06, 2022, 03:35:34 PM
I went ahead and just updated to your latest version and am making the changes we've talked about along the way (adding the search box, etc.). To be honest though, I still don't see the horizontal rule but that's a really minor issue.  :)
Title: Re: Hextech
Post by: TwitchisMental on December 06, 2022, 03:39:31 PM
Quote from: Steve on December 06, 2022, 03:35:34 PMI went ahead and just updated to your latest version and am making the changes we've talked about along the way (adding the search box, etc.). To be honest though, I still don't see the horizontal rule but that's a really minor issue.  :)
It seems to be working for me.

May want to clear cache.

Image-Of-The-Day-Page-476.png

Title: Re: Hextech
Post by: Steve on December 06, 2022, 06:25:48 PM
Quote from: TwitchisMental on December 06, 2022, 03:39:31 PMMay want to clear cache.
I'll be dipped. That was the problem. Thanks again Twitch.  :)
Title: Re: Hextech
Post by: TwitchisMental on December 07, 2022, 09:40:40 PM
Quote from: Steve on December 06, 2022, 06:25:48 PM
Quote from: TwitchisMental on December 06, 2022, 03:39:31 PMMay want to clear cache.
I'll be dipped. That was the problem. Thanks again Twitch.  :)
K.I.S.S strikes again haha :).

Always happy to help.
Title: Re: Hextech
Post by: Steve on December 08, 2022, 07:37:00 AM
 :laugh:
Title: Re: Hextech
Post by: TwitchisMental on December 13, 2022, 01:16:34 PM
New Version Uploaded

Only one line changed for a small issue on chrome.

Find
.navigate_section ul li:before {
    border-top: 1em solid transparent;
    border-bottom: 1em solid transparent;
    border-left: 1em solid var(--breadcrumb_bg2);
    content: "";
    position: absolute;
    top: 0;
    right: -1.25em;
    z-index: 1;
}

Replace With

.navigate_section ul li:before {
    border-top: 1em solid transparent;
    border-bottom: 1em solid transparent;
    border-left: 1em solid var(--breadcrumb_bg2);
    content: "";
    position: absolute;
    top: 0;
    right: -1.15em;
    z-index: 1;
}
Title: Re: Hextech
Post by: Steve on December 13, 2022, 02:15:35 PM
Thanks Twitch. Amazing what one digit or character will do.  ;D
Title: Re: Hextech
Post by: Tonyvic on December 26, 2022, 09:53:47 AM
Hi Twitch, thank you so much for this theme it's excellent.
I want to make a header which will be a couple of animated gif's on a transparent background, can you tell what the maximum length can be for the background?

Cheers,
Tony
Title: Re: Hextech
Post by: TwitchisMental on December 27, 2022, 12:53:14 PM
Quote from: Tonyvic on December 26, 2022, 09:53:47 AMHi Twitch, thank you so much for this theme it's excellent.
I want to make a header which will be a couple of animated gif's on a transparent background, can you tell what the maximum length can be for the background?

Cheers,
Tony
If you mean the width of the header, by default it is 1200px.
Title: Re: Hextech
Post by: Tonyvic on December 27, 2022, 12:55:25 PM
Thank you very much! :)
Title: Re: Hextech
Post by: TwitchisMental on December 27, 2022, 02:02:08 PM
Quote from: Tonyvic on December 27, 2022, 12:55:25 PMThank you very much! :)
No problem
Title: Re: Hextech
Post by: seekier on December 29, 2022, 02:48:12 AM
Good job sir.
But I noticed there is no login or sign up button or link for guests on mobile smaller screen.

Check out the attachment below,:IMG_20221229_084134.jpg

IMG_20221229_083958.jpg 

This is SMF default theme on mobile smaller screen
IMG_20221229_085455.jpg 
Title: Re: Hextech
Post by: TwitchisMental on December 29, 2022, 03:20:16 PM
Quote from: seekier on December 29, 2022, 02:48:12 AMGood job sir.
But I noticed there is no login or sign up button or link for guests on mobile smaller screen.

Check out the attachment below,:[url="https://www.simplemachines.org/community/index.php?action=dlattach;attach=285031;type=preview;file"]IMG_20221229_084134.jpg[/url]

[url="https://www.simplemachines.org/community/index.php?action=dlattach;attach=285033;type=preview;file"]IMG_20221229_083958.jpg[/url] 

This is SMF default theme on mobile smaller screen
[url="https://www.simplemachines.org/community/index.php?action=dlattach;attach=285037;type=preview;file"]IMG_20221229_085455.jpg[/url] 
Hummm looks like we got a bug. I will look into this, thank you.
Title: Re: Hextech
Post by: Tonyvic on December 30, 2022, 09:23:24 AM
Quote from: TwitchisMental on December 27, 2022, 12:53:14 PM
Quote from: Tonyvic on December 26, 2022, 09:53:47 AMHi Twitch, thank you so much for this theme it's excellent.
I want to make a header which will be a couple of animated gif's on a transparent background, can you tell what the maximum length can be for the background?
Cheers,
Tony
If you mean the width of the header, by default it is 1200px.

I made a temporary plain white banner 1200px x 91px but with the colour switcher enabled the last colour has dropped down. Is there a simple fix please Twitch?
Screenshot_20221230_120247.png 
Title: Re: Hextech
Post by: TwitchisMental on December 30, 2022, 10:51:14 AM
Quote from: Tonyvic on December 30, 2022, 09:23:24 AM
Quote from: TwitchisMental on December 27, 2022, 12:53:14 PM
Quote from: Tonyvic on December 26, 2022, 09:53:47 AMHi Twitch, thank you so much for this theme it's excellent.
I want to make a header which will be a couple of animated gif's on a transparent background, can you tell what the maximum length can be for the background?
Cheers,
Tony
If you mean the width of the header, by default it is 1200px.

I made a temporary plain white banner 1200px x 91px but with the colour switcher enabled the last colour has dropped down. Is there a simple fix please Twitch?
[url="https://www.simplemachines.org/community/index.php?action=dlattach;attach=285045;type=preview;file"]Screenshot_20221230_120247.png[/url] 

The banner is too wide. You would just need to shrink its width a bit. The logo/banner and color switcher are within the same header div so they share the total width of the header.

There is an option to just disable the color switcher completely in the theme settings.
Title: Re: Hextech
Post by: Tonyvic on December 30, 2022, 05:39:57 PM
Thanks again Twitch. :)
Title: Re: Hextech
Post by: seekier on December 31, 2022, 01:24:51 PM
Quote from: TwitchisMental on December 29, 2022, 03:20:16 PMHummm looks like we got a bug. I will look into this, thank you.

So where you able to fix the bugs? Anxiously waiting for update. Thanks for the good work once more.
Title: Re: Hextech
Post by: TwitchisMental on December 31, 2022, 03:13:08 PM
New Version Uploaded -

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.

Sorry for the delay, life has been pretty hectic.
Title: Re: Hextech
Post by: Steve on December 31, 2022, 09:07:49 PM
Not to mention it's the holidays @seekier ...  ;)
Title: Re: Hextech
Post by: Tonyvic on January 09, 2023, 01:52:34 PM
Twitch, where is the setting to allow users to always keep their selected color when logged-in?
I assumed by not checking ' Disable user variant selection' it would be possible, but can't find anything.
Title: Re: Hextech
Post by: Diego Andrés on January 09, 2023, 02:49:50 PM
It should be using SMF's variant system to do so but it would use the variant the user set up when logged in and might not be the same if they logged out.

Could you describe the behavior you are looking for, or if you believe there is an issue with it?
Title: Re: Hextech
Post by: TwitchisMental on January 09, 2023, 03:17:07 PM
Quote from: Tonyvic on January 09, 2023, 01:52:34 PMTwitch, where is the setting to allow users to always keep their selected color when logged-in?
I assumed by not checking ' Disable user variant selection' it would be possible, but can't find anything.
The user would need to go to profile > look and layout > click the change button > then select variant for the theme.

As Diego stated above, this will not stay the same when logged out though.
Title: Re: Hextech
Post by: Tonyvic on January 09, 2023, 04:09:25 PM
Many thanks guys, I hadn't given members the permission to Allow select their own themes. :-[  :-[
Title: Re: Hextech
Post by: TwitchisMental on January 10, 2023, 03:33:32 PM
Quote from: Tonyvic on January 09, 2023, 04:09:25 PMMany thanks guys, I hadn't given members the permission to Allow select their own themes. :-[  :-[
You're welcome, always glad to help.
Title: Re: Hextech
Post by: seekier on February 01, 2023, 11:30:14 AM
Hi @TwitchisMental I noticed something odd in displaying "News" if you give paragraph when typing the news on mobile smaller screen.

Check attachment below. I compared both Smf default theme and Hextech theme

Picsart_23-02-01_17-12-45-385.jpg
Title: Re: Hextech
Post by: TwitchisMental on February 01, 2023, 11:59:42 AM
I can't seem to replicate this issue. Would you mind giving me a link to your forum with a test account?
Title: Re: Hextech
Post by: seekier on February 01, 2023, 12:22:33 PM
Quote from: TwitchisMental on February 01, 2023, 11:59:42 AMI can't seem to replicate this issue. Would you mind giving me a link to your forum with a test account?
with pleasure. I inbox you the details
Title: Re: Hextech
Post by: TwitchisMental on February 01, 2023, 05:01:32 PM
Ahhh I see what is going on.

On the default theme it actually hides the basic news class section on smaller screens.. You however also have the news slider enabled which is why it looks fine on the default.

Where as on Hextech, it is still showing the basic news class section.

If you enable the news slide on Hextech you will get a result similar to your default theme picture.



With that said, I do notice the line break seems to work in Chrome, but not Firefox.. So I will still need to look into that.
Title: Re: Hextech
Post by: seekier on February 01, 2023, 05:30:34 PM
I same settings enabled but news now appears twice in Hextech
Title: Re: Hextech
Post by: TwitchisMental on February 01, 2023, 05:35:40 PM
Quote from: seekier on February 01, 2023, 05:30:34 PMI same settings enabled but news now appears twice in Hextech
Correct, because as I stated earlier, in the default the news class is hidden, but the news slider is still shown.

If you would like you can open responsive.css

Find Line 416

    /* Hide me */
    #inner_wrap time, #inner_wrap .news,
    #search_form, #smflogo, #message_index_jump_to, .nextlinks, #display_jump_to,
    #siteslogan, th.id_group, th.registered, th.posts, th.reg_group, th.reg_date, td.reg_group, td.reg_date,
    td.id_group, td.registered, td.posts:not(.unique), td.statsbar.posts,
    #approve_list .ip, #approve_list .date_registered, #group_members .date_registered,
    #main_content_section .navigate_section, .time,
    #header_custom_profile_fields_field_type, #header_custom_profile_fields_active,
    #header_custom_profile_fields_placement, #custom_profile_fields .active, #custom_profile_fields .field_type, #custom_profile_fields .placement {
        display: none !important;
    }

Replace With -

        /* Hide me */
    #inner_wrap time, #inner_wrap .news, .news_section .news h2, .news_section .news p,
    #search_form, #smflogo, #message_index_jump_to, .nextlinks, #display_jump_to,
    #siteslogan, th.id_group, th.registered, th.posts, th.reg_group, th.reg_date, td.reg_group, td.reg_date,
    td.id_group, td.registered, td.posts:not(.unique), td.statsbar.posts,
    #approve_list .ip, #approve_list .date_registered, #group_members .date_registered,
    #main_content_section .navigate_section, .time,
    #header_custom_profile_fields_field_type, #header_custom_profile_fields_active,
    #header_custom_profile_fields_placement, #custom_profile_fields .active, #custom_profile_fields .field_type, #custom_profile_fields .placement {
        display: none !important;
    }

This will simply hide the news section on smaller screens. While still showing the news slide.
Title: Re: Hextech
Post by: TwitchisMental on February 13, 2023, 01:46:05 PM
New Version Uploaded -

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.

Nothing too crazy, just makes it easier to use fluid width and updated some colors for legibility .
Title: Re: Hextech
Post by: Steve on February 14, 2023, 06:30:23 AM
I don't suppose you could PM me or post the changes you made?

I've made a lot of very minor tweaks and I really don't want to have to start all over.  :-\
Title: Re: Hextech
Post by: TwitchisMental on February 14, 2023, 03:54:58 PM
Quote from: Steve on February 14, 2023, 06:30:23 AMI don't suppose you could PM me or post the changes you made?

I've made a lot of very minor tweaks and I really don't want to have to start all over.  :-\
Should put those tweaks in another stylesheet :P .

Let me see.. I am comparing this to my demo site one, so some of these may be already be done.

Find
/* This is about links */
a, a:visited {
    color: var(--link);
    text-decoration: none;
    text-shadow: 1px 1px 1px var(--black);
    transition: 0.25s all;
}

Replace
a, a:visited {
    color: var(--link);
    text-decoration: none;
    text-shadow: 1px 1px var(--black);
    transition: 0.25s all;
}

--------

Find
/* Set maximum width limit for content */
#top_section .inner_wrap, #wrapper, #header {
    max-width: var(--set_width); /* Go to the top of this index.css and change the width on the --set_width variable to whatever you would like in px. Ex 1200px, 1600px, etc) */
    margin: 0 auto;
    width: 90%;
}

Replace
/* Set maximum width limit for content */
#top_section .inner_wrap, #wrapper, #header {
    margin: 0 auto;
    width: var(--set_width); /* Go to the top of this index.css and change the width on the --set_width
 variable to whatever you would like in px. Ex 1200px, 1600px, etc) */
}

-----------------

Find
.news_section .news {
    font-size: 0.9em;
    display: flex;
    align-items: baseline;
    margin: 0 auto;
    max-width: var(--set_width);
    text-align: left;
}

Replace
.news_section .news {
    font-size: 0.9em;
    display: flex;
    align-items: baseline;
    margin: 0 auto;                    
    text-align: left;
}
-----------

Find

/* Colors for background of posts requiring approval */
.approvebg {
 color: #222;
 background: #ffeaea;
}
.approvebg2 {
 color: #222;
 background: #fff2f2;
}

Replace

/* Colors for background of posts requiring approval */
.approvebg {
    color: var(--white);
    background: rgb(55,34,34,0.9);
}
.approvebg2 {
    color: var(--white);
    background: rgb(255,234,234,0.9);
}

------
Find
.poster img.avatar {
    max-width: 100%;
    border-radius: 50%;
    border: 1px solid var(--link);
    width: 100%;
}

Replace
.poster img.avatar {
    max-width: 60%;
    border-radius: 50%;
    border: 1px solid var(--link);
    width: 60%;
}

--------
Find
.subject_title a {
    font-size: 0.9em;
    color: #333;
    font-weight: bold;
}

Replace
.subject_title a {
    font-size: 0.9em;
    color: var(--link);
    font-weight: bold;
}

Title: Re: Hextech
Post by: Steve on February 14, 2023, 04:04:30 PM
Whoa, I didn't realize it was going to be that much. Looks like I have my work cut out for me.
Title: Re: Hextech
Post by: TwitchisMental on February 14, 2023, 04:10:39 PM
Quote from: Steve on February 14, 2023, 04:04:30 PMWhoa, I didn't realize it was going to be that much. Looks like I have my work cut out for me.
Oh come on it is only 6 changes :P .
Title: Re: Hextech
Post by: Steve on February 14, 2023, 06:16:08 PM
 :laugh:
Title: Re: Hextech
Post by: Steve on February 23, 2023, 04:28:07 PM
In this post of this topic I had asked how to get rid of the small profile icon: https://www.simplemachines.org/community/index.php?msg=4134585

And you provided the solution here: https://www.simplemachines.org/community/index.php?msg=4134593

When you click on 'Recent Unread Topics' that little icon still shows. How do I get rid of it there too?
Title: Re: Hextech
Post by: TwitchisMental on February 23, 2023, 05:13:40 PM
Quote from: Steve on February 23, 2023, 04:28:07 PMIn this post of this topic I had asked how to get rid of the small profile icon: https://www.simplemachines.org/community/index.php?msg=4134585

And you provided the solution here: https://www.simplemachines.org/community/index.php?msg=4134593

When you click on 'Recent Unread Topics' that little icon still shows. How do I get rid of it there too?
Hummm not quite sure, but I am not seeing that when clicking recent unread.(Possibly because I hadn't posted in any of them)

Got a screeny for me?

Title: Re: Hextech
Post by: Steve on February 23, 2023, 05:28:01 PM
At the moment, when I click on 'Unread Posts' it shows that I don't have any, which is true, and it gives a link to 'Click here to try all unread topics' which gives me this:

profilesmallscreenie.jpg
Title: Re: Hextech
Post by: TwitchisMental on February 23, 2023, 05:59:47 PM
Quote from: Steve on February 23, 2023, 05:28:01 PMAt the moment, when I click on 'Unread Posts' it shows that I don't have any, which is true, and it gives a link to 'Click here to try all unread topics' which gives me this:

[url="https://www.simplemachines.org/community/index.php?action=dlattach;attach=285843;type=preview;file"]profilesmallscreenie.jpg[/url]
Looks like that will be in the recent.template.php. You'd need to copy it from the default theme and into the Hextech theme folder.

Open in your favorite editor

Find and remove (line 150)

', $topic['is_posted_in'] ? '<span class="main_icons profile_sm"></span>' : '', '
Title: Re: Hextech
Post by: Steve on February 23, 2023, 06:22:28 PM
Soon as I can get someone to post I'll let you know if it worked. lol

I have no doubt it did and thank you.
Title: Re: Hextech
Post by: TwitchisMental on February 23, 2023, 06:30:02 PM
Quote from: Steve on February 23, 2023, 06:22:28 PMSoon as I can get someone to post I'll let you know if it worked. lol

I have no doubt it did and thank you.
You're welcome.
Title: Re: Hextech
Post by: Steve on February 23, 2023, 06:59:42 PM
Just an FYI, your above edit worked perfectly.

It just occurred to me that if I remove that line from the default theme's Recent.template.php, wouldn't it remove that icon from any theme that doesn't have that file?
Title: Re: Hextech
Post by: TwitchisMental on February 23, 2023, 07:40:16 PM
Quote from: Steve on February 23, 2023, 06:59:42 PMJust an FYI, your above edit worked perfectly.

It just occurred to me that if I remove that line from the default theme's Recent.template.php, wouldn't it remove that icon from any theme that doesn't have that file?
That would be correct.
Title: Re: Hextech
Post by: Steve on February 23, 2023, 07:49:27 PM
Cool beans. (https://i.imgur.com/Wm1mvsd.gif)
Title: Re: Hextech
Post by: TwitchisMental on June 11, 2023, 10:50:29 PM
New Version Uploaded:

1.1.5 :
Updated for SMF 2.1.4 and the Attachment UI changes.
Adjustment: Adjusted a few text colors for legibility.
Title: Re: Hextech
Post by: TwitchisMental on September 01, 2023, 01:06:06 AM
New Version Uploaded :

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.