I have a requirement from a client to add functionality to a MVC/Bootstrap web application to allow the user to design their portal page to fit their company branding colors on form elements such as buttons, links etc. I'm not sure how to implement this. My thought is to save the elements and colors to a db table with a fk to [user]. Then somehow dynamically create a css file and save it to local storage and then inject the user-specific css into the page onload. Any help/guidance would be appreciated.
6
-
Well localstorage is only on one computer...not sure how that will help their entire company.epascarello– epascarello2016-03-08 22:05:08 +00:00Commented Mar 8, 2016 at 22:05
-
As far as I know that would work because it would be based on a user login and not a company shared login. Each user would be required to set their own branding colors as it stands now.Tim– Tim2016-03-08 22:06:19 +00:00Commented Mar 8, 2016 at 22:06
-
localstorage is for a single browser. Does every user at the company use one computer and the same user account with the same browser?epascarello– epascarello2016-03-08 22:06:52 +00:00Commented Mar 8, 2016 at 22:06
-
4The solution would be to save the styles in a form, post the form to the server and save it to a file. Look for the "company" css files and send that down to the client when the page renders. All it is a simple theme CSS file.epascarello– epascarello2016-03-08 22:09:19 +00:00Commented Mar 8, 2016 at 22:09
-
I like the simplicity of that. How would I get the company style injected on into the page?Tim– Tim2016-03-08 22:13:58 +00:00Commented Mar 8, 2016 at 22:13
|
Show 1 more comment
1 Answer
Scoped CSS can be used for this but browser support is scant at present so must do own scoping with selectors.
IF you are using a db to store and collect customer data . . AND IF you make a field in customer table called "custom_styles". AND IF you store a css fragment like this:
<style scoped type = "text/css">
#form-container fieldset {
background: Violet;
}
#form-container form header {
background: url("http://customer.com/customer-logo.png");
}
#form-container input {
margin: 4px;
border: 2px solid blue;
}
</style>
AND IF you store the data in a php variable like $custom_styles . . .
You CAN inject the css wherever you want on the page, inside the block element where you want custom styles with:
<div id = "form_container">
<?=$custom_styles?>
<!-- bunch of html -->
</div>
So, if you put this inside the container holding the form you want customized, all styles will be applied to that container only.
The container will inherit the page styles also, but they will be over-written if declared in the scoped css.
No other part of the page will be affected by these scoped styles.
Hope you find this useful.
