News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Halloween

Started by TwitchisMental, September 26, 2022, 08:53:24 AM

Previous topic - Next topic

Steve

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

TwitchisMental

Quote from: Steve on September 30, 2022, 07:58:52 PM
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.
Honestly the Chrome issue is why I thought you changed everything to the lighter Orange.

Steve

It was just personal preference.  :)
DO NOT pm me for support!

Dave J

Thanks for the bug reports and fixing guys. All OK on my site.

Now just the Christmas theme Twitch  ;)
If you want quizzes to add to the new SMF2.1 quiz mod go here . There are also walkthroughs in the forum to explain how to install them and other tips.

Steve

DO NOT pm me for support!

Chen Zhen


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.
 

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

TwitchisMental

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 .


Chen Zhen


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.

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

TwitchisMental

#28
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.

Steve

Thanks for the update, Twitch.  :)
DO NOT pm me for support!

TwitchisMental


TwitchisMental

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.

KitKat2

Hi, what font is used in the logo?

TwitchisMental


Lucarella

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

Dave J

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.
If you want quizzes to add to the new SMF2.1 quiz mod go here . There are also walkthroughs in the forum to explain how to install them and other tips.

Lucarella

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

Dave J

#37
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
If you want quizzes to add to the new SMF2.1 quiz mod go here . There are also walkthroughs in the forum to explain how to install them and other tips.

Lucarella

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

Dave J

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
If you want quizzes to add to the new SMF2.1 quiz mod go here . There are also walkthroughs in the forum to explain how to install them and other tips.

Advertisement: