4.2 ACP Login Background

[Joey_M]

Is there a way to change the colour in 4.2 from the dark blue? Perhaps even to a gradient?

[Joey_M]

Any help folks? It would be appreciated.

I can see from the inspect tool the following CSS, yet I can't get it work even by adding it to all of my themes.

body#elLogin {
    background: rgb(67,134,196);
    background: -moz-linear-gradient(-45deg, rgba(67,134,196,1) 0%, rgba(64,95,124,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(67,134,196,1) 0%,rgba(64,95,124,1) 100%);
    background: linear-gradient(135deg, rgba(67,134,196,1) 0%,rgba(64,95,124,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4386c4', endColorstr='#405f7c',GradientType=1 );
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    padding-top: 0;
}

 

[steve00]

8 hours ago, Joey_M said:

Any help folks? It would be appreciated.

I can see from the inspect tool the following CSS, yet I can't get it work even by adding it to all of my themes.

body#elLogin {
    background: rgb(67,134,196);
    background: -moz-linear-gradient(-45deg, rgba(67,134,196,1) 0%, rgba(64,95,124,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(67,134,196,1) 0%,rgba(64,95,124,1) 100%);
    background: linear-gradient(135deg, rgba(67,134,196,1) 0%,rgba(64,95,124,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4386c4', endColorstr='#405f7c',GradientType=1 );
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    padding-top: 0;
}

 

Have you tried adding to custom.css as works for me:

body#elLogin {
  background: green;
}

obviously change background to your own requirements

[Joey_M]

2 hours ago, steve00 said:

Have you tried adding to custom.css as works for me:

body#elLogin {
  background: green;
}

obviously change background to your own requirements

Oddly, I had tried using the above code by adding it to the custom.css and it didn't work.

I used yours and it worked.

So I cut the other parts of the code I found and just replaced the background part, it works fine now. Thank you.

[Joey_M]

@steve00: Do you happen to know if it's possible to replace the login image via CSS?

Everytime I upgrade, I have to re-upload my replacement image (despite deleting the upload folder).

[Steph40]

@Joey_M

If you have an extra 10$ I use this and it is nice and easy:

 

[Joey_M]

2 minutes ago, Steph40 said:

@Joey_M

If you have an extra 10$ I use this and it is nice and easy:

 

Does this allow you to organise the tabs better also?

i.e you can move a main tab into a secondary position? I don't know why IPS hasn't added this by default but that does look awesome.

[Steph40]

1 minute ago, Joey_M said:

Does this allow you to organise the tabs better also?

Not sure what you mean by tabs? widgets?

[Joey_M]

Pages, System, Community, Members etc

My list of added applications is quite long now and I hate how I can only reorder them, instead of placing certain ones just inside secondary tabs to reduce the size/ease of use. Does this allow for that?

[Steph40]

2 minutes ago, Joey_M said:

My list of added applications is quite long now and I hate how I can only reorder them, instead of placing certain ones just inside secondary tabs to reduce the size/ease of use. Does this allow for that?

I just login in my site to check and unless I missed a setting somewhere No it does not. It would be nice though.

@All Astronauts do you think you could add that feature?

[Joey_M]

I'd purchase this for sure if @All Astronauts was able to add it.

Like I wrote, I'm surprised IPS haven't already added it. I see little point to the ordering ability, yeah its nice but if you can move between - it sort of makes it a bit pointless.

[CP_User]

Recommend Jackals too -

 

[Steph40]

3 hours ago, CP_User said:

Recommend Jackals too -

 

Oh ya that one changes the background too, forgot about that, I use it for other things lol

[steve00]

15 hours ago, Joey_M said:

@steve00: Do you happen to know if it's possible to replace the login image via CSS?

Everytime I upgrade, I have to re-upload my replacement image (despite deleting the upload folder).

What login image exactly

[Joey_M]

8 hours ago, steve00 said:

What login image exactly

The logo above the login box Steve, its by default IPS'.

[Pete T]

32 minutes ago, Joey_M said:

The logo above the login box Steve, its by default IPS'.

The problem is when upgrade will rerun the script so any deleted default images going be added again so only way is add blank image should fix the issue but not tested it.

[Mark Round]

It's in the Phtml  templates joey. I can give you some help here if you need

[steve00]

Edited. Misread your question

[Joey_M]

On 7/24/2017 at 8:39 PM, Mark Round said:

It's in the Phtml  templates joey. I can give you some help here if you need

Would you be able to tell me where to find it Mark?

[Mark Round]

You have to edit the files in ftp for your theme in the themes folder. It can't be done in your acp.There are different ones for each aspect of the admin side . I'm away on holiday at the moment so my time is limited mate sorry.

[steve00]

9 hours ago, Joey_M said:

Would you be able to tell me where to find it Mark?

can be done using css save messing with templates

[Mark Round]

19 minutes ago, steve00 said:

can be done using css save messing with templates

Ok then mate crack on , I'll leave this to the experts .

[steve00]

16 minutes ago, Mark Round said:

Ok then mate crack on , I'll leave this to the experts .

Definitely not expert (you do themes yourself and know more than I do, wish I could add some of things you have in yours without touching templates)

First you would need to upload a logo/image to the Manage Resources area of theme you have set for the default admincp

then in custom.css of the admincp default theme add:

.cAcpLoginBox_logo {
background: url({resource="logo.png" app="core" location="custom"}) no-repeat;
  height: 100px;
}

.cAcpLoginBox_logo img {
  display: none;
}

obviously change the resource to what is given in your Manage Resources after uploading logo (don't forget to add the height as per the above css to your image height)

Once all done and saved then should end up with similar to:

NOTE: Might have to hard refresh before it will work but once it does then should always work

Let me know if works for you

[Mark Round]

I think I just look at the complicated approach and sometimes miss  the easy fix haha

[steve00]

14 minutes ago, Mark Round said:

I think I just look at the complicated approach and sometimes miss  the easy fix haha

Easily done, hope it helps you

If only could do some of your changes/additions without touching templates .. but will keep trying (apparently am very trying ... according to my wife ...