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




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: