CODEWITHSUNDEEP
jqueryasp.net-mvc-3css
Goran Bralo
Goran Bralo

Reputation: 463

How to alow users to change css and load their own styles

Currently I am on asp.net mvc project which is going to have 2 or more themes, css themes, so i am asking what is the best wqy to handle with requests like this. Can i alow users to write in css file or sholud i store some css values in database and load it in css with jquery after user log in? I am just looking for best approach and ways to do it nice and smooth.

Upvotes: 1

Views: 241

Answers (3)

Uxoos
Uxoos

Reputation: 21

Make editable inner of tag style by attribute contenteditable="true"

<div id="oEditableCssForEveryone" contenteditable="true">
  <style contenteditable="true">
    /* USER, please try input, type your css code text here */

    #oEditableCssForEveryone {
      margin: 12px 0;
      font-family: Consolas, Monaco, monospace;
    }

    #oEditableCssForEveryone style {
      display: block;
      white-space: pre;
    }
            
    #oEditableCssForEveryone[contenteditable="true"] {
      padding: 90px;
      overflow-x: auto;
      outline: 3px dashed #cccccc;
    }
            
    #oEditableCssForEveryone[contenteditable="true"]:hover{
      cursor: text;
      background: #e4f3f9;
      outline: 3px dashed #2B8BAD;
    }
  </style>
</div>

And save button:

<script type="text/javascript">
  $('body').on('click', '.oSaveButton', function() { 
    fetch(window.location.origin + "/ajax/ajaxSaveUserCssPlease.php", {
      method:"POST",
      headers: {
        'Content-Type': 'application/json;charset=utf-8'
      },
      body: JSON.stringify(document.getElementById("oEditableCssForEveryone").innerHTML)
    });
    return false;
  }).then(..);
</script>

maybe additional set display:block

<style style="display:block;" contenteditable="true" >

Upvotes: 1

Murtaza
Murtaza

Reputation: 3065

if you have pre-defined themes which user can select for their future logins, u can create the themes table in your database and store the respective themes id against the user. if user is not selecting any theme you will have the default theme.

And create the css files of the themes seperately on ur server, each theme will have different file.

However if user selects the theme for his/her future logins save it in your database, after you authentiate user upon login. Pass the value to any hidden field on the form and using the id value from hidden field Change the stylesheet and load the same file on every webpage using javascript.

After your comment:

if want to give control to the user to create their own styles, i think basically it will be for colors changes and font changes, u can create different css files with same class name, and load them after login. with the basis of id in the database you have against the user, this will help you to load the pages faster and database connectivity will be less.

You can just Get the Users ID using 

if (!Page.User.Identity.IsAuthenticated)
{
  MembershipUser member = Membership.GetUser();
  if (member != null)
      {
         ProfileCommon opC = Profile.GetProfile(Email.Text);
         hdnTheme.Value =  opC.ThemeID;
         hdnUserID.Value =  member.ProviderUserKey.ToString(); 

      }

}

in your ASPX code on the load of page

$(document).ready(function (){
var themeid = $("#hdnTheme.ClientID").val()
var UserID= $("#hdnUserID.ClientID").val()

if (themeid == 1)// for user specific theme 
 <link href="includes/css/"+ UserID +".css" type="text/css" rel="stylesheet" />
else if (themeid == 2) // for the theme which you have created and already the file exists 
  <link href="includes/css/2.css" type="text/css" rel="stylesheet" />
else 
    <link href="includes/css/default.css" type="text/css" rel="stylesheet" />

});

Upvotes: 1

Peter Stuart
Peter Stuart

Reputation: 2444

You should store CSS values in the database then load it when that user logs in. That's is the easiest way.

However when your website has a lot log users it can slow the site down considerably.

A more advance approach would be when the user fills out the form and clicks save a php script can generate and save a CSS file (it can be called user_id.css). I can't remember why function does this but google or this site is your friend here. Then when the user logs in the CSS file location will be saved in the database and called in the head tag

Upvotes: 0

Related Questions