Share Your Banners


wgstarks

Recommended Posts

  • 3 weeks later...
  • 4 weeks later...
9 hours ago, dbinott said:

Took one of the banners from the gallery, used the black theme and then used Stylus chrome plugin to make some css changes. I hate white text on black. Burns the retinas. Will probably change the orange buttons too.

OMG! First, I love, Love, LOVE this!! Its the closest thing I've seen so far that makes me want to upgrade my production unRAID box off of 6.5.3. (See my feature request below about my disappointment with the button/tab colors being too harsh in v6.6) Within my post, @digitalformula mentions something about CSS as well... So tell me, what is this Stylus chrome plugin and how where do I learn about making CSS changes? With a little luck, I might be able to make a few changes to v6.6 myself.  

 

PS. Is there any way you can share your banner/CSS with the community? Its really Slick! 😎

 

 

Link to comment
6 minutes ago, Joseph said:

OMG! First, I love, Love, LOVE this!! Its the closest thing I've seen so far that makes me want to upgrade my production unRAID box off of 6.5.3. (See my feature request below about my disappointment with the button/tab colors being too harsh in v6.6) Within my post, @digitalformula mentions something about CSS as well... So tell me, what is this Stylus chrome plugin and how where do I learn about making CSS changes? With a little luck, I might be able to make a few changes to v6.6 myself.  

 

PS. Is there any way you can share your banner/CSS with the community? Its really Slick! 😎

 

 

Thanks @Joseph. I am a web developer, so CSS is in my tool bag. But you can go and learn the basics pretty much anywhere for free. The banner is in the gallery posted in this thread a few times. The Stylus plugin you can get here https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en

 

and you can pate in the CSS below for your unRAID URL.

 

body {
    color: #6e8f9e;
}

select {
    color: #546e7a;
    background-image: linear-gradient(66.6deg, transparent 60%, #6e8f9e 40%), linear-gradient(113.4deg, #6e8f9e 40%, transparent 60%);
}

#title {
    color: #dedede
}
input[type=text],
input[type=password],
input[type=number],
input[type=url],
input[type=email],
input[type=date],
input[type=file],
textarea,
.textarea {
    color: #6e8f9e;
}
#nav-block #nav-item:focus:after,
#nav-block #nav-item:hover:after {
    background-color: #026cf7;
}
div.jGrowl div.jGrowl-notify {
    overflow: hidden;
    box-shadow: none!important;
}

.blue-text,
a {
    color: #3887f1;
}
.switch-button-background {
    background-color: #4646465e;
    border: 1px solid #aaaaaa1f;
}
.switch-button-background.checked {
    background: #4646465e;
}

 

  • Upvote 1
Link to comment

Updated buttons

 

body {
    color: #6e8f9e;
}

select {
    color: #546e7a;
    background-image: linear-gradient(66.6deg, transparent 60%, #6e8f9e 40%), linear-gradient(113.4deg, #6e8f9e 40%, transparent 60%);
}

#title {
    color: #dedede
}
input[type=text],
input[type=password],
input[type=number],
input[type=url],
input[type=email],
input[type=date],
input[type=file],
textarea,
.textarea {
    color: #6e8f9e;
}
#nav-block #nav-item:focus:after,
#nav-block #nav-item:hover:after {
    background-color: #026cf7;
}
div.jGrowl div.jGrowl-notify {
    overflow: hidden;
    box-shadow: none!important;
}

.blue-text,
a {
    color: #3887f1;
}
.switch-button-background {
    background-color: #4646465e;
    border: 1px solid #aaaaaa1f;
}
.switch-button-background.checked {
    background: #4646465e;
}
input[type=button],
input[type=reset],
input[type=submit],
button,
button[type=button],
a.button {
    backface-visibility: hidden;
    cursor: pointer;
    white-space: nowrap;
    background: rgba(100%, 100%, 100%, 0);
    border-radius: 4px;
    border: 1px solid #3887f1;
    border-width: 1px 1px 1px 1px;
    padding: 9px 18px 9px 18px;
    box-shadow: 0px 1px 0px #535353, 0px 1px 3px rgba(0%, 0%, 0%, 0.3);
    color: #eaeaea;
    text-shadow: 0px -1px 0px rgba(0%, 0%, 0%, 0.4)
}
input:hover[type=button],
input:hover[type=reset],
input:hover[type=submit],
button:hover,
button:hover[type=button],
a.button:hover {
    color: #f2f2f2;
    background: -webkit-gradient(linear, left top, right top, from(#3887f1), to(#5d92d8));
    background: linear-gradient(90deg, #3887f1 0, #5d92d8);
}

 

Link to comment
20 minutes ago, dbinott said:

Changed all the orange buttons. Last 28 lines or so were added.

Ok, so I can fumble my way around your code and with the use of google-fu--if I had to guess--I think I understand that you set it up so when you hover over a button, it turns grey, and at some point there is some sort of gradient of blues when its not grey. (of course, I may be way off)

 

All that to say, I don't understand how unRAID knows what button(s) you're referring too...how does it know you want to replace the orange buttons? Not looking for a lesson in coding... just pointing out how frustrating it is that I didn't learn coding when I was younger. :(

 

 Anyways, thanks for sharing the update.

Link to comment

ok, so with these

input[type=button],
input[type=reset],
input[type=submit],
button,
button[type=button],
a.button 

They all target a particular element on the page. so input button means do this one style for anything that has an input type of button. same for reset or submit. Then there are just button tags <button></button>, so it tells it tun also do the those, button type button I believe is not needed. Then there are specifiers. a means any anchor tag, those are what make the links, then if they have the class of button, do those also.

Link to comment
  • 4 weeks later...
On 4/12/2019 at 7:49 AM, dbinott said:

Took one of the banners from the gallery, used the black theme and then used Stylus chrome plugin to make some css changes. I hate white text on black. Burns the retinas. Will probably change the orange buttons too.

 

 

 

Really nice :)

How do you change the color for the bar under the banner?

How do you get those icons for the dockers? All my icons for dockers and plugins are just blue ones.

And how did you get that layout on the dashboard with the dockers and everything else? Looks nothing like my layout :/

Edited by ProphetSe7en
  • Upvote 1
Link to comment
21 hours ago, ProphetSe7en said:

Rally nice :)

How do you change the color for the bar under the banner?

How do you get this icons for the dockers? All my icons for docers and plugins are just blue ones.

And how did you get that layout on the dashboard with the dockers and everything else? Looks nothing like my layout :/

I don't have remote access to my unraid box cause I can't get openvpn working properly, when I get a chance to, I will post.

 

For the dockers on the dashboard, it's just a setting somewhere. Don't recall where.

  • Upvote 1
Link to comment
Really nice

How do you change the color for the bar under the banner?
How do you get those icons for the dockers? All my icons for dockers and plugins are just blue ones.
And how did you get that layout on the dashboard with the dockers and everything else? Looks nothing like my layout


Could it be that he is running the 6.7-rc release and you are not. The new 6.7 has the new dashboard layout.


Sent from my iPhone using Tapatalk
Link to comment
  • 1 month later...
  • 1 month later...

For my unRAID I tried designing something generic just to make the black menu bar transition a little less harsh with a tiny very quick gradient but it wasn't quite there. So I played with alignment and got a little better but I'm not a real designer so it came up a little tacky and I sort of forgot about the unRAID logo so the colors clash. :/ Still, I had a fun time with it and made an unbranded (as in not customized to myself) to share. :)

 

It's just three wave-looking objects superimposed with a little whatchuwhattachu applied.

 

These are my attempts:

727123473_ScreenShot2019-07-28at08_34_28.thumb.png.0e8d8d7f3ebaea939f466cef67bc0fef.png

In the bottom one the gradient is barely visible but it breaks the harsh line when the banner meets with the menu bar, to disguise it a bit more it's also purposely misaligned; bigger from one side and it isn't true black either, I picked the color from the menu bar. In the end I chose the center one though:

Screen_Shot_2019-07-28_at_08_21_51.thumb.png.c78cf2d90f69257025cefa7ad8c7607c.png

White-label: unBRANDED:

unraid-banner-center-unBRANDED.thumb.png.870a6679cf068d41c39735ade26751a5.png

 

...and the original if you happen to like it. :)

unraid-banner.afdesignunraid-banner.svg

If you want to match the font, it's a slightly modified (A, R & K) San Francisco UI from Apple, the exact name is SF UI Display Ultralight.

 

I really like the pattern/texture ones, there's one that reminds one of the stock wallpapers of Red Hat's GNOME desktop:

On 4/12/2019 at 11:21 PM, Ephoxia said:

Here is my banner. Think it fits unraid well!
banner.thumb.png.5098184cb3fcfffc9ae951ac40ed893a.png

On 6/14/2019 at 7:40 PM, cybrnook said:

Shatter_2.thumb.png.cf2dda30b42da429390049099c13bbe0.png

 

Shatter_1.thumb.png.a93e1c2f3db47a9f46adecdf85d70117.png

 

image.thumb.png.4287db7cc2ac9364713c23eaef4b1993.png

On 8/31/2017 at 5:14 PM, Gone Crazy said:

Here is the one I came up with, love it with the black theme

 

 

Unraid Banner - Scooby.png

 

That last one just looks fun. ❤️

Edited by vitaprimo
  • Like 2
Link to comment
  • 5 weeks later...

Here is my attempt. Just started down this road and am still within the trial and am waiting for my first disc to preclear. I was able to remove the graphic with the help of SpaceInvaderOne, but no luck in removing the pesky version text. Would LOVE to have it on the right somewhere with all of the pertinent data. Would love to change all of the text everywhere to the blue hex I've chosen here. A couple more additions on the Display Settings page would be great!

 

image.thumb.png.ab8b71d14d783268e95810754833b7e6.png

  • Like 2
Link to comment

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.