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.
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). :)
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.
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. :)
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
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. :)
Thanks
@TwitchisMental!
And
@Antechinus - thank you as well. That sounds easy enough.
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.
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)?
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.
It's not the font-size but the line-height I want to change. Thanks!
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
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;
}
Perfect! Well, I changed the height to 26 but still, it works perfectly. Thanks again Twitch.
Sorry to keep bothering you but is it intentional that the horizontal rule doesn't show in any post?
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" ?
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
Thank you for the new icons. Much better! ;D
Quote from: TwitchisMental on September 09, 2022, 11:49:29 PMQuote 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.
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 PMQuote 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
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 :).
Cool beans. I have a couple of other minor issues but I'll give you a break for awhile lol.
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.
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?
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;
}
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?
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.
That's the one I mean all right.
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>' : '', '
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
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 :).
Any time my friend. :)
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.
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.
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.
Quote from: seekier on October 11, 2022, 02:59:58 PMQuote 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.
New Version has been uploaded.
Fixed the reported bug above.
Adjusted the recent posts section to show less info on smaller screens.
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
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) {
Quote from: TwitchisMental on October 17, 2022, 09:40:16 PMQuote 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
Quote from: seekier on October 17, 2022, 10:08:21 PMQuote from: TwitchisMental on October 17, 2022, 09:40:16 PMQuote 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.
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.
Sorry to disrupt, the best solution is to change the height, to min-height.
#main_menu {
height: 50px;
#main_menu {
min-height: 50px;
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 PMQuote 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.
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
Thanks Twitch. :)
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
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%;
}
Thanks so much it works great and thanks for the quick response
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.
New Version Uploaded
1.1.2 :
Update : Updated for SMF 2.1.3
Adjustment: Adjusted the breadcrumb so that all arrows are even.
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.
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 >.>.
New Version has been uploaded fixing the issue.
Thanks Twitch! ;D
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;
}
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. :)
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
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. :)
Quote from: Steve on December 06, 2022, 06:25:48 PMQuote 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.
:laugh:
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;
}
Thanks Twitch. Amazing what one digit or character will do. ;D
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
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.
Thank you very much! :)
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
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.
Quote from: TwitchisMental on December 27, 2022, 12:53:14 PMQuote 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
Quote from: Tonyvic on December 30, 2022, 09:23:24 AMQuote from: TwitchisMental on December 27, 2022, 12:53:14 PMQuote 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.
Thanks again Twitch. :)
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.
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.
Not to mention it's the holidays
@seekier ... ;)
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.
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?
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.
Many thanks guys, I hadn't given members the permission to Allow select their own themes. :-[ :-[
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.
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
I can't seem to replicate this issue. Would you mind giving me a link to your forum with a test account?
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
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.
I same settings enabled but news now appears twice in Hextech
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.
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 .
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. :-\
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;
}
Whoa, I didn't realize it was going to be that much. Looks like I have my work cut out for me.
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 .
:laugh:
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?
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?
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
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>' : '', '
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.
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.
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?
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.
Cool beans. (https://i.imgur.com/Wm1mvsd.gif)
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.
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.