Jump to content
wgstarks

Share Your Banners

243 posts in this topic Last Reply

Recommended Posts

Posted (edited)

I made a cheezy animated banner for mine.  ahhah with VMs it's bigger on the inside. yes I know boo hiss..

Tardis.png

 

hmm the tardis is suppose to lean to the left and right and the light on top comes on and off.

Edited by Cromz522

Share this post


Link to post

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.

 

 

image.thumb.png.f3f769a803cd2ca11c58819868d237a6.png

Share this post


Link to post
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! 😎

 

 

Share this post


Link to post
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;
}

 

Share this post


Link to post
27 minutes ago, dbinott said:

 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.

Thank you!!

Share this post


Link to post

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);
}

 

Share this post


Link to post
1 hour ago, dbinott said:

Updated buttons

What changed?

Share this post


Link to post
Just now, Joseph said:

What changed?

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

Share this post


Link to post
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.

Share this post


Link to post

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.

Share this post


Link to post
Posted (edited)
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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
On 4/13/2019 at 1:21 AM, Ephoxia said:

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

love it, thank you

Share this post


Link to post

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.