News:

Wondering if this will always be free?  See why free is better.

Main Menu

[Preview] Alien_Shades

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

Previous topic - Next topic

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

#1
Quote from: Shades. on January 26, 2022, 03:06:09 PMNothing 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 8)
Looking good so far. One suggestion if I may, I would adjust that text-shadow color on the navigation section/breadcrumb area text.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Shambles

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

Shades.

Quote from: TwitchisMental on January 26, 2022, 05:19:23 PMLooking 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?

Quote from: Shambles on January 26, 2022, 05:53:53 PMI think it looks fantastic. Green on black is what I've used for the past 45 years in IT ;)
Thank you! 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 January 26, 2022, 07:27:05 PM
Quote from: TwitchisMental on January 26, 2022, 05:19:23 PMLooking 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?

Quote from: Shambles on January 26, 2022, 05:53:53 PMI think it looks fantastic. Green on black is what I've used for the past 45 years in IT ;)
Thank you! 8)
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 -
.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.

text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Shades.

Quote from: TwitchisMental on January 26, 2022, 07:41:51 PM
Quote from: Shades. on January 26, 2022, 07:27:05 PM
Quote from: TwitchisMental on January 26, 2022, 05:19:23 PMLooking 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?

Quote from: Shambles on January 26, 2022, 05:53:53 PMI think it looks fantastic. Green on black is what I've used for the past 45 years in IT ;)
Thank you! 8)
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 -
.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.

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

Steve

Quote from: Shades. on January 26, 2022, 03:06:09 PMNot 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.
Please do not PM me for support.

Mick.

Quote from: Steve on January 27, 2022, 07:11:53 AM
Quote from: Shades. on January 26, 2022, 03:06:09 PMNot 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  :P 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

Quote from: shadav on January 27, 2022, 02:10:48 PMplay 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  :P 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 :).
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Steve

Quote from: Mick. on January 27, 2022, 08:16:00 AMI believe variants are not allowed.
Then why is there a curve variants option when searching for themes?
Please do not PM me for support.

Mick.

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

Ricky.

Quote from: Steve on January 28, 2022, 02:36:33 PM
Quote from: Mick. on January 27, 2022, 08:16:00 AMI 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

Quote from: Steve on January 28, 2022, 02:36:33 PM
Quote from: Mick. on January 27, 2022, 08:16:00 AMI 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.

#14
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?) O:)
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 January 28, 2022, 10:54:52 PMOk I added some board icons and fixed the text shadows so let me know what you think about this...

(Think it'll pass now?) O:)
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.



My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

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

Shades.

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

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

Quote from: Shades. on January 28, 2022, 11:40:31 PMHow/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 8)
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.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Steve

Quote from: Shades. on January 28, 2022, 10:54:52 PM(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.
Please do not PM me for support.

Shades.

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

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

Gonna read up on this thread and see if I can do something with IT too! O:)
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.

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.
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 12, 2022, 07:13:27 PMAnd 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!!



My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

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

Thanks! 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: Mick. on January 28, 2022, 11:23:14 PMIn 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.  :-X  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?
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 13, 2022, 01:22:25 PM
Quote from: Mick. on January 28, 2022, 11:23:14 PMIn 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.  :-X  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
 
.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.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Mick.


Antechinus


Shades.

Here it is with the new drop menu. ;)
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 13, 2022, 05:10:27 PMHere 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.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Shades.

Quote from: TwitchisMental on February 13, 2022, 05:23:43 PM
Quote from: Shades. on February 13, 2022, 05:10:27 PMHere 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?
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 13, 2022, 05:37:11 PM
Quote from: TwitchisMental on February 13, 2022, 05:23:43 PM
Quote from: Shades. on February 13, 2022, 05:10:27 PMHere 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.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Shades.

Thanks that addon looks awesome! ;D

See how this screenshot looks!?
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 13, 2022, 05:53:18 PMThanks that addon looks awesome! ;D

See how this screenshot looks!?
Much better .

The menu is looking good aswell.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

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

Quote from: Antechinus on February 13, 2022, 10:07:16 PMYou 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! O:)

One more question...how do I separate the admin menu colors from the main menu colors? Couldn't find any separations 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

Shades.

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

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

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.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

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!
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

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: