I want to be able to "A" dynamically generate a CSS file - or "B" be able to read a css file and change certain attributes of the CSS classes in C#.
Reason being, I have site that is going to be configured to a user's company, utilizing their colors, logos, text sizes, etc...
The first thought was to dynamically create a CSS file - but I can't find anywhere on the net where anyone shows examples or whatnot. The second thought was to read the css file and change the CSS classes based on a user's login.
Is there a simple way to do either?
Generally this is handled in a few different ways. You could include an additional or different CSS file based on properties of the request (e.g. current site). You could also output HTML that includes different classes based on request properties. A common technique is to add classes to root elements like or when certain conditions are met, and then write CSS to make use of those classes.
For example, if you are using the same code base for multiple sites, on site A you could have <html class="site-a"> and on site B you'd have <html class="site-b">. Then you can override styles based on the site easily.
/* Default to white background */
body {
background: white;
}
/* Use a black background for Site A */
.site-a body {
background: black;
}
/* Use a blue background for Site B */
.site-b body {
background: blue;
}
This is of course a very simple example. In the case of entire sites, separate CSS files makes more architectural sense, as you'd store them along with other site specific files.
I recommend studying more around how applications typically organize their front end presentation layers and files. For example, MVC is a way to separate out parts of an application. Within the context of presentation, you have concepts like templates and themes to encapsulate parts of the UI and turn it into reusable parts.
EDIT: Lost in my answer is that I didn't talk about actually dynamically generating CSS files. This is because dynamically generating CSS files is uncommon and generally not the right solution to a problem. As commentors have pointed out, there are CSS preprocessors like LESS and SASS which are generally targeted at solving some of CSSs internal issues (mostly redundancy). Preprocessors fix problems with CSS and are extremely useful, but aren't used in the way that it sounds like you've asked about. Separate CSS files or CSS files that key off of different classes and IDs are the solution, not dynamically creating a CSS file or block with different property values.
Related
I want to define a few colours in one location and use functions to generate tints of these colors and render the generated colors in the CSS files.
I am moving from working on Ruby on Rails to ASP.NET. On my previous RoR project I had a 5-color color scheme set as Ruby variables of RGB arrays. I then used functions in the .css.erb file to generate a range of tints and shades of the color scheme colors throughout the generated .css stylesheet.
What's the cleanest way to do this in ASP.NET MVC 5?
You can easily render CSS with C# code in ASP.Net (either ASP.Net MVC or WebForms or raw ASP.Net) as it is just a file with particular content type.
One option is just render CSS inline on the page if you need just couple overrides.
For ASP.Net MVC to create separate file would be generate text in controller and than return it as Content - Display contents of Text File in MVC3 Razor. You can also make view to render no HTML tags and instead just CSS to be able to use all Razor constructs. Don't forget to add route and you may need to add <modules runAllManagedModulesForAllRequests="true" /> Meaning if using ".css" extension for files.
Note: depending on what you actually want to do using SASS/LESS to use "variables" in CSS may be better. It will not let you to get "colors for current user" scenarios, but allow to statically construct consistent CSS (like "button color must be the same and easy to change once across all of my CSS files").
Wondering if anyone knows how to add a custom css stylesheet to the admin backend section, without altering the original masterpages/umbraco.aspx.
I have a custom section implemented, so it has it's own section tray icon, and I can add the css to the 'umbracoGui.css', but I'd like to just 'inject' my own css file for any further styles too, knowing that all of the original files are intact.
In summary, say I have customStyle.css, with all of my css in. To add it to the head of the whole of the admin section.
There seems to be a few mentions of skinning, but it seems a bit overkill to me.
Is there a way of creating a class or something, that can register the stylesheet, or something like that?
Thanks for any help!
Cheers,
Bav
In case anyone is still looking for an answer to this, Umbraco 7 (at least, I'm not sure if this applies to earlier versions) has the ability to inject a stylesheet into pages using the App_Plugins folder. Add a new sub-folder, create a JSON package.manifest file in the new folder that looks something like e.g.
{
css: [ '~/App_Plugins/YourFolder/customStyle.css' ]
}
Then obviously create the custom stylesheet at the specified location in the App_Plugins folder and the stylesheet markup should appear in pages being served.
This may not be much help, but the first thought that comes to mind is some sort of HTTP handler which could inject the CSS file into the markup. I don't have a lot of experience with it, but I know it's a common approach for analytics tracking and the like.
I am developing a .net web application in c#/.net. For images on my site I am using relative paths. However to assist with performance of my site I am looking to introduce cookieless domains for images.
In most situations I can just add the domain to the images.
But in certain scenarios I cant and need to do it at run time. So I am looking at introducing some code to resolve the urls. I have a couple options of doing this.
Method in base page to loop through all the controls, add append the domain to all controls that inherit for System.Web.Ui.Image and append domain if not present.
Or do similar in a http module. (Is this possible)
Will doing the above slow down my site rendering? I dont want this to be counter productive!
Either of the above approaches should work ok for .net controls.
But any ideas how I might append the domain to html img tag and/or any images within my stylesheets? I probably can just set the domains of the img tag in code, but not sure of the stylesheets.
You can consider using Response.Filter too.
I have a site that gets deployed to over a dozen clients. The main website has a base template, and each client has a client folder that overrides the colours. The problem is that there are a lot of CSS files, so making a change that forces us to update every client takes a long time. The automated build process takes care of replacing the updated files.
I would like to change the CSS files to be usercontrols instead, and those usercontrols could then inherit from another usercontrol where client specific values are stored.
So instead of having a forms.css file and then a /client/forms.css file I would have a Forms.ascx file that inherits from a usercontrol that contains the colours.
Ex:
<%# Control Language="C#" ClassName="Forms" %>
<%# Register TagPrefix="css" TagName="Client" Src="~/css/ClientStyling.ascx" %>
/* CSS Document */
body
{
color:<%=Client.BodyColor%>
}
Then the masterpage would inherit from the usercontrol instead. This would make the maintenance of the client sites much easier.
So is this solution efficient and recommended? Or is there a better way to accomplish the same end result?
If this is possible, would it also be possible to have the Forms.ascx control output the markup as CSS? Or make the extension .css and still have the ascx properties?
Instead of a Web Control, you're likely better off creating a Generic Handler. This won't have the overhead that a web control has.
In your handler, accept the clientID via querystring - this allows you to cache on a client level
In your .master file, you can link to it < link src="MyCssHandler.ashx?ClientID=<%=ClientID%>" >
In your handler you have a few ways to work with the CSS.
Just have a bunch of response.write for the css, and put in relevant client values
Create an external CSS file with it's own special identifier - maybe <% %>. You could then load all the client specific values in a NameValuePair Collection, and then loop through the external CSS file, parsing <% NAME %> and replacing with the correct value. Then response.write this file. More complicated true but it allows for a hell of a lot cleaner CSS files
Another option to consider may just be to use a "CSS compiler" -- such as SASS, LESS or even HSS which may support handy constructs like "mixins" and including other files. This approach may allow a system that, while not dynamic, is easily configurable to your different client's needs.
For instance, with a "CSS compiler" the entire color schema could be stored in a single file as exportable variables or templates (depends on "compiler") -- modify that file, "recompile"** and wham, new color-scheme interface is everywhere (SASS also supports math on colors -- such as Hue shifting). This may make the deployment/management of using static content feasible enough for your purposes.
I use SASS (it fit my needs/style whereas LESS/HSS did not). I would not switch back unless I really, really had to (which is to say: uhh, never) -- SASS in SCSS mode also understands CSS syntax so you can micro-evolve or mix and match (LESS and HSS also work like this, but HSS only works with a stricter subset of CSS syntax). CSS compilers can also be used in conjunction templates engines (such as TT4) or take advantage of including dynamically generated files (not dynamic-dynamic as in the question, but dynamic in the sense that they come from some other data-source) if extra power is needed.
While just normal CSS cascading and class names/selectors can go a long ways, I find it much easier to separate the "logical cascade" (CSS, where CSS/cascading is vital) and "geeze, I wish this worked like a template" (CSS compiler, which should handle cases where CSS/cascading is abused).
** Both SASS and LESS can monitor files and recompile them automatically for you. SASS even allows monitoring entire directories
Write it out as a file and let the browser pick it up as it would any other CSS file.
Making inline stylesheets prevents the client cache mechanism, forcing your CSS to be served up with every page.
This is entirely possible. You might want to consider cascading your stylesheets too, so that the dynamic one imports a (presumably larger) static one.
Asp.NET has support for themes, too, but to be honest CSS is much more powerful.
Why are you thinking ASCX instead of ASPX though? I'd have thought that since one css file represents an entire response, it could all fit in a page.
an ashx is probably the lightest, fastest form of handler you can implement, so you might want to look at that...
Oh and make sure you get your caching parameters right!
What is the best way to transform large bunches of very similar web pages into a newer css-based layout programatically?
I am changing all the contents of an old website into a new css-based layout. Many of the pages are very similar, and I want to be able to automate the process.
What I am currently thinking of doing is to read the pages in using HtmlAgilityPack, and make a method for each group of similar pages that will create the output text.
What do you think is the best way to do this? The pages mostly differ by things like which .jpg file is used for the image, or how many groups of heading-image-text there are on that particular page
EDIT: I cannot use any other file type than .html, as that is all I am authorized to do. Any suggestions?
EDIT2: Ideally, I would also be able to make this be generic enough that I could use it for many different groups of html files by just switching around a few moving parts.
Sounds like you should be re-using code. If you are using strictly HTML, I would consider doing PHP or ASP based webpages instead. That way, you can create Header/Content/Footer/Nav sections, and re-use the same code across all your webpages.
This would make it a lot more sustainable, as you would only need to edit one file in the future.
What about using Server Side Includes (SSI) <#!--#INCLUDE -->
This was you can create different parts of your webpage in different files and just "include" them in any other page you want.
header.html
body.html
footer.html
<html>
<!--#INCLUDE file="header.html" -->
<!--#INCLUDE file="body.html" -->
<!--#INCLUDE file="footer.html" -->
</html>
More info here