News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Blue Wave

Started by TwitchisMental, January 28, 2023, 04:32:48 PM

Previous topic - Next topic

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

Steve

Awesome theme!  ;D
DO NOT pm me for support!

TwitchisMental


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

TwitchisMental

#4
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

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 -

You cannot view this attachment.

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;
}


Steve

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

TwitchisMental

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.

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

TwitchisMental

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.

Steve

Not worth it. Will leave it as is ... I've grown used to it now.  ;D
DO NOT pm me for support!

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.

DO NOT pm me for support!

TwitchisMental

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:

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 -

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

TwitchisMental


Steve

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

TwitchisMental

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;
}


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

TwitchisMental

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



Steve

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

Thanks for the code, it works perfectly.
DO NOT pm me for support!

TwitchisMental

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

Advertisement: