[Preview] Alien_Shades

Started by Shades., January 26, 2022, 03:06:09 PM

Previous topic - Next topic

TwitchisMental

Quote from: Shades. on February 14, 2022, 06:19:01 AMHey @Antechinus I adjusted this to include in my themes if you don't mind!?

/* ------------------------------------------ */
/* 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. :-\
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Antechinus

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

Shades.

Quote from: Antechinus on February 14, 2022, 04:47:42 PMUse 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?
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

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:

/* ----------------------- */
/* 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! :P

I came up with this while you were posting...
.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! 8)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Shades.

Quote from: Antechinus on February 14, 2022, 05:06:45 PMExample, for turning the default 2.1 profile/admin/etc menu bar into a similar presentation to the old sidebar menu:

/* ----------------------- */
/* 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 8)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Antechinus

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

Shades.

Quote from: Antechinus on February 14, 2022, 05:24:48 PM:D :D :D :D :D :D
Well, it is an example. You asked for one.
That example is just too awesome looking not to steal/use! O:)  (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)! :o  ;D
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! 8)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

TwitchisMental

Quote from: Shades. on February 14, 2022, 07:21:29 PM
Quote from: Antechinus on February 14, 2022, 05:24:48 PM:D :D :D :D :D :D
Well, it is an example. You asked for one.
That example is just too awesome looking not to steal/use! O:)  (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)! :o  ;D
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! 8)
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.

ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Shades.

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

You cannot view this attachment.
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

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

Advertisement: