Blue Wave

[TwitchisMental]

Link to the theme


BlueWave
A modern chill vibe kind of SMF theme.

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

License :


SMF Version :


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

Patch Notes : 

Code Select Expand

1.0: Initial Release

Code Select Expand

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.

[Steve]

Awesome theme! 

[TwitchisMental]

Awesome theme! 

Thank you .

[Steve]

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:

You cannot view this attachment.

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?

[TwitchisMental]

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?

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

Code Select Expand

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

Code Select Expand

.windowbg {
    border-radius: 0px;
}

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


Should give you this -

You cannot view this attachment.

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

Find -

Code Select Expand

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

Change to

Code Select Expand

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


[Steve]

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.

[TwitchisMental]

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.

You're welcome.

[Steve]

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. 

[TwitchisMental]

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. 

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.

[Steve]

Not worth it. Will leave it as is ... I've grown used to it now. 

[Steve]

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:

You cannot view this attachment.

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

[TwitchisMental]

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:

You cannot view this attachment.

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 -

Code Select Expand

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

[Steve]

Perfect! Thanks Twitch.

[TwitchisMental]

Perfect! Thanks Twitch.

You're welcome .

[Steve]

Hey Twitch, in the topic list the words 'Sticky Topics' and 'Normal Topics' are virtually unreadable.

In index.css I changed:

Code Select Expand

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

to:

Code Select Expand

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?

[TwitchisMental]

Hey Twitch, in the topic list the words 'Sticky Topics' and 'Normal Topics' are virtually unreadable.

In index.css I changed:

Code Select Expand

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

to:

Code Select Expand

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.

Code Select Expand

#topic_container strong {
  color: #fff;
}

[Steve]

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

[TwitchisMental]

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

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.

[Steve]

No, I'm not sure. You expect me to remember that far back lol!

Thanks for the code, it works perfectly.

[TwitchisMental]

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

[Steve]

Now I remember ... it's this mod: https://custom.simplemachines.org/index.php?mod=3300

[TwitchisMental]

Now I remember ... it's this mod: https://custom.simplemachines.org/index.php?mod=3300

Ah okay, makes sense now .

[Diego Andrés]

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.

[Steve]

So I should remove it @Diego Andrés?

[Steve]

@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?

[TwitchisMental]

@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?

[Steve]

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.

[TwitchisMental]

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.

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.

[Diego Andrés]

So I should remove it @Diego Andrés?

There's no need, could just adjust the HTML so it's updated.

[TwitchisMental]

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.

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

Code Select Expand

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

Code Select Expand

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

[Steve]

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. 

Works like a charm, Twitch. Thanks my friend. 

[TwitchisMental]

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. 

Works like a charm, Twitch. Thanks my friend. 

Yeah sure let's go with that .

Awesome, glad it worked for you .

[lord alibaski]

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

[TwitchisMental]

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

If you want to replace the logo, replace the logo.png in the custom folder within the images folder of the theme.

[lord alibaski]

Exactly what I did mate and this is what I see

You cannot view this attachment.

[TwitchisMental]

Exactly what I did mate and this is what I see

Screenshot 2023-02-10 234814.png

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 -

You cannot view this attachment.

[lord alibaski]

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.

[TwitchisMental]

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.

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

[lord alibaski]

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

[TwitchisMental]

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

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

Code Select Expand

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

Code Select Expand

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

[TwitchisMental]

New Version Released

Code Select Expand

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.