How do I make css load from a database with codeigniter - css

I am developing a CMS so I need each respective site's global css file to be stored in a database and loaded. I have a controller called util and the method is called sitecss. So my main wrapper view looks like this:
<link rel="stylesheet" type="text/css" href="/util/sitecss">
The css loads, but has no effect. If I view source on the page, and then click on the link, I can see the css just fine. So I know it is being loaded. Is it something about it not coming from a file? Or perhaps the browser assuming it is cached when it is not?
If I make a static file and change to above to
<link rel="stylesheet" type="text/css" href="/css/site.css">
everything works just fine. If I do this in .NET with a handler ashx file, it works fine. It is in php with Codeigniter that I am having the problem. I know someone will ask "why don't you just make static files?" and the answer is, it is not practical for this application. This is for thousands of sites with very rapid deployment.
Thanks in advance!
EDIT:
My controller method looks like this:
function sitecss() {
$cssdata = $this->cmsutils->loadCss($this->session->userdata('sitecss'));
echo $cssdata;
}
So can I just echo a mime-type first? It doesn't seem like this will work as I am making this call within the

write a caching library to pull from the database and create a css file in a cache folder.
You will need:
Library Class
Interact with the css and create a form to perform CRUD
handle cache file monitoring CRUD (every hour or, even on every C,U,D of the form)
Inject the stylesheet cache file into the DOM view
Model
Interact with the database and perform CRUD operations
return data to the Controller for creating the cache file
View
parse out the values into a css stylesheet file format
The other option is to define a mime type with a controller and just load a view with the stylesheet properly formatted. No writing to the filesystem or anything.. Add a .css extension to the end of the URI and call it good...
I do this exact same thing for an app that I just released. I have a form in a view on the admin section of the app that has specified textfields. The user inputs hexadecimal color codes and then it saves/updates the data in the database. The library then creates a cached css file that is referenced in the header view. We did this to eliminate the need for us to add a .gitignore file in a special directory when we deploy the app to several clients.

Could you just load the css by passing it to the view from the controller and then echo it in the header somewhere or somewhere else in the view like this:
controller:
$data['css_rules'] = $this->yourcssmodel->get_css_rules_function();
$this->load->view('yadayadayada, $data);
view: (likely in header)
?>
<style>
<?echo $css_rules;?>
</style>

Related

Dynamically changing less variables in .net

problem : i have to allow users to have different colors for buttons , icons , text color as per their preference using spectrum.js
i have tried to solve this using dotless for that i created a file .less and added all values. now issue is that i have to get values from databased based on loggedInuser and have to dynamically change
#back-color: blue;
#font-color: red;
to different values and this has to be done run time not compile time. i know it will cost me some delay but i dont know how to solve it other wise.
i have been thinking of different solution rather to have a less file why not on saving time i create a css file save in database and when user gets logged in create a css file and inject in to header
<link href="~/Content/dynamic.css" rel="stylesheet" />
can some one help me or any suggestion regarding this??
any help will be appreciated
Option 1
Implement special handler for resource, that represent css customized by user.
This handler must:
Make lookup (by userId) to cache where already rendered less (i.e. css) is stored;
If cache has entry for requested user, then write css to response and finish handling of this request;
If cache has no entry for requested user, then render less for this user, store it in cache and go to step 2.
You also should remove/update cache entry when user changes his color theme.
You can implement cache as you wish: in memory, inside database or inside static files that named (for example) like %userId%.css.
Option 2
Instead of render less on server side (and consume server resources) you can render less on client dynamically.
Exmaple: http://jsbin.com/wiqosutexe/5/edit?html,js,output
Include lessjs http://lesscss.org/#download-options;
Provide less template to client script (get with ajax, include in script itself or somehow else);
Use user preferences to make substitutions to less template.
Render template and insert results (plain css) into dynamically created style tag.

CSS versioning on Google App Engine

I've read that I can use /stylesheets/default.css?{{ App.Version }} for the versioning of the css files on Google App Engine. How does it work? I tried putting the ?{{ App.Version }} at the end of my css files but it brokes the whole page. Am I doing something wrong?
You don't put version info at the end of your filename, you just append a "version" query parameter when you reference the CSS resources.
Don't change CSS/JS (or other static file) filenames, just change contents
Refer to those files in your HTML via <link rel="stylesheet" type="text/css" href="//host/path/file.css?version">
Everytime you change contents you increase version. You could also use application versions, but you'd have to make sure they do not repeat.
Default caching on static files is 10min. You can set your own cache expiration.
You should append the version number, i.e. (for Java):
String version = SystemProperty.applicationVersion.get();
You can append this string to your CSS file name in your host page.

WSO2 Carbon: Re-Theming a single page

We have followed the guide provided by WSO2 to get access to the CSS / JSP pages.
Our aim is to re-theme / rebrand / restyle the login page. We have found that the login page is part of the jar: WSO2\repository\components\plugins\org.wso2.carbon.identity.sso.saml.ui_4.0.3.jar
The login page is called login_ajaxprocessor.jsp
The guide mentioned above states the following about JSP's ending with _ajaxprocessor.
By default when create a jsp file ( say “foo.jsp”) in a Carbon UI
component, it will inherit header, left menu and footer from the
Carbon core UI. But if the file name is “foo_ajaxprocessor.jsp”, there
will be no inheritance.
For an example let's consider, “login_ajaxprocessor.jsp” in
“org.wso2.carbon.identity.saml.sso.ui” component. It simply omit the
header, left menu and footer and display only the content from this
file. So we are able to customize this page in to a different look and
feel.
Were were successful in modifying the language (buttons, etc) in the JSP files. This Jar also contains a CSS file in: \web\sso-saml\css\main.css
We have modified this CSS file to my own style. However, when the page gets loaded, it seems the default WSO2 main.css file is read.
When looking at the default way in which the JSP page refers to the CSS, it says:
<link media="all" type="text/css" rel="stylesheet" href="carbon/sso-saml/css/main.css"/>
We would expect that the /sso-saml/ part wordt select our own modified CSS file.
Is it possible to configure that for this page only, our modified CSS file will be used? We want to prevent to have to change the default main.css. Also, it is because we want to use specific images, that we want to store in jar\web\sso-saml\images
Yes you can use your custom style pages and apply them. Please refer [1] [2] for more info. This will guide you on your task.
Hope this will help you.
[1] http://wso2.com/library/knowledge-base/2010/11/customize-ui-theming-wso2-carbon-based-products
[2] http://wso2.com/library/knowledge-base/2011/11/playing-around-carbon-product-themes
The login.jsp can be found in following jar.
/repository/components/plugins/org.wso2.carbon.ui_4.0.5.jar => /repository/components/plugins/login.jsp
and css => /repository/components/plugins

SilverStripe 3: Load/Create page outside of the CMS

is it possible to create a page outside of the cms?
For example:
I would like to use jquery .load() to load a segment into a current page.
Is it possible to create a html or .ss file somewhere in the theme folder eg: self-contained-page.html so if I then visit www.domain.com/self-contained-paged.html I will be able to visit this page.
While you can of course serve static files, you can also "ajaxify" parts of your page. Not sure if that's what you want to do, but in case someone else is trying to do something similar.
While you could use some fancy tools like pjax or history.js, you can also do it manually. I've recently done this with SS 2.4, but SS 3 should be pretty similar:
In your controller, add a public function so you can access it via /yourpage/load (or whatever you want to call it):
public function load(){
return $this->renderWith(array('AjaxLoad'));
}
In your templates/Layout add a file AjaxLoad.ss.
If you only want to serve that page via your jQuery .load(), simply add the content right inside the file.
If you want to use the piece of content both on your regular page and want to replace it with the ajaxified version, use <% include PageSnippet %> both on the general and the ajaxified page. Then simply define your content in templates/Include/PageSnippet.ss.
You can see it in action at http://www.contentaward.at/content-lab-vienna/608#details (click on the small images at the bottom of the page). Hope this makes it clear.
there is no problem with serving static html files from anywhere in your silverstripe installation, just note to always add the file extension to your urls, as otherwise silverstripe's url routing (using mod_rewrite, see the .htaccess file) will kick in.
also note to always use the full path to the file, so in case you placed your file in 'themes/mytheme/test.html' the url will be 'http://www.domain.com/themes/mytheme/test.html'
You can of course reference a html file in the theme folder just as you would do with a css file, f.e. :
www.domain.com/themes/yourtheme/self-contained-paged.html
If you dont mind to not have it in the theme folder you can also place it into root dir.
Or you can modify your .htaccess and apply some mod_rewrite or redirect rules to point into the theme folder.
If you want to use .ss files you probably have to use CMS pages.

.NET MVC3: Prevent 404 for missing CSS files? Or ensure files exist before writing HTML?

We have a requirement to provide skinning capabilities to an ASP.NET MVC3 app.
My approach so far has been to tackle this with a cookie and child actions for the css files:
Client links to our app using a URL like www.ourapp.com/as/www.clientapp.com/then-go-to/path/in/ourapp.
The above url is routed to an action method that writes a cookie named "skin" with value "www.clientapp.com" and then redirects to /path/in/ourapp.
Our layout (masterpage) has an #Html.Action in the <head> section where the css files are to be rendered.
The child action inspects the cookie and creates a viewmodel that will tell the partial view which <link> tags to render.
The css file structure is based on the cookie value. So our css content might look like this:
/content
/www.clientapp.com
/style1.css
/style1.css
/www.client2app.com
/style1.css
/style2.css
I am open to hearing better patterns / alternatives to the above for applying skins to the layout. However this isn't the reason for my question.
There is currently a problem with this approach when the css files are not present in the filesystem. The request causes IIS to return a 404. We override the 404 page with a custom page (not using the same layout that has the #Html.Action in the <head>). This causes IIS to do some additional processing which is not necessary (for example partials & child actions to render sign-in/sign out links, horizontal nav, etc, on the 404 page's layout).
The way I see it there are 2 ways to solve this:
In the child action that configures the css, check to make sure the files exist on disk before telling the viewmodel that they should be rendered. Pro with this approach is that it should be fairly easy. Cons are that to unit test it, would have to wrap file I/O in a service that can be injected. Also the app will be deployed to Azure. I think Azure can read the filesystem (which is what would be needed), but not write to it.
Somehow prevent a 404 from being returned for css files. To do this, would we have to implement logic in global.asax Application_Error? Or is there another way to prevent missing CSS files from triggering a 404 response?
Which approach is correct? Or is there another that I'm not considering?
Update
We ended up solving this in the custom 404 error page like so:
[ActionName("not-found")]
public virtual ActionResult NotFound()
{
// do not return 404 for missing css files
if (Request.RawUrl.EndsWith(".css", StringComparison.OrdinalIgnoreCase))
{
Response.StatusCode = 404;
return new EmptyResult();
}
return View();
}
One option would be to not override 404 errors for CSS requests.
For missing CSS files, return the 404 status, but leave the body empty. The body doesn't matter with a CSS file, since a human doesn't see it, and all the browser cares about is the status.

Resources