Jump to content
Alexwerilles

Color

Recommended Posts

Alexwerilles

1 -  any way to change the texts when I move the mouse over the icon? This for example: "Manage Emby Server"

2 -any way to also change the text "Emby" that appears in the browser guide? I found a tutorial here, but it is old and does not seem to work

3 - any way to also change everything that is green in the settings panel?

4 - and the last thing. How to change the check box for the option "Remember me" from green to red. And also remove the "Cancel" button on the login page. I tried removing it by deleting the option in manuallogin.html, but it didn't resolve

print7.jpg

print8.jpg

print9.jpg

print9.jpg

Share this post


Link to post
Share on other sites
Happy2Play
3 hours ago, Alexwerilles said:

1 -  any way to change the texts when I move the mouse over the icon? This for example: "Manage Emby Server"

Easiest route is updating the language translations json in "\system\dashboard-ui\modules\common\strings" folder, but you would have to do with every update.  Note there are three different string folders with translation files.

Not positive if can be done with css.

4 hours ago, Alexwerilles said:

2 -any way to also change the text "Emby" that appears in the browser guide? I found a tutorial here, but it is old and does not seem to work

Did you do this?

5 hours ago, Alexwerilles said:

3 - any way to also change everything that is green in the settings panel?

Did you try the alternative option here as it would have done the everywhere instead of doing specific elements. or just these as this route is a lot less work will make previous work redundant.

html:root {
    --theme-primary-color: red;
    --theme-accent-text-color: red;
    --theme-primary-color-lightened: red;
    --theme-icon-focus-background: rgba(255, 0, 0, 0.2);
}

 

5 hours ago, Alexwerilles said:

4 - and the last thing. How to change the check box for the option "Remember me" from green to red. And also remove the "Cancel" button on the login page. I tried removing it by deleting the option in manuallogin.html, but it didn't resolve

Same as three but if you really want to do each element I can. Let me know.

As for the Cancel button on manual login, without page ids it is almost impossible to only target that button. But editing the actual manuallogin.hmtl works fine.

manual.thumb.jpg.95812d09f2c26349568f435d6bc9f1d7.jpg

Share this post


Link to post
Share on other sites
Alexwerilles
1 hour ago, Happy2Play said:

O caminho mais fácil é atualizar as traduções de idioma json na pasta "\ system \ dashboard-ui \ modules \ common \ strings", mas você terá que fazer com todas as atualizações. Observe que há três pastas de strings diferentes com arquivos de tradução.

Não tenho certeza se pode ser feito com css.

Você fez isso ?

Você tentou a opção alternativa aqui  , pois teria feito em todos os lugares em vez de fazer elementos específicos. ou apenas estes, uma vez que esta rota é muito menos trabalhosa, tornará o trabalho anterior redundante.


 

O mesmo que três, mas se você realmente quiser fazer cada elemento, eu posso. Avise-se me.

Quanto ao botão Cancelar no login manual, sem os ids de página é quase impossível direcionar apenas esse botão. Mas editar o manuallogin.hmtl real funciona bem.

manual.thumb.jpg.95812d09f2c26349568f435d6bc9f1d7.jpg

on the desktop everything was perfect. Thank you!

I will do a test on the mobile browser

Share this post


Link to post
Share on other sites
Alexwerilles
Posted (edited)
10 hours ago, Happy2Play said:

Alternative route looks like a easier method is via html:root as most areas are using theme base.  Test only this code for color based areas.  Some themes have slightly different variables, this if from dark with your red changes.


html:root {
    --theme-primary-color: red;
    --theme-text-color: rgba(255, 255, 255, .87);
    --theme-text-color-opaque: #fff;
    --theme-accent-text-color: red;
    --theme-primary-color-lightened: red;
    --theme-icon-focus-background: rgba(255, 0, 0, 0.2);
    --theme-background: #141414;
    --button-background: #242424;
    --header-background: #141414;
    --footer-background: #1d1d1d;
    --theme-body-secondary-text-color: rgba(255, 255, 255, .6);
    --line-background: rgba(255, 255, 255, .08);
    --line-size: .13em;
    --scrollbar-thumb-background: rgba(255,255,255,.3);
}

All display: none items will be needed for removed items from previous code

Note not all items are needed here but I just copied all of root  for Dark theme and made minor changes, you can leave out some variables so they are theme dependent.

 

It looks great with this code, everything is red, without having to change one by one. However, in the user settings menu, all green options remain. The options when clicked turn green, instead of red.

 

 

 

22.jpeg

11.jpeg

Edited by Alexwerilles

Share this post


Link to post
Share on other sites
Happy2Play
Posted (edited)
4 minutes ago, Alexwerilles said:

It looks great with this code, everything is red, without having to change one by one. However, in the user settings menu, all green options remain. The options when clicked turn green, instead of red.

I don't understand. Even changed theme to Light 

dashboard.thumb.jpg.7a8b0f5b7d26b09ce1e5a3324175e2bf.jpg

 

Edited by Happy2Play

Share this post


Link to post
Share on other sites
Happy2Play

Okay that footer is in mobile or touch screen mode only so let me set a emulator and see what I come up with.

Share this post


Link to post
Share on other sites
Alexwerilles

Yes, I forgot to say that it is only on the cell phone.

Share this post


Link to post
Share on other sites
Happy2Play
Just now, Alexwerilles said:

Yes, I forgot to say that it is only on the cell phone.

Testing this, can you clear your browser cache and see if you get the same results?

mobile.thumb.jpg.6a21551b0f242e95099eafcdb6e330c5.jpg

Share this post


Link to post
Share on other sites
Alexwerilles
12 minutes ago, Happy2Play said:

Testando isso, você pode limpar o cache do navegador e ver se obtém os mesmos resultados?

mobile.thumb.jpg.6a21551b0f242e95099eafcdb6e330c5.jpg

I cleared the cache and it didn't work. As I understand it, it only works with an administrator account. In an ordinary user account, those parts remain green.

But there's no problem.

How can I remove some options from the settings menu (display, home, etc.) leaving only a few and adding other options? Is there a possibility? (only for non-admin users)

Share this post


Link to post
Share on other sites
Happy2Play
1 minute ago, Alexwerilles said:

I cleared the cache and it didn't work. As I understand it, it only works with an administrator account. In an ordinary user account, those parts remain green.

But there's no problem.

How can I remove some options from the settings menu (display, home, etc.) leaving only a few and adding other options? Is there a possibility? (only for non-admin users)

You can't it is all or none, that I know of.  But what are you wanting removed?

As for mobile I am not sure as it works for me with only this for admin and users.

html:root {
    --theme-primary-color: red;
    --theme-accent-text-color: red;
    --theme-primary-color-lightened: red;
    --theme-icon-focus-background: rgba(255, 0, 0, 0.2);
}

I see this currently does not apply to 4.4.3.0. Sorry look like this will only apply to 4.5 and I forgot to see which system I am testing on. 

Will look for the mobile code.

Share this post


Link to post
Share on other sites
arrbee99

Can I just ask - this html stuff is just pasted into the css box or its more complicated than that ?

Share this post


Link to post
Share on other sites
Happy2Play
1 minute ago, arrbee99 said:

Can I just ask - this html stuff is just pasted into the css box or its more complicated than that ?

Since the elements are using theme based code starting in 4.5 you can change all element using that theme code as I posted above.  So you could change all colors with just those lines.  Just have to ensure you remove all current code.   Have not test on which code will override the other yet.

  • Like 1

Share this post


Link to post
Share on other sites
Alexwerilles
14 minutes ago, Happy2Play said:

You can't it is all or none, that I know of.  But what are you wanting removed?

 

I want to remove the "display" and "home" options

I saw some servers that removed these options and they put a custom one in place (button for another website, for example)

Share this post


Link to post
Share on other sites
arrbee99
16 minutes ago, Happy2Play said:

Since the elements are using theme based code starting in 4.5 you can change all element using that theme code as I posted above.  So you could change all colors with just those lines.  Just have to ensure you remove all current code.   Have not test on which code will override the other yet.

Thanks. Sounds promising. I assume remove all current code means remove all current code that applies to colours...

Share this post


Link to post
Share on other sites
Happy2Play
19 minutes ago, Alexwerilles said:

I want to remove the "display" and "home" options

I saw some servers that removed these options and they put a custom one in place (button for another website, for example)

You can remove them but it apply to everyone.  As for custom it is hard to say, but probably edited the html.

This should cover your problem areas.

a.navMenuOption-selected {
    background-color: rgba(255,0,0,.2)!important;
    color: red;
}

a.emby-tab-button-active {color: red;}

input.emby-checkbox:checked+span:before {
    border-color: red;
    background-color: red;
}

a.button-link {color: red;}

input.emby-input:focus, .emby-textarea:focus {border-color: red;}

button.button-submit:not(.emby-button-tv), button.button-submit:not(.emby-button-tv):focus {background: red;}
button.emby-button {outline-color: red;}

 

Share this post


Link to post
Share on other sites
Happy2Play
Posted (edited)
26 minutes ago, arrbee99 said:

