Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Theme Site Themes => Topic started by: TwitchisMental on January 28, 2023, 04:32:48 PM

Title: Blue Wave
Post by: TwitchisMental on January 28, 2023, 04:32:48 PM
Link to the theme (https://custom.simplemachines.org/index.php?theme=3022)
(https://custom.simplemachines.org/index.php?action=download;theme=3022;attach=285421;image;thumb)

BlueWave
A modern chill vibe kind of SMF theme.

Features :
Remixed Board Index
Remixed Header
Sidebar Info Center
Custom Footer Blocks
Social Links

License :
(https://img.shields.io/badge/license-MIT-blue)

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

Credits :
https://app.haikei.app/ for the footer background.
Shoutout to Costa for the separate sticky/normal topics trick.

Patch Notes : 
1.0: Initial Release
1.0.1:
Updated for SMF 2.1.4 and the Attachment UI changes.
New Feature: Now separates sticky topics from normal topics in the message index.
Adjustment: Adjusted background colors for various moderation specific styles.
Adjustment: Adjusted the background color of the noticebox.
Title: Re: Blue Wave
Post by: Steve on January 28, 2023, 05:45:50 PM
Awesome theme!  ;D
Title: Re: Blue Wave
Post by: TwitchisMental on January 28, 2023, 05:51:13 PM
Quote from: Steve on January 28, 2023, 05:45:50 PMAwesome theme!  ;D
Thank you :).
Title: Re: Blue Wave
Post by: Steve on January 28, 2023, 06:48:06 PM
It didn't take me long to find one small issue lol ...

After selecting the Gallery from the main menu, the links shown are almost impossible to read:

galleryscreenie.jpg

I know I can go to index.css line 252 and change the a:visited color to something more readable but does that affect things anywhere else?
Title: Re: Blue Wave
Post by: TwitchisMental on January 28, 2023, 07:38:29 PM
Quote from: Steve on January 28, 2023, 06:48:06 PMIt didn't take me long to find one small issue lol ...

After selecting the Gallery from the main menu, the links shown are almost impossible to read:

galleryscreenie.jpg (https://www.simplemachines.org/community/index.php?action=dlattach;attach=285429;type=preview;file)

I know I can go to index.css line 252 and change the a:visited color to something more readable but does that affect things anywhere else?
This seems to be more of an issue caused by the gallery mod which makes the class for those areas windowbg2.

Try adding this -

Find

.generic_list_wrapper, .windowbg, .approvebg, .approvebg2 {
    background: var(--main_bg);
    margin: 12px 0 0 0;
    padding: 12px 16px;
    border: 1px solid;
    border-color: var(--main_border_cool);
    border-radius: 6px;
    box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);
    overflow: auto;
}

Add after -

.windowbg {
    border-radius: 0px;
}

.windowbg2 {
    background: var(--main_bg);
    border: 1px solid;
    border-color: var(--main_border_cool);
}


Should give you this -

gal.png

Also seen an issue with your menu items not all being even.

Find -
.dropmenu > li {
  display: inline-block;
  margin: 0px 2px 0px 2px;
  line-height: 1.9em;
}


Change to

.dropmenu > li {
  display: inline-block;
  margin: -1px 2px 0px 2px;
  line-height: 1.9em;
}

Title: Re: Blue Wave
Post by: Steve on January 29, 2023, 08:12:46 AM
I wasn't aware of the misalignment but I've replaced both code bits and all is much much better.

Thanks as always my friend.
Title: Re: Blue Wave
Post by: TwitchisMental on January 29, 2023, 11:49:57 AM
Quote from: Steve on January 29, 2023, 08:12:46 AMI wasn't aware of the misalignment but I've replaced both code bits and all is much much better.

Thanks as always my friend.
You're welcome.
Title: Re: Blue Wave
Post by: Steve on January 30, 2023, 04:24:45 PM
Hey Twitch, what do I need to do to change the height of the header? I'd like it to be less tall as it is if possible.  :)
Title: Re: Blue Wave
Post by: TwitchisMental on January 31, 2023, 10:55:57 AM
Quote from: Steve on January 30, 2023, 04:24:45 PMHey Twitch, what do I need to do to change the height of the header? I'd like it to be less tall as it is if possible.  :)
Not saying it couldn't be done, but it wouldn't be one small edit.

You would have to shrink the header image itself and the min-height property for the header class.

Next you would have to adjust the min-height property on the header top block and bottom block classes.

The font-sizes on everything inside the overall header would then need to be adjusted as well.
Title: Re: Blue Wave
Post by: Steve on February 01, 2023, 08:20:41 AM
Not worth it. Will leave it as is ... I've grown used to it now.  ;D
Title: Re: Blue Wave
Post by: Steve on February 02, 2023, 11:06:16 AM
I have found a small problem when the Say Thanks mod is installed. https://custom.simplemachines.org/index.php?mod=3898

Look at this image:

thanks.jpg

It is the same height and correctly aligned on all my other themes, including yours, but not on this one.

Title: Re: Blue Wave
Post by: TwitchisMental on February 02, 2023, 12:09:19 PM
Quote from: Steve on February 02, 2023, 11:06:16 AMI have found a small problem when the Say Thanks mod is installed. https://custom.simplemachines.org/index.php?mod=3898

Look at this image:

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

It is the same height and correctly aligned on all my other themes, including yours, but not on this one.


Throw this at the bottom of the index.css -

.thank_you_button::before, .saythanks_top_thanked::before, .saythanks_top_thanked_posts::before, .alert_icon.saythanks::before {
  background: none!important;
  content: '\f075'!important;
}

Title: Re: Blue Wave
Post by: Steve on February 02, 2023, 12:29:03 PM
Perfect! Thanks Twitch.
Title: Re: Blue Wave
Post by: TwitchisMental on February 02, 2023, 07:38:02 PM
Quote from: Steve on February 02, 2023, 12:29:03 PMPerfect! Thanks Twitch.
You're welcome :).
Title: Re: Blue Wave
Post by: Steve on February 03, 2023, 08:59:30 AM
Hey Twitch, in the topic list the words 'Sticky Topics' and 'Normal Topics' are virtually unreadable.

In index.css I changed:

strong, .strong {
font-weight: bold;
color: var(--black);
}

to:

strong, .strong {
font-weight: bold;
color: #f0ce8e;
}

I don't know yet if that will affect other areas.

Will this work or is there a better way?

Edit: I see that it does affect other areas undesirably so how can I fix just this?
Title: Re: Blue Wave
Post by: TwitchisMental on February 03, 2023, 10:47:41 AM
Quote from: Steve on February 03, 2023, 08:59:30 AMHey Twitch, in the topic list the words 'Sticky Topics' and 'Normal Topics' are virtually unreadable.

In index.css I changed:

strong, .strong {
font-weight: bold;
color: var(--black);
}

to:

strong, .strong {
font-weight: bold;
color: #f0ce8e;
}

I don't know yet if that will affect other areas.

Will this work or is there a better way?

Edit: I see that it does affect other areas undesirably so how can I fix just this?
Looks like you are using Ants trick for the sticky topics.

You could just change it for that section.

#topic_container strong {
  color: #fff;
}

Title: Re: Blue Wave
Post by: Steve on February 03, 2023, 01:12:53 PM
Sorry but I'm not understanding. I haven't used Ant's trick unless it's in the default theme but either way, I don't find #topic_container strong ... :(
Title: Re: Blue Wave
Post by: TwitchisMental on February 03, 2023, 01:49:46 PM
Quote from: Steve on February 03, 2023, 01:12:53 PMSorry but I'm not understanding. I haven't used Ant's trick unless it's in the default theme but either way, I don't find #topic_container strong ... :(
You sure? Or is there a setting that separates the stickies from the norms that I am forgetting about?

I should have mentioned that you will need to add the above css to the bottom of the index.css, sorry about that.


Title: Re: Blue Wave
Post by: Steve on February 03, 2023, 02:07:11 PM
No, I'm not sure. You expect me to remember that far back lol!

Thanks for the code, it works perfectly.
Title: Re: Blue Wave
Post by: TwitchisMental on February 03, 2023, 02:12:04 PM
Quote from: Steve on February 03, 2023, 02:07:11 PMNo, I'm not sure. You expect me to remember that far back lol!

Thanks for the code, it works perfectly.
Humm going back and looking at the aforementioned tip/trick, it is not the same as what you have.

Now I am curious as to how you got it like that lol.

You're welcome, glad it worked for you :).
Title: Re: Blue Wave
Post by: Steve on February 03, 2023, 04:47:18 PM
Now I remember ... it's this mod: https://custom.simplemachines.org/index.php?mod=3300
Title: Re: Blue Wave
Post by: TwitchisMental on February 03, 2023, 09:28:33 PM
Quote from: Steve on February 03, 2023, 04:47:18 PMNow I remember ... it's this mod: https://custom.simplemachines.org/index.php?mod=3300
Ah okay, makes sense now .
Title: Re: Blue Wave
Post by: Diego Andrés on February 03, 2023, 09:37:41 PM
I've been including that neat mod in my themes for a decade now, really nice.
Pretty sure it's the mod causing the issue for @Steve , it's not properly updated in terms of markup, it injects table rows and 2.0.x styles in the template and SMF doesn't use those anymore.
Title: Re: Blue Wave
Post by: Steve on February 04, 2023, 05:54:06 AM
So I should remove it @Diego Andrés?
Title: Re: Blue Wave
Post by: Steve on February 04, 2023, 11:00:35 AM
@TwitchisMental - when I expand the textarea, it turns a grey color then jerks as I expand it. This doesn't happen on any of my other themes. Any idea why it doesn't expand smoothly?
Title: Re: Blue Wave
Post by: TwitchisMental on February 04, 2023, 12:22:35 PM
Quote from: Steve on February 04, 2023, 11:00:35 AM@TwitchisMental - when I expand the textarea, it turns a grey color then jerks as I expand it. This doesn't happen on any of my other themes. Any idea why it doesn't expand smoothly?
Still waking up a bit.. what do you mean by expand the text area?
Title: Re: Blue Wave
Post by: Steve on February 04, 2023, 12:40:08 PM
The text area you type in when you're making post. The lower right-hand corner where you can grab and expand it.

Edit: forget that. Must be my Firefox. Works fine in Chrome. Sorry about that.
Title: Re: Blue Wave
Post by: TwitchisMental on February 04, 2023, 12:50:13 PM
Quote from: Steve on February 04, 2023, 12:40:08 PMThe text area you type in when you're making post. The lower right-hand corner where you can grab and expand it.

Edit: forget that. Must be my Firefox. Works fine in Chrome. Sorry about that.
Humm I can replicate the issue in Firefox as-well.  It works but does seem to be a bit slower.

I wonder if I used transition on something that is causing that.
Title: Re: Blue Wave
Post by: Diego Andrés on February 04, 2023, 01:07:26 PM
Quote from: Steve on February 04, 2023, 05:54:06 AMSo I should remove it @Diego Andrés?

There's no need, could just adjust the HTML so it's updated.
Title: Re: Blue Wave
Post by: TwitchisMental on February 04, 2023, 02:21:43 PM
Quote from: TwitchisMental on February 04, 2023, 12:50:13 PM
Quote from: Steve on February 04, 2023, 12:40:08 PMThe text area you type in when you're making post. The lower right-hand corner where you can grab and expand it.

Edit: forget that. Must be my Firefox. Works fine in Chrome. Sorry about that.
Humm I can replicate the issue in Firefox as-well.  It works but does seem to be a bit slower.

I wonder if I used transition on something that is causing that.
So I did this @Steve

open the jquery.sceditor.theme.css

Find

.sceditor-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    background: #fff;
    border: 1px solid #d9d9d9;
    font-size: 13px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #222;
    line-height: 1;
    font-weight: bold;
    border-radius: 4px;
    background-clip: padding-box;
    min-width: 100%;
    max-width: 100%;
}


Replace -

.sceditor-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    background: #fff;
    border: 1px solid #d9d9d9;
    font-size: 13px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #222;
    line-height: 1;
    font-weight: bold;
    border-radius: 4px;
    background-clip: padding-box;
    min-width: 100%;
    max-width: 100%;
    transition: 0s;
}

This seems to resolve the issue.
Title: Re: Blue Wave
Post by: Steve on February 04, 2023, 03:06:54 PM
I see how you are ... tried to trick me by not telling me it was in jquery.sceditor.theme.css but I didn't fall for it.  :P

Works like a charm, Twitch. Thanks my friend.  :)
Title: Re: Blue Wave
Post by: TwitchisMental on February 04, 2023, 03:38:03 PM
Quote from: Steve on February 04, 2023, 03:06:54 PMI see how you are ... tried to trick me by not telling me it was in jquery.sceditor.theme.css but I didn't fall for it.  :P

Works like a charm, Twitch. Thanks my friend.  :)
Yeah sure let's go with that :P .

Awesome, glad it worked for you :).
Title: Re: Blue Wave
Post by: lord alibaski on February 10, 2023, 10:11:29 AM
I'm going mad again or blind

Just trying this out on a wamp, though I can't find the option to add your own logo, is it possible to add a logo and centralize it?

Thanks
Title: Re: Blue Wave
Post by: TwitchisMental on February 10, 2023, 12:53:08 PM
Quote from: lord alibaski on February 10, 2023, 10:11:29 AMI'm going mad again or blind
Just trying this out on a wamp, though I can't find the option to add your own logo, is it possible to add a logo and centralize it?
Thanks
If you want to replace the logo, replace the logo.png in the custom folder within the images folder of the theme.
Title: Re: Blue Wave
Post by: lord alibaski on February 10, 2023, 06:52:50 PM
Exactly what I did mate and this is what I see

Screenshot 2023-02-10 234814.png
Title: Re: Blue Wave
Post by: TwitchisMental on February 10, 2023, 07:27:49 PM
Quote from: lord alibaski on February 10, 2023, 06:52:50 PMExactly what I did mate and this is what I see

Screenshot 2023-02-10 234814.png (https://www.simplemachines.org/community/index.php?action=dlattach;attach=285644;type=preview;file)
It seems that you just copied and pasted the link in the site slogan section.

You need to actually go to the themes directory on your server -  smf>themes>Blue Wave>images>custom. From there you would replace the logo.png in that folder with your logo.png .

If you do the above you will get -

Twitch-s-World-Index(8).png
Title: Re: Blue Wave
Post by: lord alibaski on February 10, 2023, 08:09:02 PM
I am testing this in wamp, but this is what is making go crazy.The link there is showing an older image it is not the image I have in the folder and it is in the correct folder.

I have tried restarting all services in wamp but it is still showing that old image.

Question is there a file size limit for image files in wamp? even if there is a limit that logo you see within that link doesn't even exist in any of the theme's I am using in wamp.
Title: Re: Blue Wave
Post by: TwitchisMental on February 10, 2023, 08:18:31 PM
Quote from: lord alibaski on February 10, 2023, 08:09:02 PMI am testing this in wamp, but this is what is making go crazy.The link there is showing an older image it is not the image I have in the folder and it is in the correct folder.

I have tried restarting all services in wamp but it is still showing that old image.

Question is there a file size limit for image files in wamp? even if there is a limit that logo you see within that link doesn't even exist in any of the theme's I am using in wamp.

It could be a cache issue. I would suggest clearing your browser cache and possibly even SMFs cache in the AdminCP.


Title: Re: Blue Wave
Post by: lord alibaski on February 11, 2023, 05:59:45 PM
It worked perfectly fine uploading to server but still not working in wamp and I cleared everything. only other option I can try is to uninstall it in wamp and install it again will do that next week.

Got another question for you, I'm not bother about it cos I like where it is but I have a few members moaning about the info center some prefer it to be on the bottom of the board, is it possible to move the info center to the bottom.

or

Give members the opportunity to to have it on the side or on the bottom

Thanks
Title: Re: Blue Wave
Post by: TwitchisMental on February 11, 2023, 10:16:41 PM
Quote from: lord alibaski on February 11, 2023, 05:59:45 PMIt worked perfectly fine uploading to server but still not working in wamp and I cleared everything. only other option I can try is to uninstall it in wamp and install it again will do that next week.

Got another question for you, I'm not bother about it cos I like where it is but I have a few members moaning about the info center some prefer it to be on the bottom of the board, is it possible to move the info center to the bottom.

or

Give members the opportunity to to have it on the side or on the bottom

Thanks
They need to get with the times then. Do they not know Xenforo and Reddit have it on the side lol !!!  [EXTREME SARCASM/JOKE]

Yes you can switch it to the normal up down -

Open index.css

Find
@media screen and (min-width:1000px) {
 .row {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap
 }

Replace With

@media screen and (min-width:1000px) {
 .row {
    display:flex;
    flex-direction: column;
    flex-wrap:nowrap
 }


As for the issue in wamp, I would suspect cache is the issue. Works fine for me in Xamp. Just need to do a hard refresh .
Title: Re: Blue Wave
Post by: TwitchisMental on June 11, 2023, 11:56:18 AM
New Version Released :)

1.0.1:
Updated for SMF 2.1.4 and the Attachment UI changes.
New Feature: Now separates sticky topics from normal topics in the message index.
Adjustment: Adjusted background colors for various moderation specific styles.
Adjustment: Adjusted the background color of the noticebox.


Edit: Forgot to mention that I added the separate stickies and normal topics trick.
The tweaks were based on this mod by Costa - https://custom.simplemachines.org/index.php?mod=3300. Using divs instead of tables though.