i would like to make 'skinnable' a web site written in asp.net...
I explain: for example, i have a 'div' element, and i would like to define a background-color using a variable, not a fixed value.
How can i do ?
Css ? Or other tecniques ?
Thanks
CSS is exactly what your are looking for.
Keep in mind that when writing your classes and ids you should refer to the element semantically. It means you should NOT choose your names depending on the visual representation of the element.
Wrongs:
.blue
boxOnLeft
Goods:
.comments
related
To be able to skin your page, you'll just need to change your css.
Almost all is possible using CSS.
ASP.NET has built-in functionality for Themeing and Skinning:
ASP.NET Themes and Skins - MSDN
You could always roll your own as well. The general idea is that you have a seperate set of CSS for each Theme/Skin and then generate the references dynamically based on what Theme/Skin the user selects.
You might look at .Less and t4 template package for it:
http://haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx
A lot of good notes in the comments of that link as well, including a visual studio addin.
CSS doesn't have programming variable capabilities that you hope to achieve.
However, there is a way to do this with PHP (I know you're looking for .NET solution here, but bear with me)
Basically, you add a line of header text "", save the css with .php extension, and then load the .php in html as css (""). Then you can manipulate variables with PHP.
I don't know anything about .NET, but I believe it should be possible in a similar manner.
Related
I'm working on a web application which is using Materialize as a front-end framework along with Kendo UI for the grid component.
I'm hitting problems in cases where both Kendo UI and Materialize have styles for the same element - for example they both override the styling on check boxes - this results in a broken layout due to the clash.
One option I realize is to pick either Materialize or Kendo UI and drop the other... however I would like to avoid this if possible as they in the most part have complemented each others weaknesses well.
If it was simply one element here or there putting specific overrides in would be an option however with the scale of the two frameworks this would be a maintenance nightmare as when one changed the overrides would possibly have to be refactored.
Are there any ways to solve this issue that I am missing?
One way to workaround such a clash is to build your MaterializeCSS to include only the parts you so need for your project.
For instance, if you do not need the buttons styling of MaterializeCSS, you could simply, via sass, compile the materialize.scss and cherry pick buttons out of the file.
If going down the path of building your custom .css of Materialize is a long short for you, you can try using materialize.khophi.co (Disclaimer: I built it).
Find more about how to customize your MaterializeCSS: http://materializecss.com/getting-started.html
I know it's usually suggested not to duplicate code, and you want to try steering away from overrides, but would it be possible to find the section of css you like (i.e. select box from materialize) and copy that in to a new custom css file, renaming the selector so you can use it seperately from Materialize/Kendo UI?
You can manually edit the stylesheet of eighter party. Take the non-minified CSS, and prepend every base path with a short prefix:
.card {
....
}
becomes
.mat.card {
....
}
That way, for every materialize style, you use .mat before anything. Or, if you mainly use materialize, do the same thing for Kendo UI.
This is a lot of pain, but would solve your issue.
I've been given an extensive stylesheet created by another developer, and I'm being asked to build some pages based on those styles. I'm looking for a way to output sample text in each style, such that I can provide a reference page to our design team.
Anyone know of a straightforward way to do this?
You could do something along the lines of running each selector through the Zen Coding HTML generator, which generates HTML from a CSS-selector-like syntax, and just make sure that each piece of generated HTML contains some sample text/image/etc.
I control styles for a set of pages in a common utility method. What i would like to do is check the .css file to see if a css class exists; if it does then pick it, else pick the default.
say PageA.aspx and PageB.aspx both use styles.css that contains .default{...}
if i wanted PageA.aspx to be styled differently, i would just add another entry in styles.css .PageA{....} etc. At runtime, it will search for a css class named PageB, since it does not find it, it will default to the default class.
Question is how do i check the .css file to find out if a particular css class exists in the code-behind.
Thanks
The simple way would be to apply the default style, and then the pageA style. The browser should ignore the pageA declaration if it doesn't exist.
However I think the Right Thing™ would be to handle this in ASP or use separate files as Seb suggests.
Many questions in SO ask for a particular solution but don't state the real problem behind, so it's difficult to answer properly.
But I suspect what you're asking could be achieved far easier by splitting styles in 3 different files and including just what you need:
styles.css: common styles for PageA and PageB
styleA.css: rules applying only for PageA
styleB.css: rules applying only for PabeB, but with the same name used in styleA.css
Then, you include styleA.css or styleB.css depending on which page you're showing and that's it.
If this doesn't answer your question, then you might post what's your real problem instead of the solution you're trying to code - which might not be the best solution.
BTW: I don't think there's a way to know which CSS classes are defined; you just set and unset them.
You could load the css file using a StreamReader (since it is a text file) and search it line-by-line using the String.IndexOf() method, but that wouldn't be very efficient for every page load.
Your question doesn't make a lot of sense, but since CSS is not a programming language, if you want to know what's in another file, you're going to have to do it somewhere else.
Any recommendations on a way to find what aspx files use what CSS class. Right now I have one gigantic css files and I would like to break it up into a more organized fashion simply for sake of maintainibility.
I was wondering if anything existed that could yield a report such as this css class is used in file1.aspx, file2.aspx, etc...
I guess I could write a little script to do this, but if there were any free apps out there already written, that'd be swell.
Maybe this will help:
http://www.dotnetsurfers.com/Blog/2008/10/02/RemovingUnusedCSSClassesFromYourWebApplication.aspx
The guy wrote a small utility that parses the CSS file and your application folders to determine which css classes are not being used.
There are a couple of Firefox plugins that can help you. These are Page Speed from Google and Dust-Me Selectors.
Page Speed will give you a list of CSS selectors NOT used on the page you are analysing, while Dust-Me Selectors will give you that and also a report on CSS selectors that ARE being used. Both reports have their uses.
With Dust-Me Selectors you can also get it to spider a whole site and detect any selectors that are not used anywhere on the site.
I would say that you should try to consolidate CSS into as few files as possible in order to reduce connections needed to load the CSS dependencies; this will speed up initial page load time.
You should also try to leverage a Master Page at least for common elements such as loading jQuery, CSS, etc.
Finally, I would use GREP for Windows and add it to Visual Studio as a Toolbox item to do simple text searches like this:
http://gnuwin32.sourceforge.net/packages/grep.htm
If you have the project open in visual studio, a super simple solution could be:
In visual studio: CRTL + SHIFT + F
Find what: "class={css class name}"
Look at these file types: "*.aspx"
I'm making a website that will have to render correctly on FF/IE6/IE7/Opera/Safari. IE6 came as a late requirement (when I had done all the other browsers) and it just has to be useable, not necessarily the same as on the other browsers. Now I'm tweaking it so that it's useable on IE6 as well.
To this end I've created another stylesheet in my theme called IE6_override.css. As you might have guessed, I want it to be applied only when the browser is IE6. Conditional comments would perfect for this.
The only problem is - ASP.NET renders a <link> tag for every CSS file that is in the theme's folder, thus including this file unconditionally on all browsers.
I would like to stick to themes because it's completely feasible that we might create more skins for our application later (if the customers desire that).
Is there any way how I can make ASP.NET exclude this specific .CSS file from its auto-including?
Added: Thank you for your answers! In the end I found a workaround. Due to some other styling problems I've asked about earlier, I'm forced to have a IE6-workaround Javascript as well. Thus I prefixed all my IE6-specific rules with a .ie6_dummy class selector and then removed it in JS upon page loading. :)
Yes you can... You can just remove the specific page header control in code behind. The css files are added automatically through theming, but u can remove them again after. Like for example u can put in the page load of your master file:
Page.Header.Controls.Remove(YourCssFile);
Or if you wanna have all the css files removed at the same time:
var themePath = string.Format("~/App_Themes/{0}", Page.Theme);
var removeCandidate = Page.Header.Controls.OfType<HtmlLink>().Where(link => link.Href.StartsWith(themePath)).ToList();
removeCandidate.ForEach(Page.Header.Controls.Remove);
I don't think you can. We stopped using the App_Themes folder for exactly that reason. This also saved us having to prefix every css file with a number so they load in the right order.
Indeed it's not possible to exclude a specific CSS file. However, there seem to be several workarounds located here. I'd suggest reading through those and choosing an appropriate solution (if any).
There are a couple of posts out on the web which seem to address your problem - looking for "Conditional comments in asp.net themes" I came across these which look like they may help:
How to take control of style sheets in ASP.NET Themes with the StylePlaceholder and Style control
Conditional stylesheets in Themes
The first one will also address the media issue with theme stylesheets as well.