So I'm trying to figure out how to store a CSS in a client side cache and set the alternating stylesheet from the data in the cache.
I'm developing a site that allows a user to customize the site. And I think the best route might be to save their changes in a css. But before it's saved I would like to allow them to preview it throughout the site.
Is it possible to set an alternating Stylesheet to an object and not a file?
Are their any concerns?
Has anyone saved CSS data in a DB then applied it a site?
Thanks
Brad
Appication["Styles"] = css
<style>
<% =Application["Styles"}.ToString() %>
</style>
Related
I have a dynamic PHP stylesheet, but I can't find a way to send variables to it so I used sessions instead. Figured this kinda sucked, so I'm going to give it another try but could need some help. It's an external stylesheet where a variable has effect through the whole document.
You probably want to use an embedded stylesheet (a <style> block) in the page: it increases the size of the main page, but solves the variable access issue without needing sessions and reduces your number of requests. You can just load your dynamic stylesheet into the main page's view using load->view.
EDIT: Ah, massive amounts of CSS would be one problem. Well, two alternatives are to:
Turn on the $_GET support in your CI install, you COULD pass in a request parameter in the CSS link and then check for the request parameter in the PHP controller or view file that generates the actual CSS. Not visually the tidiest option, but it does work.
Put in a cookie that you check in the controller that gets called for the CSS: you can then check that in the controller or view and do the right thing. Visually much tidier than the request parameter option, but a bit more involved.
I searched google and SO, but did not find a solution.
I have an asp.net web app that allows users to customize some GUI aspects (such as font color, add a custom logo etc). This information is stored in the user profile database.
I have a css file that populates font colors etc. The main page, loads the users profile from the database, and customizes the page accordingly.
Aside from having each label with its own "font-color=", how can I display the CSS elements, based on the user profile information returned from the database? Thx
You can include an extra CSS file that points to an ASPX page:
<link rel="stylesheet" type="text/css" href="/CustomStyles.aspx" />
Then in CustomStyles.aspx change the default content-type:
Response.Clear()
Response.ContentType = "text/css"
Then just start outputting your styles:
Response.Write("#awesome-button{color:" & ColorFromDatabase & ";}"
Make sure that this file is included after the other styles so that it takes precedence. You might want to also throw an !IMPORTANT in there, too.
Response.Write("#awesome-button{color:" & ColorFromDatabase & " !IMPORTANT;}"
It depends on how you have the information stored, but you can add styling to elements through code like this:
Button1.Style["font-weight"] = "bold";
Or you can just apply a CSS class to the control:
Button1.CssClass = "buttonStyle";
You could have a page that just returns a CSS file based on the preferences stored in the database. So you would have:
<link rel="stylesheet" href="somepage.aspx?userid=<%=userID%>">
You could probably even do that easily enough with a classic ASP page, a web service, etc.
The point is that that page would generate the same basic stylesheet, filling in the right colors etc. that the user has chosen. This way you don't have to perform a bunch of style changes in server-side or client-side code after the page has loaded, or mix your user preference code in with your HTML, or change much about the base pages if you want to change the way the stylesheet works. It also makes it easy to test your stylesheet outside of testing the site itself.
Hey, anyone have any idea what the best way to allow users to save custom css would be? Specifically, there are about 4 color values that I would like to allow a user to choose and these colors would be used to create a custom theme for the user. I'm thinking save values in the database and then using dom:loaded with prototype to set the custom style values but I'm wondering if theres a faster way? Like dynamically creating css files or something?
and then using dom:loaded with prototype
Awww, don't do that! That won't work when JavaScript is turned off.
Approach 1: Static stylesheet, dynamic values in document head
For the sake of not having to work with a dynamically created style sheet, have a separate, static CSS file with all the definitions that won't change.
<link rel="stylesheet" href="styles/static.css" type="text/css">
<!-- Or whatever you name it -->
All the definitions that will change, you could put into the head of the HTML document, fetching the user-changeable values from a database.
<style type="text/css">
.classname { font-size: (fontsize); } <-- Insert dynamic value here
.classname { color: (color); } <-- Insert dynamic value here
....
<style>
that way, the majority of the CSS stays in static, cacheable files, while the dynamic part won't cause another HTTP request.
Approach 2: Dynamic stylesheet
If you have a lot of dynamically changing values, put the entire style sheet into a script file and output it, replacing placeholders with the values from the database.
The downside to this is that to force the browser to reload the style sheet on changes, you'll have to work with a version approach stylesheet.css?version=400 which is pretty complex to do, but can sometimes be more desirable than littering the head section with CSS.
You decide which approach suits your situation better. I find myself choosing the first one most often.
I would save the 4 values in the database and then create a css file from those values. You would want to make sure and cache the created css file for each user so you don't have to dynamically create it each page view.
Creating a custom css file adds another request the browser has to make so you would need to make sure your setting up the headers correctly to cache it. If the user does change their settings you would need do something to ensure the browser immediately stops cashing the old css file and loads the new file. One way to do this is to change the url of the css file.
Example:
/usercustom.css?version=(last saved date hash)
Instead I would use your first approach and create a JSON array that you inject into the page and then you use your javascript framework to load and use the array to style the page.
You could also store the color values in the cookie from the server and use and or write to them on the client.
I think that best way is to save it to Db, because you don't want to allow user to mess with your website. At least if some pages are public.
And I personally think that answers like "do it without JavaScript" is nothing but old school BS... Did they tried to turn of JavaScript today? I don't think so... And by this paragraph I don't mean that you have to do it using JavaScript. Do it in a way that suits your needs 🤔
Wish you nice Day
My theme has a custom css code block where I allow the site owner to add any custom css they need directly to the head section of the theme. This inserts whatever they've placed in this block into the wordpress database as a custom option insert.
I then retrieve this content into header.php and output it between an inline style tag like so...
<style type="text/css">
.test h1 {}
.testcss2, .somecss {}
</style>
This works perfectly fine, however, I would like to clean up and minify the markup when its written to the database. I suppose a regex is needed to do this? If so, what would that be?
The result I'm looking for, when the code is written into the page's markup is...
<style type="text/css">.test h1{}.testcss2,.somecss{}</style>
I'd also like to reverse the minified markup when its presented back to the user to edit in my theme options. In that view, I just want to reformat the minified css code so that each directive is back on its own line.
It depends what you want achieve by doing this. I agree with #thomasfedb that you will likely messup the style of most peoples CSS by doing this transformation and will likely cause more trouble than its worth.
It's my suggestion that you keep the data exactly as the user entered it, and then 'minify' it when you render it to the page.
This will not save you and storage in your database, and it will increase your CPU usage per page render, but it will save you the bandwidth of all the extra new-line characters.
Another option, presuming database storage is not much of a concern, is to store the data twice, once where the user edits, and once minified. Then simply minify and copy the user-editable field into the minified field whenever the user makes any changes.
I don't see any real reason to do this, a few newline charactors in a webpage isn't realy going to cost you very much page-weight.
Therefore my solution would be: don't.
Also, even if you reverse the minification, you might 'mess with the style' of some people, who like different css layouts.
I'm new to creating html pages etc - but am using VS 2008 just for the editing/intellisense capabilities.
My problem is I have a pure HTML only website (no ASP.NET) and have a fairly extensive header that has to be used in every page. It's frustrating to change the header parts of the HTML across all pages every single time it changes in one. Is there someway I can sort of 'include' the header part HTML in other HTML pages without having to manually cut-paste all-over?
Please note - I'm not using ASP.NET, so I CANNOT and WILL NOT be able to use Master Pages. Is there some other technique is what I want to know - so that when I change the header template in 1 place, it gets reflected in all other. I thought of inline frames, but not sure if that's a crappy way to do that and if it affects SEO
Take a look at Server Side Includes
They'll allow you to edit your header in the one file, which will appear instantly on all pages that include the header file.
Yes, take a look at SSI. Server side includes are a simple way to tell your web server to insert various things at various points in your HTML page.
Example:
<html>
<head>
<!--#include FILE="head.html" -->
</head>
<body>
</body>
</html>
If server side includes don't appear to work as expected, try renaming the page with a .shtml file extension.
Some web servers require that you name your file ".shtml" rather than ".html" in order to enable the parsing of your file.