Link to the theme (https://custom.simplemachines.org/index.php?theme=3016)
(https://custom.simplemachines.org/index.php?action=download;theme=3016;attach=283632;image;thumb)
Halloween Theme
A responsive black and orange halloween theme for SMF 2.1.
Important Note:
You will need to enable sGRB color profile in Chrome for certain oranges to show properly.
You can do this by typing chrome://flags/#force-color-profile into the address bar.
Choose sRGB for the Force color profile option.
Credits :
Shout out to Antechinus for the Alternative Admin CP Layout that is used in this theme.
Tutorial found here - https://www.simplemachines.org/community/index.php?topic=582354.
License:
(https://img.shields.io/badge/license-MIT-blue)
SMF Version:
(https://img.shields.io/badge/SMF-2.1-blue)
Patch Notes:
1.0 : Initial Release
1.0.1 :
Update: Updated for SMF 2.1.3
Bug Fix : Fixed a bug with the collapse not displaying properly for attachments.
Adjustment: Adjusted the breadcrumb so the arrows are even size.
Adjustment: Adjusted a few colors in the Admin CP.
1.0.2
Updated for SMF 2.1.4 and the Attachment UI changes.
Bug Fix: Fixed a bug where when you minimize a category, the collapse/expand button would shift to the left.
Adjustment: Adjusted the background colors for various moderation specific styles.
Adjustment: Adjusted the background color of the noticebox and infobox.
Adjustment: Adjusted the hover background color in the calendar.
1.0.3
Update: Updated for SMF 2.1.5/2.1.6
Woot! Using this right now. Have found no issues. ;D
Found a minor issue. When looking at a topic and you select 'Move', the category titles are unreadable in the dropdown box. It's a real minor issue as the board names can be easily read.
Quote from: Steve on September 26, 2022, 11:16:12 AMFound a minor issue. When looking at a topic and you select 'Move', the category titles are unreadable in the dropdown box. It's a real minor issue as the board names can be easily read.
Hummm I see... I see....
Will fix this in a bit.
I wouldn't worry too much about it. But if you're willing to fix it ...
Or just post the needed change here. ;D
Quote from: Steve on September 26, 2022, 03:01:08 PMI wouldn't worry too much about it. But if you're willing to fix it ...
Or just post the needed change here. ;D
Try this for me -
Open index.css
Find
input, button, select, textarea {
color: var(--white);
font: 83.33%/150% "Liberation Sans", Arial, sans-serif;
background: var(--main_bg);
outline: none;
border: 1px solid var(--border_color_2);
vertical-align: middle;
border-radius: 3px;
box-shadow: 1px 2px 1px rgba(160, 187, 221, 0.2) inset;
padding: 0.3em 0.4em;
}Replace with
input, button, select, textarea, optgroup {
color: var(--white);
font: 83.33%/150% "Liberation Sans", Arial, sans-serif;
background: var(--main_bg);
outline: none;
border: 1px solid var(--border_color_2);
vertical-align: middle;
border-radius: 3px;
box-shadow: 1px 2px 1px rgba(160, 187, 221, 0.2) inset;
padding: 0.3em 0.4em;
}
Works like a charm. ;D
Is adding: ,optgroup the only change (I don't see anything else different.).?
Quote from: Steve on September 26, 2022, 04:24:01 PMWorks like a charm. ;D
Is adding: ,optgroup the only change (I don't see anything else different.).?
Yep
Fixed version is uploaded aswell.
Thanks my friend. ;D
Quote from: Steve on September 26, 2022, 06:59:14 PMThanks my friend. ;D
No problem.
Thank you for reporting your findings.
It's great that we started that part of the year :P everyone is looking for something similar, the year has passed quickly, finally I'll go up another level. I went way out of my way to say great job! 8)
Regards!
Quote from: -Rock Lee- on September 26, 2022, 08:06:04 PMIt's great that we started that part of the year :P everyone is looking for something similar, the year has passed quickly, finally I'll go up another level. I went way out of my way to say great job! 8)
Regards!
Thank you.
@Steve Hey buuuuuuudddy... wanna try the new version I uploaded? It should resolve that problem you reported earlier but via CSS this time lol.
If the ,optgroup is the only css change you made, I did it manually and it works like a charm.
If you've made other changes, of course I'll do that for you. :)
Quote from: Steve on September 30, 2022, 05:41:49 AMIf the ,optgroup is the only css change you made, I did it manually and it works like a charm.
If you've made other changes, of course I'll do that for you. :)
No this is the issue with cat title and description not aligning properly due to you having those icons in the description.
This should solve that issue via CSS only. Just to much to type out to give manual instructions lol.
Okay, hang on a few and I'll check it.
Perfect Twitch! ;D
Edit: okay, maybe not perfect. If you look at this image there is no space between the icon and the = sign. On the original Halloween theme and all my other themes there is.
Screenshot 2022-09-30 at 16-12-55 Our Place - Index.png
Quote from: Steve on September 30, 2022, 05:03:38 PMPerfect Twitch! ;D
Edit: okay, maybe not perfect. If you look at this image there is no space between the icon and the = sign. On the original Halloween theme and all my other themes there is.
Screenshot 2022-09-30 at 16-12-55 Our Place - Index.png
Easy fix on that part.
Find
.desc > .bbc_img {
object-fit: contain;
height: 16px;
width: 16px;
}Replace with
.desc > .bbc_img {
object-fit: contain;
height: 16px;
width: 16px;
margin: 0px 4px;
}
Thank ya!
Quote from: Steve on September 30, 2022, 05:26:38 PMThank ya!
Thank you for the continuous bug reporting :).
New Version has been uploaded.
Now includes a ReadMe explaining two ways to resolve the Chrome Orange Display issue.
Now back to being only CSS changes :).
Quote from: TwitchisMental on September 30, 2022, 05:37:37 PMThank you for the continuous bug reporting :).
As long as y'all don't mind me reportin' 'em ... :P
Interesting about the Chrome issue. I hadn't loaded my site with Chrome so didn't know about it.
Quote from: Steve on September 30, 2022, 07:58:52 PMQuote from: TwitchisMental on September 30, 2022, 05:37:37 PMThank you for the continuous bug reporting :).
As long as y'all don't mind me reportin' 'em ... :P
Interesting about the Chrome issue. I hadn't loaded my site with Chrome so didn't know about it.
Honestly the Chrome issue is why I thought you changed everything to the lighter Orange.
It was just personal preference. :)
Thanks for the bug reports and fixing guys. All OK on my site.
Now just the Christmas theme Twitch ;)
Thanks, it's a great theme for October.
However I found that the text color for the board_description class is too dark on mobile.
I adjusted it easily enough by adding that class & a color to to responsive.css.
Is it just my display that had the problem? I couldn't see the board description text at all on my smart phone prior to changing its color.
Quote from: Chen Zhen on October 28, 2022, 06:50:00 PMThanks, it's a great theme for October.
However I found that the text color for the board_description class is too dark on mobile.
I adjusted it easily enough by adding that class & a color to to responsive.css.
Is it just my display that had the problem? I couldn't see the board description text at all on my smart phone prior to changing its color.
Humm not sure why that would be happening. Especially since the board description just uses the same color as the body.
I did find a parse error in the responsive.css (uploading fixed version now).. however I don't think that would cause the issue that you are reporting.
I am unable to replicate the issue on my end .
It was also happening on my responsive emulator (Windows Edge -> Inspect) so it's not just my phone.
Perhaps it's my portal or something else causing it.
Not a big deal as I can just add custom css to make it visible.
New Version Uploaded
1.0.1 :
Update: Updated for SMF 2.1.3
Bug Fix : Fixed a bug with the collapse not displaying properly for attachments.
Adjustment: Adjusted the breadcrumb so the arrows are even size.
Adjustment: Adjusted a few colors in the Admin CP.
Thanks for the update, Twitch. :)
New Version Uploaded:
1.0.2
Updated for SMF 2.1.4 and the Attachment UI changes.
Bug Fix: Fixed a bug where when you minimize a category, the collapse/expand button would shift to the left.
Adjustment: Adjusted the background colors for various moderation specific styles.
Adjustment: Adjusted the background color of the noticebox and infobox.
Adjustment: Adjusted the hover background color in the calendar.
Hi, what font is used in the logo?
Quote from: KitKat2 on October 08, 2023, 09:36:15 AMHi, what font is used in the logo?
It was this font here - https://www.dafont.com/cf-halloween.font
Hi, congratulations on this theme too. I managed to make the changes I wanted, now all I have to do is change the default boardicons with my own ones.
Can you explain to me where and how to change the code please?
Consider that I want to insert two icons, one for read posts and one for unread posts, like on SMF 2.0 with on/on2/off/redirect
Thank you
Quote from: Lucarella on February 03, 2024, 01:21:50 PMHi, congratulations on this theme too. I managed to make the changes I wanted, now all I have to do is change the default boardicons with my own ones.
Can you explain to me where and how to change the code please?
Consider that I want to insert two icons, one for read posts and one for unread posts, like on SMF 2.0 with on/on2/off/redirect
Thank you
The easiest way to do that is call your icons the same as the themes default ones, then rename the original ones with a 1 after them so as not to lose them, and upload yours in their place.
Thanks Dave, the problem is that I can't find the default icons in the theme's images folder... There is only the new boardicons but I don't know how to do it with mine, so I was asking to modify the code...
Yes sorry Lucarella the icons in this theme are all by Font Awsome. The code for these are in the index.css and they're go by using numbered codes.
open index.css and go to line 3098
.board_icon a::before {
display: inline;
font-family: "Font Awesome 6 Free";
font-size: 2em;
content: "\f086";
If you want to change the code for the icons go to Font Awesome website and search for an icon you like and replace the content code, in this case "\f086" with one you like.
If you want to change the icon to your own ones then I believe, although not tested, you can just revert the rule to the same as the SMF default code in the index.css file and that might work, but remember to put your images into the images folder. Have a play and see how you get on
On my site I have used my own images by changing the rule for each board to
.board_icon a {
display: inline-block;
width: 50px;
height: 50px;
}
#board_1 .board_icon a {
content: url(https://www.quizland.co.uk/images/IOB/rules.png);
}
#board_2 .board_icon a {
content: url(https://www.quizland.co.uk/images/IOB/announ.png);
}
#board_3 .board_icon a {
content: url(https://www.quizland.co.uk/images/IOB/welcome.png);
Then for the on off I used
.board_icon a.board_on2 {
border: 4px orange solid;
}
//.board_icon a.board_off {
border: 1px limegreen solid;
}
.board_icon a.board_redirect {
background: url(../images/custom/redirect.png) no-repeat 0 0 / 30px;
}
This then creates a thick border around the icon to show there's a new post/reply or a sub board has a new post/reply, if there are no new posts or replies then there is no border which is why I haven't used .board_icon a.board_on1
Thanks Dave...
The icon with the border around it that indicates new posts is interesting, so I can only use one for all the boards.
Would you be so kind as to tell me where to replace the code and, above all, give me the exact code to do it?
Thanks again
Quote from: Lucarella on February 04, 2024, 05:20:30 AMThanks Dave...
The icon with the border around it that indicates new posts is interesting, so I can only use one for all the boards.
Yes that's right at least for what I've done.
Quote from: Lucarella on February 04, 2024, 05:20:30 AMWould you be so kind as to tell me where to replace the code and, above all, give me the exact code to do it?
Thanks again
I didn't actually alter the code for Halloween as it didn't seem right as it was only for a week at the most and I didn't think my icons would look right. In saying that I have just changed the code to make it like the rest of the site themes with my icons/images. I will change it back but for what you want do as follows.
Firstly backup your index.css file just in case of errors.
Now open the Halloween index.css file find
.board_icon {
text-align: center;
padding: 8px 4px 0px 4px;
width: 60px;
flex-shrink: 0;
}
.board_icon a {
display: inline;
color: var(--orange_link);
text-decoration: none;
}
.board_icon a:hover {
color: var(--orange);
}
.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";
}Replace all that with
.board_icon {
text-align: center;
padding: 8px 4px 0px 4px;
width: 60px;
flex-shrink: 0;
}
.board_icon a {
display: inline-block;
width: 50px;
height: 50px;
}
#board_1 .board_icon a {
content: url(https://www.yoursite/images/IOB/image name.png);
}
#board_2 .board_icon a {
content: url(https://www.yoursite/images/IOB/image name.png);
}
#board_3 .board_icon a {
content: url(https://www.yoursite/images/IOB/image name.png);
}
.board_icon a.board_on {
border: 4px limegreen solid;
}
.board_icon a.board_on2 {
border: 4px orange solid;
}
.board_icon a.board_off {
border: 1px limegreen solid;
}
.board_icon a.board_redirect {
background-position: -45px -45px;
}
.board_icon {
justify-content: center;
width: 50px;
background: none;
}Now the thing is that with
#board_1 .board_icon a {
content: url(https://www.yoursite/images/IOB/image name.png); I have put a different image for each of the board icon on my site. If you don't do that the border code will not work as it's looking for icons. In Twitch's original code he's used the font awesome images and that forms a part of the code for his icons, I cannot use the icon borders with the his code, there may be a way to do that but I don't know what it is.
So in order for you to do your own icons you have to do it the way I've done it in this post, which is basically remove the font awesome code and replace the icons with your own if you want the same icon for all boards then remove the board number in my code and just leave it as
.board_icon a {
content: url(https://www.yoursite/images/IOB/image name.png); then the icon will be the same for each board.
I should add that IOB stands for 'Images On Board' it's what was used in the old SMF2.0 mod and I kept the folder to use for my images.
I hope you get that, if you need help let me know
Thanks Dave, I tested with the code you suggested and it works perfectly.
The only thing I don't like is the box that is created around the image because it is square, while I use a round image and it's not good.
I finally solved it with this code from Antechinus
https://www.simplemachines.org/community/index.php?msg=4124552
Thank you again and I apologize for the time I caused you to waste
Good news it OK. If it's working for you then it's not time wasted ;)
New Version Uploaded
1.0.3
Update: Updated for SMF 2.1.5/2.1.6
@TwitchisMental - this might need another tweak for 2.1.6?
See https://www.simplemachines.org/community/index.php?msg=4192410
Thank you for letting me know. I'll check it out when I get home in a few days .
Thank you