DarkModern v2.1.14 Released!

[Skhilled]

We are happy to announce the first release of Crip's DarkModern theme for SMF v2.1.4! 

All comments and suggestions are welcome! Thank you for your patience!   You can download it and any future updates at Github:

https://github.com/Crip-Zone/DarkModern

[Lucarella]

You are great guys, congratulations

[Skhilled]

Thank you, but I just realized that I forgot to add it to this site.

Done!

[Scrubmeister]

Thank You. 

[Skhilled]

I've noticed that the .amt in the main menu and in the admin menu are different colors.

Change this:

Code Select Expand

.dropmenu li .active .amt,
#top_info li .active .amt {
background: var(--amt_active_bg_color);
color: inherit;
}
To this:

Code Select Expand

.dropmenu li .active .amt,
#top_info li .active .amt {
/*background: var(--amt_active_bg_color);*/
color: inherit;
}

[Ken.]

Good job Steve! 
This is a great looking theme.

[trams]

Thanks... is the current theme here the DarkModern one?

Anyway, any plan to put a demo page?

[Skhilled]

Hi trams. Yes, it is the DarkModern theme. Whenever we release a theme I change this site to that theme.

Here's the demo site where you can see all of the SMF 2.1.4 version themes. You cannot register but you can see it:

https://jpr62.com/demos214/index.php

[Skhilled]

Here's the fix for the 'notify alert/email' dropdown. Find '.notify_dropdown span' and add the last two lines to it:

Code Select Expand

.notify_dropdown span {
 font-size: 0.9em;
 display: block;
 max-width: 500px;
}

Image before:



Image after:

[Skhilled]

DarkModern v2.1.14b Release:

Fixed the 'notify alert/email' dropdown at the bottom right of posts. The updated version for this is here:

https://github.com/Crip-Zone/DarkModern/releases/tag/v2.1.4b

[darkangel612]

I love this theme, it is so nice on my eyes and almost like my Insidious theme used to be...LOL

1. How to make the logo to go down lower and centered

2. all the drop menus are with a transparent bg, how to make the at least a #333

If you could help me with that I can set it right in the files.

https://www.thefantasiesattic.net/attic/index.php

[TwitchisMental]

For the logo issue, in both responsive and index.css find

Code Select Expand

  height: 70px;
  background: linear-gradient(#393939 0%, #303030 80%);
  border-radius: 10px 10px 0 0;
  border-left: 0;
  border-top: 3px solid hsl(0, 0%, 22%);
  border-right: 0;
  padding: 12px 10px 2px 10px;
  display: flex;
  align-items: flex-end;
  border-bottom: 0;
  width: 100%;
change to -

Code Select Expand

  min-height: 70px;
  background: linear-gradient(#393939 0%, #303030 80%);
  border-radius: 10px 10px 0 0;
  border-left: 0;
  border-top: 3px solid hsl(0, 0%, 22%);
  border-right: 0;
  padding: 12px 10px 2px 10px;
  display: flex;
  align-items: flex-end;
  border-bottom: 0;
  width: 100%;
@Skhilled  This will need updated on the theme.

[Skhilled]

@darkangel612 - Well hello, stranger! Long time no see.

2. all the drop menus are with a transparent bg, how to make the at least a #333

If you could help me with that I can set it right in the files.

https://www.thefantasiesattic.net/attic/index.php

EDIT: If you switch to DarkModern on this site the drop menus are not transparent. I've re-signed up for the attic since my account was removed.

[Skhilled]

@Skhilled  This will need updated on the theme.

Okey, dokey!

EDIT: For some reason the buttons under your post are smaller than the rest? Not sure why... Or, maybe because of the background?

[Skhilled]

@darkangel612 - Well hello, stranger! Long time no see.

2. all the drop menus are with a transparent bg, how to make the at least a #333

If you could help me with that I can set it right in the files.

https://www.thefantasiesattic.net/attic/index.php

EDIT: If you switch to DarkModern on this site the drop menus are not transparent.

Re-EDIT: I've re-signed up for the attic since my account was removed.

I've logged into your site and have switched to the Dark Modern theme and the drop menu's look ok to me. Can you show us a screenshot of what you're talking about?

[Skhilled]

I can see how on this theme that it becomes a problem using the member options, etc. after logging in. Hmmm, I'll need to think on this a bit.

[Skhilled]

@TwitchisMental - I think that the logo may need to be moved into index.template.php. If I remember, that may be how it was done here.

[TwitchisMental]

@TwitchisMental - I think that the logo may need to be moved into index.template.php. If I remember, that may be how it was done here.

The issue at end is simply due to the header being a set width. So if anything is over that set width it will breakout as seen above. Switching it to min-height always it "stretch" with the image.

[Skhilled]

Maybe, they haven't applied it yet because it still looks the same on her site.

[Skhilled]

Ok, this is still not working for me in dev using FF. Maybe a browser issue? So, after playing with it, I've changed min-height to 300px and it looks a lot better. I think the main issue is that their logo is about 2-3 times the height of other logos.

[TwitchisMental]

Ok, this is still not working for me in dev using FF. Maybe a browser issue? So, after playing with it, I've changed min-height to 300px and it looks a lot better. I think the main issue is that their logo is about 2-3 times the height of other logos.

For whatever reason the entire #header section is in both index.css and responsive.css. I bet that is why it is not working for you.

When you adjust both to min-height: 70px; you get this -

[Skhilled]

Yes, it puts it 'inside' the header but, I can't seen to make it show above the header in FF.

EDIT: I'm also wondering if there's a way to accommodate logos of unusual height/width in the code so we don't have to re-write code for each theme?