[Preview] Alien_Shades

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

Previous topic - Next topic

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.
My pet rock is not feeling well. I think it's stoned.

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




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.

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.

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.

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.

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.

Advertisement: