[Preview] Alien_Shades

[Shades.]

Nothing much just dark & greeny!

Not sure if this would be aloud on the smf theme site or not because it's just mainly color changes and a little css changing but if not I will have it up for download on my site when finished along with a few other colorful themes as I get time to create them.

Thanks

[TwitchisMental]

Nothing much just dark & greeny!

Not sure if this would be aloud on the smf theme site or not because it's just mainly color changes and a little css changing but if not I will have it up for download on my site when finished along with a few other colorful themes as I get time to create them.

Thanks

Looking good so far. One suggestion if I may, I would adjust that text-shadow color on the navigation section/breadcrumb area text.

[Shambles]

I think it looks fantastic. Green on black is what I've used for the past 45 years in IT

[Shades.]

Looking good so far. One suggestion if I may, I would adjust that text-shadow color on the navigation section/breadcrumb area text.

Thanks! Suggestions are welcome and appreciated! Do you mean like the one you shared here?

I think it looks fantastic. Green on black is what I've used for the past 45 years in IT

Thank you!

[TwitchisMental]

Looking good so far. One suggestion if I may, I would adjust that text-shadow color on the navigation section/breadcrumb area text.

Thanks! Suggestions are welcome and appreciated! Do you mean like the one you shared here?

I think it looks fantastic. Green on black is what I've used for the past 45 years in IT

Thank you!

I mean specifically where it says "Shades Theme Demo Site" in the navigation area. It currently has a grayish text-shadow. It would probably look better without one or just a flat black color.

The default theme has it as -

Code Select Expand

.navigate_section ul li {
  float: left;
  padding-bottom: 3px;
  line-height: 1.1em;
  color: rgb(68, 68, 68);
  text-shadow: 1px 1px 0 rgb(255, 255, 255);
}
You would adjust the text-shadow here to something more like.

Code Select Expand

text-shadow: 0px 1px 1px rgba(0,0,0,0.3);

[Shades.]

Looking good so far. One suggestion if I may, I would adjust that text-shadow color on the navigation section/breadcrumb area text.

Thanks! Suggestions are welcome and appreciated! Do you mean like the one you shared here?

I think it looks fantastic. Green on black is what I've used for the past 45 years in IT

Thank you!

I mean specifically where it says "Shades Theme Demo Site" in the navigation area. It currently has a grayish text-shadow. It would probably look better without one or just a flat black color.

The default theme has it as -

Code Select Expand

.navigate_section ul li {
  float: left;
  padding-bottom: 3px;
  line-height: 1.1em;
  color: rgb(68, 68, 68);
  text-shadow: 1px 1px 0 rgb(255, 255, 255);
}
You would adjust the text-shadow here to something more like.

Code Select Expand

text-shadow: 0px 1px 1px rgba(0,0,0,0.3);

Oh ok I read that wrong and didn't even see the shadow comment sorry! But yeah I'm still playing with that and thought the same!

[Steve]

Not sure if this would be aloud on the smf theme site or not

Looking at what's there, probably not. You'd need to make it more 'your own' by switching out the icons, etc.

I can check with the customizers if you like.

[Mick.]

Not sure if this would be aloud on the smf theme site or not

Looking at what's there, probably not. You'd need to make it more 'your own' by switching out the icons, etc.

I can check with the customizers if you like.

I believe variants are not allowed.

[shadav]

play with the layout a bit, as stated make it a bit more your own and I wouldn't see why it wouldn't be allowed

but yeah just changing colors usually isn't allowed on the theme site.
My theme(s) are barely allowed  only because I did change things up just slightly enough to be based off of the default themes but not exact copies (if that made sense)
I changed things up just enough for them to be slightly different but still simple enough

[TwitchisMental]

play with the layout a bit, as stated make it a bit more your own and I wouldn't see why it wouldn't be allowed

but yeah just changing colors usually isn't allowed on the theme site.
My theme(s) are barely allowed  only because I did change things up just slightly enough to be based off of the default themes but not exact copies (if that made sense)
I changed things up just enough for them to be slightly different but still simple enough

Just to add on to this, look at other themes for inspiration.

There are also websites like https://dribbble.com/shots/popular/web-design that can give you ideas.

Check out the tips and tricks section too.

It is pretty easy to make your theme unique enough for the SMF Theme Site .

[Steve]

I believe variants are not allowed.

Then why is there a curve variants option when searching for themes?

[Mick.]

I dunno. I feel rules change depending on which foot got out of bed first 

[Ricky.]

I believe variants are not allowed.

Then why is there a curve variants option when searching for themes?

Because there was a time when there were not many choices and hence almost everything was allowed. But as with anything else, SMF got matured and basic curve variations were discouraged to encourage theme author to get more creative and thus giving community improved and unique themes.

[shadav]

I believe variants are not allowed.

Then why is there a curve variants option when searching for themes?

I believe that was from before the cust team really put "rules" (used loosely) in place...
and well yes variants are allowed
afterall variant simply means that it differs in some respect/aspect from the original...however to my understanding just simple color changes aren't allowed (anymore)...there needs to be a bit more to the variant for it to be approved by the cust team (as far as I understand that is)

[Shades.]

Ok I added some board icons and fixed the text shadows so let me know what you think about this...

(Think it'll pass now?)

[TwitchisMental]

Ok I added some board icons and fixed the text shadows so let me know what you think about this...

(Think it'll pass now?)

You are headed in the right direction. It is looking great and I really like the color choices. Now you need to start making some changes to make it more unique.

It really doesn't take much to do so. A slightly modified menu... maybe a spiced up footer...maybe a new header layout.

[Mick.]

In my opinion, I'd rid the menu icons. They don't match the new theme scheme in any way. Something I see on latest 2.1 theme submissions.    https://www.simplemachines.org/community/index.php?topic=578604.msg4096267#msg4096267

-The rounded edges still feels like default. I'd put them at 3px.

-Get rid of the SMF logo and put an Alien on there. Admins can replace with whatever they want after.

-Head to the Tips and Tricks section as suggested earlier https://www.simplemachines.org/community/index.php?board=72.0 and see what else you can come up with.

-Test the theme as a guest, as a reg user too to make sure the theme is tip-top.

You're in right direction. I dig the color choice. 

[Shades.]

How/where do I give credit for css changes that I've got/will get help with? I've only done small changes myself but I have one or two big ones I'd like to use but I want to give credit to the person(s) who helped without having a bunch of links and copyrights all over the theme?

Also thanks for the tips guys! I've been bookmarking those links!

I still have a lot of work to do I know but I'll keep posting my progress here as I go!

Thanks

[shadav]

I just posted a thank you and a link to where I got some of my edits from in my theme's thread and in a post on my demo site

[TwitchisMental]

How/where do I give credit for css changes that I've got/will get help with? I've only done small changes myself but I have one or two big ones I'd like to use but I want to give credit to the person(s) who helped without having a bunch of links and copyrights all over the theme?

Also thanks for the tips guys! I've been bookmarking those links!

I still have a lot of work to do I know but I'll keep posting my progress here as I go!

Thanks

You can give any credit you feel needed via a comment in the theme post/submission.

Look at my Aurora Theme for example. I have a shout out section in the dedicated thread.

If you have any trouble implementing any changes, just make a topic about it. Tons of the members here are great at sorting out issues.

[Steve]

(Think it'll pass now?)

It appears from the comments after you posted this is that it wouldn't.

BUT, if you were to post this in the Showcase board, I (unless a team member higher up than me stops me) would approve it, provided your post followed the guidelines in the stickied topic.

[Shades.]

Slowly but surely...1 step at a time...heres a new preview with a new smflogo.png.  

As far as the menu buttons...I dunno...might take me a little learning time in order to learn how to work with sprites!

Gonna read up on this thread and see if I can do something with IT too!

[Shades.]

And here is a screenshot of the SMF 2.1.1 version (Had to start over due to the latest upgrades). Not much changed other than a little more css and I added a background to it. Still trying to figure out a different style of buttons.

[TwitchisMental]

And here is a screenshot of the SMF 2.1.1 version (Had to start over due to the latest upgrades). Not much changed other than a little more css and I added a background to it. Still trying to figure out a different style of buttons.

You got this!!

[Shades.]

Any pointers on the site menu buttons would be appreciated. I can't find anything in the tips section that works well with 2.1.1 (not saying there isn't any there, just didn't see one) and I'm not very familiar with that part as I am still a newbie with css.

Thanks!

[Shades.]

In my opinion, I'd rid the menu icons. They don't match the new theme scheme in any way. Something I see on latest 2.1 theme submissions.    https://www.simplemachines.org/community/index.php?topic=578604.msg4096267#msg4096267

-The rounded edges still feels like default. I'd put them at 3px.

Here is a screenshot without the menu icons.

What yall think...with or without?

[TwitchisMental]

In my opinion, I'd rid the menu icons. They don't match the new theme scheme in any way. Something I see on latest 2.1 theme submissions.    https://www.simplemachines.org/community/index.php?topic=578604.msg4096267#msg4096267

-The rounded edges still feels like default. I'd put them at 3px.

Here is a screenshot without the menu icons.

What yall think...with or without?

I think it looks better without the icons. Now maybe make the regular non active menu links have a background aswell.

Something like
 

Code Select Expand

.dropmenu li a {
background: rgb(31,31,31);
background: linear-gradient(180deg, rgba(31,31,31,1) 0%, rgba(40,40,40,1) 100%);
}
You would probably need to adjust the font color too after doing so.

[Mick.]

Without. All day

[Antechinus]

^ ^ This.

[Shades.]

Here it is with the new drop menu.

[TwitchisMental]

Here it is with the new drop menu.

Something is up with that screen shot.. random pixels all over it.  From what I can tell though, looking great.

[Shades.]

Here it is with the new drop menu.

Something is up with that screen shot.. random pixels all over it.  From what I can tell though, looking great.

Yeah this "snip it" tool I have for screenshots is all I have to take delayed screenshots for drop down menus and stuff that moves but the images suck.   Otherwise I just normally use the browsers screen capture which works best.

Are there any browser addons that will take screenshots with the dropdowns activated?

[TwitchisMental]

Here it is with the new drop menu.

Something is up with that screen shot.. random pixels all over it.  From what I can tell though, looking great.

Yeah this "snip it" tool I have for screenshots is all I have to take delayed screenshots for drop down menus and stuff that moves but the images suck.   Otherwise I just normally use the browsers screen capture which works best.

Are there any browser addons that will take screenshots with the dropdowns activated?

I personally use Awesome Screenshot for Firefox.

[Shades.]

Thanks that addon looks awesome!

See how this screenshot looks!?

[TwitchisMental]

Thanks that addon looks awesome!

See how this screenshot looks!?

Much better .

The menu is looking good aswell.

[Shades.]

Here's a few more screenshots.

Note: I just noticed that the option select buttons in scheduled tasks are blue in chrome and FF but grey in edge. Any way I can fix that?
You cannot view this attachment.
You cannot view this attachment.

[Antechinus]

You can "fix" them, to some extent. If you want to make them all the same colour you could use a combination of CSS filters.

For example, if you use filter: saturate(0); they will be grey in any browser. You can also use a sepia and hue-rotate filter to do other tricks with colours. If you are keen to try it I would suggest looking here:https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Just start applying them to a test element and mess around. Best way to get the hang of them. filter: sepia(1) will set them all to sepia as a starting point, then hue-rotate(180deg); (as an example) will change the hue from sepia to something else. You can also play with saturation, contrast, etc.

[Shades.]

You can "fix" them, to some extent. If you want to make them all the same colour you could use a combination of CSS filters.

For example, if you use filter: saturate(0); they will be grey in any browser. You can also use a sepia and hue-rotate filter to do other tricks with colours. If you are keen to try it I would suggest looking here:https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Just start applying them to a test element and mess around. Best way to get the hang of them. filter: sepia(1) will set them all to sepia as a starting point, then hue-rotate(180deg); (as an example) will change the hue from sepia to something else. You can also play with saturation, contrast, etc.

Looks a little outta my ball park at the moment so I'll let it be for another version for now!

One more question...how do I separate the admin menu colors from the main menu colors? Couldn't find any separations in admin.css!

[Shades.]

Hey @Antechinus I adjusted this to include in my themes if you don't mind!?

Code Select Expand

/* ------------------------------------------ */
/* Code for themes/default/index.template.php */
/* ------------------------------------------ */
/* Fixed top bar. */
#top_section {
    position: fixed;
    z-index: 9;
    top: 0;
    right: 0;
    left: 0;
}
/* We definitely do not want floats here. */
#top_section > .inner_wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
/* Allow this to expand, to take up .inner_wrap width. */
#top_info, .welcome {
    float: none;
    flex: 1 0 auto;
}
#top_info {
    padding: 0;
}
#top_info > li {
    margin: 0;
    padding: 5px 1px;
}
/* Maybe put these in one wrapper (would require a template edit). */
#search_form {
    position: absolute;
    top: 100%;
    right: 0;
    flex: none;
    float: none;
    padding: 0 8px 6px;
    background: #222;
    border: solid #1DD431;
    border-width: 0 1px 1px;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 -2px 0 #222, 0 1px 4px rgba(0,0,0,.16);
}
#languages_form {
    display: none;
}
/* Wrapper div for the site menu. */
#site_menu {
    flex: none;
    margin-left: auto;
}
/* Site menu ul. */
#site_nav {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}
/* Site menu button parents. */
#site_nav > li {
    flex: none;
    position: relative;
    margin: 0;
    padding: 5px 1px;
    border: 0 !important;
}
/* To compensate for fixed top bar. */
#footerfix {
    padding-top: 40px;
}
/* Media queries (kill 2.1 RC4 stupid). */
/* Adjust to suit your own preferences. */
@media screen and (max-width: 850px) {
    #footerfix {
        padding-top: 80px;
    }
}
@media screen and (max-width: 720px) {
    #search_form {
        display: block !important;
        border-width: 0 0 1px 1px;
        border-radius: 0 0 0 7px;
    }
}
@media screen and (max-width: 480px) {
    #footerfix {
        padding-top: 100px;
    }
    #site_nav > li {
        width: auto !important;
    }
    #site_nav > li > a {
        padding: 0 7px;
        text-indent: 0;
        border: 1px solid transparent !important;
        border-radius: 4px;
    }
    #site_nav > li > a:hover, #site_nav > li > a:focus {
        border: 1px solid #4a6b8c !important;
    }
}
/* ------------ */
/* End of file. */
/* ------------ */
Opinions please if @Antechinus approves... with or without the top search bar?

[Antechinus]

I don't mind at all. If it's code I've made public you are welcome to adapt it any way you like.

[TwitchisMental]

Hey @Antechinus I adjusted this to include in my themes if you don't mind!?

Code Select Expand

/* ------------------------------------------ */
/* Code for themes/default/index.template.php */
/* ------------------------------------------ */
/* Fixed top bar. */
#top_section {
    position: fixed;
    z-index: 9;
    top: 0;
    right: 0;
    left: 0;
}
/* We definitely do not want floats here. */
#top_section > .inner_wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
/* Allow this to expand, to take up .inner_wrap width. */
#top_info, .welcome {
    float: none;
    flex: 1 0 auto;
}
#top_info {
    padding: 0;
}
#top_info > li {
    margin: 0;
    padding: 5px 1px;
}
/* Maybe put these in one wrapper (would require a template edit). */
#search_form {
    position: absolute;
    top: 100%;
    right: 0;
    flex: none;
    float: none;
    padding: 0 8px 6px;
    background: #222;
    border: solid #1DD431;
    border-width: 0 1px 1px;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 -2px 0 #222, 0 1px 4px rgba(0,0,0,.16);
}
#languages_form {
    display: none;
}
/* Wrapper div for the site menu. */
#site_menu {
    flex: none;
    margin-left: auto;
}
/* Site menu ul. */
#site_nav {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}
/* Site menu button parents. */
#site_nav > li {
    flex: none;
    position: relative;
    margin: 0;
    padding: 5px 1px;
    border: 0 !important;
}
/* To compensate for fixed top bar. */
#footerfix {
    padding-top: 40px;
}
/* Media queries (kill 2.1 RC4 stupid). */
/* Adjust to suit your own preferences. */
@media screen and (max-width: 850px) {
    #footerfix {
        padding-top: 80px;
    }
}
@media screen and (max-width: 720px) {
    #search_form {
        display: block !important;
        border-width: 0 0 1px 1px;
        border-radius: 0 0 0 7px;
    }
}
@media screen and (max-width: 480px) {
    #footerfix {
        padding-top: 100px;
    }
    #site_nav > li {
        width: auto !important;
    }
    #site_nav > li > a {
        padding: 0 7px;
        text-indent: 0;
        border: 1px solid transparent !important;
        border-radius: 4px;
    }
    #site_nav > li > a:hover, #site_nav > li > a:focus {
        border: 1px solid #4a6b8c !important;
    }
}
/* ------------ */
/* End of file. */
/* ------------ */
Opinions please if @Antechinus approves... with or without the top search bar?

Love it with the search bar.

[Shades.]

Last thing how do i separate the colors of the admin buttons to be different colors or blocks than the main navigation buttons? They just don't look right to me all being the same color and/or style i dunno.

[Antechinus]

Use descendants, starting with either #genericmenu or .generic_menu as the parent.

[Shades.]

Use descendants, starting with either #genericmenu or .generic_menu as the parent.

Could you give me an example please and does this need to be in index.css I'm assuming cause I don't see much for colors css other than borders and stuff in admin.css?

[Antechinus]

You need to learn to use the document inspector. Seriously.

That will tell you what CSS is being applied to the element you want to change. If it is being dealt with by the same CSS that handles other elements (which is the case here) you basically copy that to new declarations of your own, then you change the descendant chain to specifically target what you want to target.

Example, for turning the default 2.1 profile/admin/etc menu bar into a similar presentation to the old sidebar menu:

Code Select Expand

/* ----------------------- */
/* Custom sidebar testing. */
/* Adjust @media min-width to suit personal preferences. */
/* There will be a range between sidebar & mobile menus. */
/* In this range, menus will be standard 2.1 drop menus. */
/* @todo - Is it possible to get rid of the 720-480 gap? */
/* ----------------------------------------------------- */
/* Overflow needed due to clear: both; on children. */
@media screen and (min-width: 720px) {
    #admin_content {
        margin: 0 0 0 244px;
        overflow: auto;
    }
    /* Sidebar wrapper. */
    #genericmenu {
        float: left;
    }
    .generic_menu {
        margin: 0;
    }
    /* Top level. */
    #genericmenu .dropmenu > li {
        display: block;
        margin: 0;
    }
    /* Level 2 submenu links, displayed as .cat_bar headers. */
    #genericmenu .dropmenu > .subsections > a {
        padding: 8px 12px 6px 12px;
        background: linear-gradient(#1d242c,#13171b 80%);
        color: #8f7659;
        font-size: 1.125rem;
        font-weight: 400;
        text-shadow: none;
        border: 0 !important;
        border-radius: 6px 6px 0 0 !important;
        box-shadow: none !important;
        pointer-events: none;
    }
    #genericmenu .dropmenu > .subsections:hover > a,
    #genericmenu .dropmenu > .subsections > a.active,
    #genericmenu .dropmenu > .subsections > a.active:hover,
    #genericmenu .dropmenu > .subsections > a.active:focus {
        background: linear-gradient(#1d242c,#13171b 80%) !important;
    }
    /* Level 2 submenu wrappers, displayed as sidebar blocks. */
    #genericmenu .dropmenu > .subsections > ul {
        position: static !important;
        display: block !important;
        margin: 2px 0 6px;
        background: #13171b !important;
        border: 0 !important;
        border-radius: 0;
        box-shadow: inset 0 1px 0 #20272c !important;
        opacity: 1 !important;
    }
    .subsections {
        position: relative;
    }
}
/* ----------------------- */
/* Custom sidebar testing. */
/* @todo - Is it possible to get rid of the 720-480 gap? */
/* ----------------------------------------------------- */
/* Overflow needed due to clear: both; on children. */
@media screen and (max-width: 720px) {
    #main_content_section a[class*="mobile_generic_menu_"] {
        display: block;
        margin: 0 4px 8px;
    }
    div[id^="mobile_generic_menu_"].popup_container {
        display: none !important;
    }
    div[id^="mobile_generic_menu_"][style="display: block;"] {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,.5) !important;
        z-index: 6 !important;
    }
    #genericmenu .popup_window {
        top: 10%;
        max-width: 32em;
        min-height: 60% !important;
        max-height: 80%;
        margin: 0 auto;
        background: #14171b  !important;
        border-radius: 6px 6px 0 0;
    }
    div[id^="mobile_generic_menu_"][style="display: block;"] .popup_heading {
        display: block !important;
        border-radius: 6px 6px 0 0;
    }
    .generic_menu {
        padding: 5px;
    }
    .generic_menu .dropmenu > li {
        display: block;
    }
    .generic_menu .dropmenu > li > a {
        padding: 5px 9px;
    }
    .generic_menu .dropmenu > li ul {
        position: absolute;
        top: 70%;
        right: 2px !important;
        left: auto;
        width: 18.2em;
        padding: .5em;
        border: solid 1px #999;
        border-top-color: #ccc;
        border-left-color: #bbb;
        border-radius: 4px;
        box-shadow: 3px 3px 4px rgba(0,0,0,.3);
    }
    .generic_menu .dropmenu > li > li {
        width: 17em;
    }
    .generic_menu .subsections a::after {
        transform: rotate(90deg);
    }
    .generic_menu .dropmenu ul ul {
        position: static;
        display: block !important;
        width: auto;
        min-width: 0;
        margin: 0 0 4px !important;
        padding: 4px 0;
        background: #0000 !important;
        border-width: 0 0 1px;
        border-radius: 0;
        box-shadow: none !important;
        opacity: 1 !important;
    }
    .generic_menu .dropmenu li li:hover ul {
        background: #14191f !important;
}
    .generic_menu .dropmenu ul ul a {
        padding-left: 33px;
    }
}
/* ---------------------------- */
/* Main menu and profile menus. */
@media screen and (max-width: 480px) {
    #wrapper .menu_icon {
        display: block;
        margin: 0 4px 8px;
    }
    #main_menu .popup_window, #genericmenu .popup_window {
        top: 10%;
        max-width: 32em;
        min-height: 60% !important;
        max-height: 80%;
        background: #14171b !important;
        border: 1px solid #333;
    }
    /* div[id^="mobile_generic_menu_"] .generic_menu, */
    #site_nav, #mobile_user_menu .dropmenu {
        padding: 5px !important;
    }
/* @todo - Some muppetry here! */
    #top_info > li, .dropmenu > li, #top_info > li:hover, .dropmenu > li:hover {
        padding-bottom: 3px;
    }
/* Moar RC4 muppetry here! */
    .dropmenu li a, .dropmenu li a:hover {
        padding: 5px 7px !important;
        text-indent: 0;
    }
    #site_menu .dropmenu > li ul, #main_menu .dropmenu > li ul {
        position: absolute;
        top: 70%;
        right: 2px !important;
        left: auto;
        width: 18.2em;
        padding: .5em;
        border: solid 1px #999;
        border-top-color: #ccc;
        border-left-color: #bbb;
        border-radius: 4px;
        box-shadow: 3px 3px 4px rgba(0,0,0,.3);
    }
    #site_menu .dropmenu > li li, #main_menu .dropmenu > li li {
        width: 17em;
    }
    #genericmenu .subsections ul::after {
        display: none;
    }
    #genericmenu .dropmenu > .subsections > ul::after {
        display: block;
    }
    #genericmenu .subsections .subsections > ul a {
        padding-left: 31px !important;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

[Shades.]

Thanks I am using it lol!

I came up with this while you were posting...

Code Select Expand

.generic_menu {
color: #fff;
font-weight: bold;
border-color: #1DD431;
background: none;
text-shadow: 0 0 2px #000;
}
I'm using the inspector just having trouble learning the right code but I'll get there!

Thanks for the help!

[Shades.]

Example, for turning the default 2.1 profile/admin/etc menu bar into a similar presentation to the old sidebar menu:

Code Select Expand

/* ----------------------- */
/* Custom sidebar testing. */
/* Adjust @media min-width to suit personal preferences. */
/* There will be a range between sidebar & mobile menus. */
/* In this range, menus will be standard 2.1 drop menus. */
/* @todo - Is it possible to get rid of the 720-480 gap? */
/* ----------------------------------------------------- */
/* Overflow needed due to clear: both; on children. */
@media screen and (min-width: 720px) {
    #admin_content {
        margin: 0 0 0 244px;
        overflow: auto;
    }
    /* Sidebar wrapper. */
    #genericmenu {
        float: left;
    }
    .generic_menu {
        margin: 0;
    }
    /* Top level. */
    #genericmenu .dropmenu > li {
        display: block;
        margin: 0;
    }
    /* Level 2 submenu links, displayed as .cat_bar headers. */
    #genericmenu .dropmenu > .subsections > a {
        padding: 8px 12px 6px 12px;
        background: linear-gradient(#1d242c,#13171b 80%);
        color: #8f7659;
        font-size: 1.125rem;
        font-weight: 400;
        text-shadow: none;
        border: 0 !important;
        border-radius: 6px 6px 0 0 !important;
        box-shadow: none !important;
        pointer-events: none;
    }
    #genericmenu .dropmenu > .subsections:hover > a,
    #genericmenu .dropmenu > .subsections > a.active,
    #genericmenu .dropmenu > .subsections > a.active:hover,
    #genericmenu .dropmenu > .subsections > a.active:focus {
        background: linear-gradient(#1d242c,#13171b 80%) !important;
    }
    /* Level 2 submenu wrappers, displayed as sidebar blocks. */
    #genericmenu .dropmenu > .subsections > ul {
        position: static !important;
        display: block !important;
        margin: 2px 0 6px;
        background: #13171b !important;
        border: 0 !important;
        border-radius: 0;
        box-shadow: inset 0 1px 0 #20272c !important;
        opacity: 1 !important;
    }
    .subsections {
        position: relative;
    }
}
/* ----------------------- */
/* Custom sidebar testing. */
/* @todo - Is it possible to get rid of the 720-480 gap? */
/* ----------------------------------------------------- */
/* Overflow needed due to clear: both; on children. */
@media screen and (max-width: 720px) {
    #main_content_section a[class*="mobile_generic_menu_"] {
        display: block;
        margin: 0 4px 8px;
    }
    div[id^="mobile_generic_menu_"].popup_container {
        display: none !important;
    }
    div[id^="mobile_generic_menu_"][style="display: block;"] {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,.5) !important;
        z-index: 6 !important;
    }
    #genericmenu .popup_window {
        top: 10%;
        max-width: 32em;
        min-height: 60% !important;
        max-height: 80%;
        margin: 0 auto;
        background: #14171b  !important;
        border-radius: 6px 6px 0 0;
    }
    div[id^="mobile_generic_menu_"][style="display: block;"] .popup_heading {
        display: block !important;
        border-radius: 6px 6px 0 0;
    }
    .generic_menu {
        padding: 5px;
    }
    .generic_menu .dropmenu > li {
        display: block;
    }
    .generic_menu .dropmenu > li > a {
        padding: 5px 9px;
    }
    .generic_menu .dropmenu > li ul {
        position: absolute;
        top: 70%;
        right: 2px !important;
        left: auto;
        width: 18.2em;
        padding: .5em;
        border: solid 1px #999;
        border-top-color: #ccc;
        border-left-color: #bbb;
        border-radius: 4px;
        box-shadow: 3px 3px 4px rgba(0,0,0,.3);
    }
    .generic_menu .dropmenu > li > li {
        width: 17em;
    }
    .generic_menu .subsections a::after {
        transform: rotate(90deg);
    }
    .generic_menu .dropmenu ul ul {
        position: static;
        display: block !important;
        width: auto;
        min-width: 0;
        margin: 0 0 4px !important;
        padding: 4px 0;
        background: #0000 !important;
        border-width: 0 0 1px;
        border-radius: 0;
        box-shadow: none !important;
        opacity: 1 !important;
    }
    .generic_menu .dropmenu li li:hover ul {
        background: #14191f !important;
}
    .generic_menu .dropmenu ul ul a {
        padding-left: 33px;
    }
}
/* ---------------------------- */
/* Main menu and profile menus. */
@media screen and (max-width: 480px) {
    #wrapper .menu_icon {
        display: block;
        margin: 0 4px 8px;
    }
    #main_menu .popup_window, #genericmenu .popup_window {
        top: 10%;
        max-width: 32em;
        min-height: 60% !important;
        max-height: 80%;
        background: #14171b !important;
        border: 1px solid #333;
    }
    /* div[id^="mobile_generic_menu_"] .generic_menu, */
    #site_nav, #mobile_user_menu .dropmenu {
        padding: 5px !important;
    }
/* @todo - Some muppetry here! */
    #top_info > li, .dropmenu > li, #top_info > li:hover, .dropmenu > li:hover {
        padding-bottom: 3px;
    }
/* Moar RC4 muppetry here! */
    .dropmenu li a, .dropmenu li a:hover {
        padding: 5px 7px !important;
        text-indent: 0;
    }
    #site_menu .dropmenu > li ul, #main_menu .dropmenu > li ul {
        position: absolute;
        top: 70%;
        right: 2px !important;
        left: auto;
        width: 18.2em;
        padding: .5em;
        border: solid 1px #999;
        border-top-color: #ccc;
        border-left-color: #bbb;
        border-radius: 4px;
        box-shadow: 3px 3px 4px rgba(0,0,0,.3);
    }
    #site_menu .dropmenu > li li, #main_menu .dropmenu > li li {
        width: 17em;
    }
    #genericmenu .subsections ul::after {
        display: none;
    }
    #genericmenu .dropmenu > .subsections > ul::after {
        display: block;
    }
    #genericmenu .subsections .subsections > ul a {
        padding-left: 31px !important;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

Wow! I'm way behind...lol

[Antechinus]

Well, it is an example. You asked for one.

[Shades.]

Well, it is an example. You asked for one.

That example is just too awesome looking not to steal/use!   (The way I was going with it looked horrible)


You cannot view this attachment. 

Thanks to everyone who helped me on my first theme! I appreciate all the help, this was a learning experience for me and I couldn't have done it without you all!

I will give credit where credit is due (hopefully I can remember all the css edits I borrowed)!  
I think most of them are in this thread besides 2 or 3 others I have bookmarked.

Now off to finish the final touches and make sure everything works right and I'll see if I can get it approved in the next couple of days.

Thanks again!

[TwitchisMental]

Well, it is an example. You asked for one.

That example is just too awesome looking not to steal/use!   (The way I was going with it looked horrible)


You cannot view this attachment. 

Thanks to everyone who helped me on my first theme! I appreciate all the help, this was a learning experience for me and I couldn't have done it without you all!

I will give credit where credit is due (hopefully I can remember all the css edits I borrowed)!  
I think most of them are in this thread besides 2 or 3 others I have bookmarked.

Now off to finish the final touches and make sure everything works right and I'll see if I can get it approved in the next couple of days.

Thanks again!

The sidebar in the admin cp looks great!

[Antechinus]

That was originally a request for Sir Osis, who hates the default 2.1 menu system. I prefer the sidebar too, and rarely use SMF on a phone. It reverts to the standard 2.1 menus on small screens.

Although the code above was done as a pure CSS override, for running live on this site in a browser add-on (Stylus). For use in a custom theme, where you can edit the templates and javascript, there are cleaner ways of getting the same result.

[Shades.]

Download here!

[Shades.]

@Antechinus here is the screenshot of the responsive menu in admin.

You cannot view this attachment.

[Antechinus]

K. This is what I get with the original, live on this site. Which is how it is supposed to be.
Your issue seems to just be a simple top positioning adjustment, possibly related to admin-specific CSS. Since I don't have admin on this site, I haven't yet tested it in admin. I'll set up 2.1.1 on local this week and take a look.

You cannot view this attachment.

[Antechinus]

BTW, if you want the sub-menus directly underneath the header for that section, like the default 2.1 mobile menu, that is very easy to do. It needs even less CSS than the way I did things, since you can use some of the default code (and just roll your own eye candy).

This is also a good time for me to sort out the clean code version of this trickery. It would be a lot less hassle to work with than the verbose override version I have to use here. A couple of minor template and js file edits, but nothing major.