Thanks. Sounds promising. I assume remove all current code means remove all current code that applies to colours...

Correct, easiest way to test is to have a beta test machine and just try the code snippet mentioned above.

 

Like now those 5 lines of code would replace over 40+ lines required in this topic.

Edited by Happy2Play
  • Like 1

Share this post


Link to post
Share on other sites
Alexwerilles
32 minutes ago, Happy2Play said:

You can remove them but it apply to everyone.  As for custom it is hard to say, but probably edited the html.

 

yes, there is no problem deleting for everyone. Can you tell me which file?

Share this post


Link to post
Share on other sites
Happy2Play
1 minute ago, Alexwerilles said:

yes, there is no problem deleting for everyone. Can you tell me which file?

Can you show a screenshot so I am sure we are talking about the same screen.

Share this post


Link to post
Share on other sites
Alexwerilles
8 minutes ago, Happy2Play said:

Você pode mostrar uma captura de tela, então tenho certeza que estamos falando da mesma tela.

"display" and "home", these two buttons

If could replace it, put a button redirecting to a link, it would be great

 

is this the correct code to remove "Emby Web"?

Quote

 

div.dynamicRoutes h3:nth-child(7) {display: none;} /*Remove "Emby Web header" on User icon screen*/

div.dynamicRoutes h3:nth-child(9) {display: none;} /*Remove "Emby Web header" on User icon screen*/

 

 

33.jpg

Share this post


Link to post
Share on other sites
arrbee99

That html thing is working well so far. The only thing it doesn't change is the green 'Emby server is up to date' tick box.

Share this post


Link to post
Share on other sites
arrbee99

Think I prefer blue -

html:root {
    --theme-primary-color: #5d7e9b;
    --theme-accent-text-color: #5d7e9b;
    --theme-primary-color-lightened: #5d7e9b;
    --theme-icon-focus-background: rgba(0, 0, 255, 0.2);
}

Share this post


Link to post
Share on other sites
Happy2Play
2 minutes ago, Alexwerilles said:

"display" and "home", these two buttons

33.jpg

a[title="Display"], a[title="Home Screen"] {display: none !important;}

 

6 minutes ago, Alexwerilles said:

is this the correct code to remove "Emby Web"?

Quote

div.dynamicRoutes h3:nth-child(7) {display: none;} /*Remove "Emby Web header" on User icon screen*/

div.dynamicRoutes h3:nth-child(9) {display: none;} /*Remove "Emby Web header" on User icon screen*/

 

Yes as it will cover the user "Allow this user to change their password and profile image" setting enabled or disabled.

 

9 minutes ago, Alexwerilles said:

If could replace it, put a button redirecting to a link, it would be great

Here is a quick addition to the user icon settings page, still haven't figure out the maindrawer.

Similar to here

 quick and dirty add to settings.html

Quote

<div is="emby-scroller" class="view flex flex-direction-column scrollFrameY flex-grow" data-mousewheel="true" data-horizontal="false" data-centerfocus="card">
    <div class="scrollSlider flex-grow flex-direction-column padded-left padded-right padded-top-page padded-bottom-page settingsContainer">
        <div class="readOnlyContent" style="margin: 0 auto;">

            <a is="emby-linkbutton" class="raised emby-button" href="https://github.com/MediaBrowser" target="_blank" style="padding-left: 0;">${LinkGithub}</a>

            <div class="dynamicRoutes">
            
            </div>

            <p class="appInfo secondaryText" style="text-align:center;"></p>
        </div>
    </div>
</div>

settings.thumb.jpg.3a4aa83bc7d22892dfdf68e5ad8337b5.jpg

Share this post


Link to post
Share on other sites
Happy2Play
16 minutes ago, arrbee99 said:

That html thing is working well so far. The only thing it doesn't change is the green 'Emby server is up to date' tick box.

Yep this one requires its own code, but still a lot less code to worry about.

  • Like 1

Share this post


Link to post
Share on other sites
Alexwerilles
18 hours ago, Happy2Play said:

Yes as it will cover the user "Allow this user to change their password and profile image" setting enabled or disabled.

It keeps showing up here, I don't know why

44.jpg

Share this post


Link to post
Share on other sites
Happy2Play
5 minutes ago, Alexwerilles said:

It keeps showing up here, I don't know why

44.jpg

That is not the same location.  One is on the user settings page that is a docked drawer menu.

div.mainDrawer.scrollY.scrollY-mini.mainDrawer-open-full.mainDrawer-docked h3:nth-child(8) {display: none;}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...