Jump to content

Improved Branding/Customisation


Sarge

Recommended Posts

Hi All,

 

I raised this by email but thought I'd put it here to get any additional +1s.

 

We’ve made some customisations to the CSS for the SelfDestruct portal and will be doing so to the PasswordReset Portal.

Upgrades currently overwrite these customisations and require the customisations to be put back in place with each upgrade, this isn't as simple as a copy and paste, as we need to ensure nothing in the original CSS has changed that will break the customisations.

 

It would be nice to have access to the CSS and embedded styles, and for the customisations to be remembered across upgrades. 
This would allow far greater flexibility in customisations and branding; and remove the need to reapply and test customisations with each upgrade.

 

I'd suggest moving each CSS into the database, and then have a new system setting section dedicated to branding/customisations.

 

Currently the base colour sets the page background for the login/logout screens; we'd rather have this set to a colour other than the base colour, but the only way to achieve this is to modify the CSS. This, and the ability to customise the button colours on the portals is an example of greater flexibility for the customers branding requirements that this feature request could achieve.


Part of this request would be confirmation in the change log of any changes to styles that have occurred as part of the upgrade.

Link to comment
Share on other sites

Hi Sarge,

 

Thanks for your request. Could you provide an example of the CSS code you are modifying here?

 

When you refer to "Currently the base colour", are you referring to the Self Destruct or Password Reset Portal still, or the logins screens in Passwordstate?

Thanks

Click Studios

Link to comment
Share on other sites

46 minutes ago, support said:

When you refer to "Currently the base colour", are you referring to the Self Destruct or Password Reset Portal still, or the logins screens in Passwordstate?

 

In the context of my post it was for the Passwordstate login screens.

At one stage we were also hiding some elements on the login screens via the CSS as well as changing the headerTable to force a different background colour (thus overriding the base colour it inherits).

 

46 minutes ago, support said:

Thanks for your request. Could you provide an example of the CSS code you are modifying here?

 

Minimal at this stage because it becomes to difficult to verify lots of changes after each upgrade, but at this stage.

Body Background, btn-info Background & Border Colour, btn-info:hover Background & Border Colour.

body {
    padding: 3em 15px;
    background: #ffffff;
    /*background: rgb(93,101,144);  Old browsers 
    background: -moz-linear-gradient(-45deg,  rgba(93,101,144,1) 0%, rgba(54,169,225,1) 100%);  FF3.6-15 
    background: -webkit-linear-gradient(-45deg,  rgba(93,101,144,1) 0%,rgba(54,169,225,1) 100%);  Chrome10-25,Safari5.1-6 
    background: linear-gradient(135deg,  rgba(93,101,144,1) 0%,rgba(54,169,225,1) 100%);  W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d6590', endColorstr='#36a9e1',GradientType=1 );  IE6-9 fallback on horizontal gradient */

    /*  display: table;*/
    font-family: "Raleway", sans-serif;
}
.btn-info {
    color: #fff;
    background-color: #003255;
    border-color: #003255;
}
.btn-info.focus, .btn-info:focus, .btn-info:hover {
    background-color: #00C8C8;
    border-color: #00C8C8;
}

 

Link to comment
Share on other sites

I've just done some quick testing in the main site, and this should be possible with us adding one line of code into one of our classes.

 

So if you were to include your own css file called /App_Themes/custom.css, then this would apply to all pages in the core product. You will need to include the '!important' rule on all your css attributes so they take precedence over ours, but it seems to work nicely.

If we add this in though, it would be one css file for the whole site - so if you were to change the base color, it would change for all pages, just not the login screens. Trying to provide custom css for each individual page would be a considerable amount of work.

 

The Self Destruct and Reset Portal would be the same concept with this custom.css file. Because you add this file yourself, no upgrades will touch this.

Regards

Click Studios

Link to comment
Share on other sites

Actually, maybe for the login screens we could change the name of the css from BaseColor to LoginScreenBaseColor, and then you can have different css for these screens as well.

 

Also, did you know you can now also use a background image on all logins screens - this would negate the custom css on these screens if you would prefer to use that.

Regards

Click Studios

Link to comment
Share on other sites

17 hours ago, support said:

Trying to provide custom css for each individual page would be a considerable amount of work.

 

Yep it sure would be :), however it would be my preference.

15 hours ago, support said:

Actually, maybe for the login screens we could change the name of the css from BaseColor to LoginScreenBaseColor, and then you can have different css for these screens as well.

 

There was other things we changed in the CSS on the login screens and log out screens. I'll try and find the old CSS we used as it was somewhat substantial changes, more than just BaseColor.

Link to comment
Share on other sites

Found it....

We stopped with the custom CSS when we went to v8 because it become to difficult to keep verifying changes.

So it would be nice to be able to get these changes back, but on a per-page basis. I understand its a lot of leg work and you've already got a lot in the pipeline for this year.

/* Start Changes */
/* Changes made to adjust Logo TR to be White, while keeping existing base color specified in Admin Control Panel */
/* This ensures the logo fits the color scheme */
 
/* keeps the specified base color in Admin Control panel on the login and logout screens. This effectively overwrites what is set in Admin Control Panel. Ensure you update the color when you change base color in admin control panel.*/
td.BaseColor {
    background-color:#22428C !important;
}
 
/* sets the background color of the login and log out screens white, overwritting what we set in the admin control panel. */
body.BaseColor {
    background-color:white !important;
}
 
/* Hides the "Forms Based Authentication" text on the index page and the Company - Password Manager text on the loggedoutpopup.aspx page. */
div.title2 {
    font-size:0px !important;
}
   
/* The below changes target individual element IDs to adjust color. By default these where all white - which blended in with the Body.BaseColor change above */
  
#BuildDiv {
    color: #C0C0C0 !important;
}
  
#ActiveUsersTD {
    color: black !important;
}
  
#A2 {
    color: black !important;
}
  
#NewBuildLabel {
    color: #545454 !important;
}
  
#MaintenanceModeDiv {
    color: red !important;
}
  
#A5 {
    color: red !important;
}
  
#QueuedEmailsDiv a:link {
    color: red !important;
}
  
#QueuedEmailsDiv a:visited {
    color: red !important;
}
#PendingAccessRequestsDiv {
    color: black !important;
}
 
#A1 {
    color: black !important;
}
  
/* END Changes */

 

Link to comment
Share on other sites

7 minutes ago, support said:

Per page CSS would require us to update all 492 pages in Passwordstate, so this is unlikely to happen sorry - unless we have a lot of customers who also need this level of customization for all pages in Passwordstate.

 

Thats a lot of pages!

Lets go with the custom.css for now, plus maybe a seperate one for login / log out page?

Link to comment
Share on other sites

Just a heads up that Build 8519 is just getting compiled as we speak, and this build will be uploaded in a couple of hours.  You'll find information on customizing CSS files on all branding pages as soon as you get a chance to upgrade to this build.

 

Sarge, I'll send you a personal email as soon as these source files are live:)

 

Regards,

Support.

Link to comment
Share on other sites

1 hour ago, support said:

Just a heads up that Build 8519 is just getting compiled as we speak, and this build will be uploaded in a couple of hours.  You'll find information on customizing CSS files on all branding pages as soon as you get a chance to upgrade to this build.

  

Sarge, I'll send you a personal email as soon as these source files are live:)

  

Regards,

Support.

 

Thanks guys, thats awesome.

Won't get a chance to upgrade until next week as today I'm still performance an RFC and finalising the migration to the new webserver and SQL cluster; I still have to convert to AD auth.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...