'ello!
I'm developing my first WebPart for Sharepoint, and now I'm wondering where/how to include/store my CSS. Where should I put my .css files? How should I include them in my webpart?
This is my Approach
protected override void CreateChildControls()
{
CssRegistration.Register("/_layouts/STYLES/WebPartName/styles.css");
}
This ensures the CSS is registered and included only once and gives the opportunity to modify the CSS without redepolying the whole dll.
You should use Web Part Resources which can be linked or embedded. This article does a good job of explaining how to use them:
Best Practices for Managing Web Part Resources
U can also use:
HtmlLink linkCss = new HtmlLink();
//Defining attributes and values of the link tag
linkCss.Attributes.Add("href", "StyleSheet1.css");
linkCss.Attributes.Add("type", "text/css");
linkCss.Attributes.Add("rel", "Stylesheet");
//Add HtmlLink instance to the header of the current page
Page.Header.Controls.Add(linkCss);
Embedding the css into the webpart is fine if you never ever plan to change the CSS for the webpart.
I would recommend you include the css in either a separate file stored in the style library or change a css file linked in the page layout or master page (such as core.css).
Just define unique classes for your webpart if required and leave the definition of how that renders to each website. This allows different areas of your SharePoint implemenation to show the same webpart in different ways.
The means you will never have to release a dll in order to change a minor look and feel issue.
Related
(Please note that I'm not talking about this: How to make user controls know about css classes in ASP.NET )
I have some user controls which css styles comes from a small .css file. I would like to know if there is a way for the user control to tell any page it is placed in that the page needs to import this .css file.
What I'm trying to do is avoid forgetting to add a link to the .css file every time I add a usercontrol to a page by just having the control itself say "Hey, page that contains me, I need you to import this .css file if you haven't already".
I would add the css in programatically from the user control itself. This questions gives a good example how
Adding StyleSheets Programmatically in Asp.Net
Therefore the containing pages don't need to know about the css.
Or i guess you could just add it in the usercontrols in some style tags. Depends on your cascade. That one feels a bit dirty to me - i wouldn't sully myself with such unpleasantness (he lies)
I'm using jQuery plugins in an ASP.Net MVC site.
I've often to include CSS and JS files as required by the plugins I use in every page. So I want to centralize all those dependencies in a single place in my app. thus if a dependency for a given plug-in is changed or updated, I'll only have to modify a single place in my app.
I've thought in two possible solutions:
Extend the HTMLHelper with a partial method
like GetPlugin("jqgrid"); that
will print out all the script and
style tags needed.
Create a partial view for each
pluginlike jqGridDependencies.ascx
that will contain the script and
style tags needed.
Do you have any other idea? what do you think of both proposals?
Could http://combres.codeplex.com/ provide you with a framework for this.
My only personal objection to this method is that each individual pages will have a unique JavaScript/CSS file where as if you combined and compressed everything into one and simply used classes and events to trigger the JavaScript enhancements as and when needed your site would run a lot faster.
Our web application started out as a big, honkin' ASP.NET AJAX 'page' with oodles of controls on it. They all shared a small set of large .js and .css files. I need to use some of these controls in other, unrelated pages around our site. The difficulty is in all the other stuff the .css and .js files bring along with them when I try to use those controls elsewhere - too much and there's a lot of bloat, too little and the controls don't work.
So, I've been experimenting with breaking up the .css and .js and writing the controls to register the .js and .css they need. Initially I will end up with many more but smaller .js and .css files, but I can combine them at run-time later. I just want to encapsulate these controls so the pages that use them know less about what it takes to use them.
But I am running into a problem. I am using OnInit or OnLoad to register the .css and .js as needed. Unfortunately, none of these methods is called if the control is not visible the first time you hit the page when all the .css and .js needs to make its way to the client. It isn't until later on that the controls are enabled for thier specific functions that they are visible and could emit the .js or .css. Then it's too late!
Do I have to bite the bullet and hand-include the right .css/.js on the pages I use these controls on, or is there a better way to 'inventory' the controls in use to get them to emit what they need?
I assume that the problem you are facing is that some controls are loaded dynamically (i.e. in an update panel). It is a tricky problem - usually because you don't know in advance what controls you will need and thus what JS + CSS to include.
Perhaps you should consider loading the JS and CSS dynamically using a script loader?
The YUI script loader and the new MS one spring to mind (but I am sure that there are dozens of other equally good ones out there).
See this previous answer for a couple of potentially useful links. Also see here for more about the MS script loader and YUI scriptloader.
Being that you are already using MS stuff I would recommend the MS script loader but as far as I know, the MS script loader does not support managing your dynamically loaded CSS (if anyone knows different please correct me) and so maybe the YUI solution might be more suitable (or maybe you can roll your own way of dynamically adding CSS if it has not already been added - it shouldn't be too hard).
Using a script loader removes the headache of working out up front what you need to include but it may require some changes to your javascript. In particular, if you have any javascript inline in your control's markup that relies on functions declared in the javascript you are dynamically adding.
E.g. If you current have user control markup like this
<div id="my control">
<script type="text/javascript>
foo(); // foo is defined in foo.js, which is included in a script element in the head
... more script ...
</script>
....
</div>
Then using a script loader you must change it to look like this
<div id="my control">
<script type="text/javascript>
var onLoadHandler = function() {
foo();
... more script ...
};
Sys.loader.registerScript("foo_package_name", null, onLoadHandler);
</script>
</div>
You may be able to include the js and css files in with the rendering for the controls that you are using. Basically adding them into the first line of the html that is generated by the control. I know you should be able to put in the include for the js files anywhere in the html, although I've yet to try it out with the css files.
If that works, you may want to put in some logic to make sure that the files are only included once if you have more than one of those controls. This shouldn't be too hard to do at the javascript level.
I'd be interested to see what you get working, because I've been looking at doing something similiar where I'm currently working.
I am getting ready to code a bunch of ASP.NET MVC User Controls. All those controls are UI and require CSS. What are the best practices for that? Should I have one gigantic CSS file with the code of all controls?
Ideally, I would like each control to have their own CSS file. Is it possible to do that?
Thanks!
I personally would create a "controls.css" or something similar and put all the css associated with your controls in there. When you're ready to deploy, compress and minify all your css into 1 file. I've been playing around with SquishIt lately and really enjoy it.
If you're dead set on keeping the css files separate for each control I would add an extra ContentPlaceHolder to the <head> of your Master Page, right before the closing </head> and call it something like "ExtraScriptsAndCss." That way if your view uses a certain control you can inject the appropriate css or javascript into the head tag.
"User Controls" in MVC are actually "Html Helpers." They're just HTML, so you're free to deploy/distribute them in whatever way makes sense to you. You can put the styles in a single stylesheet, or split them up. As long as the <link rel> tags bring them into the page to which they are added, it will work fine.
I would recommend you add a parameter to your helpers that allows a user to override the default CSS path and filename, in case they want to use their own.
From a pragmatic point of view, I would go for one gigantic css file. It can be minified and cached by the client. This will save you mocking around with trying to put the right CSS into the head of the document.
I have a my own custom web server control.
I created separate CSS file with CSS classes description for this control.
I do not want to add tag to all pages where it is used. So, I believe that there is any way to connect CSS file directly to control. Is there any way to do it?
And what is the best method to add styles to web server custom control?
This question might work for you. It's for a Custom Control, not a Server Control, but it would only change the method in which CSS stylesheet is dynamically added (not Page_Init(), but maybe Render()?).
That seems to be the only way: a must always be added, though automatically, if an external CSS stylesheet has to be used.