I've started developing to sitefinity CMS and I'm having some conflicts when applying styles and Jquery/javascript to Different Widgets.
I want each widget to have its own Style and its Own Jquery and Javascrip functions.
What's happening is that I'm applying in one widget preventDefautls to all its textboxes, and the other widgets' textboxes get affected too.
I'm also applying different css to the widgets and there are conflicts too.
Maybe the good practice is to use the same css to all widgets.
but still when I want to apply something like preventDefaults to all its textboxes, all my widgets get affected.
How can I avoid this?
Im developing ASP.NET MVC Widgets
and this is my widgets structure
<script src="#Url.Content("~/Scripts/jquery-1.11.3.js")"></script>
<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.805/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.805/styles/kendo.bootstrap.min.css" />
<style>
//addicional style
<style>
<script>
//scripts...
</script>
<div>
Content...
</div>
Some advices about good practices, documentation, or code would be great.
For the styles, I generally wrap my custom widgets with a specific class, eg "imageGallery", and then in my main css (which I manage with grunt/compass), I make sure to target that class explicitly. This way, I can have global style settings, but then also style specific widgets with tweaks. And the nice thing with grunt/compass, is that you can have a separate physical css file for each widget's styles, but they all get bundled together for publishing.
For js, I typically inherit from the SF types, eg "SimpleScriptView", and then override the GetScriptDescriptors(), GetScriptReferences(), etc methods. This allows the scripts to be bundled with the ashx, and cuts down on risk of duplication, etc. It can be a little more complicated to follow the Sitefinity layout of the javascript classes at first, but you'll be consistent with the framework, so you can even decompile SF to get more examples when needed.
Related
I am playing with ASP.NET MVC default project.
I can see that it uses bootstrap. However, when I run the project I don't see something like:
<link href="/Content/bootstrap.css" rel="stylesheet"/>
as I would expect.
Instead I see something like:
<link href="/Content/css?v=LzveySGbzre5hK6VV4ZexwQl1hUNcljL4UffuTMZH8g1" rel="stylesheet"/>
which is actually the minimized bootstrap.
why is that???
Also, I'm inspecting the input field in the default forms (register, login) and I can see that there is the css rule:
input, select, textarea {max-width: 280px;}
However, when I perform searches on all my solution I can not find anywhere which contain such rule: max-width: 280px (I can't even find the string "280px")
What is going on? where did this 280px appears from?
You need to check APP_Start\BundleConfig and code .css and site.css for manking bootstrap working... if you are using VS2013, you can choose MVC project that already includes bootstrap libraries...
Regards!!!
Here is my issue. I need to produce many sites using the same structure (in RoR) and host them on many domains. The only difference between domains will be model data stored in the database and one stylesheet.. everything else will look and operate the same.
I want to be able to structure it so that I only need to change "core.css" in one place to make it update each separate domain. Is there any way that i can do this using ruby on rails? Or is there a better structure i should use?
Thank you,
Troy
Not sure if I fully understand.
I think you want to have multiple domains pointed to the same project. However you want to change the styling depending on the domain.
if so, just name your css style sheets by the domain name.
<link rel="stylesheet" type="text/css" href="/assets/<%= request.request_uri %>.css" />
(that would be a very lazy way)
I would personally, create a function in application controller, which figures out which stylesheet needs to be used. Then output #style variable.
<link rel="stylesheet" type="text/css" href="/assets/<%= #style %>" />
In my web app, I have a page where I use autocomplete widget from jQuery UI.
I link to jQuery Mobileand jQuery UI CSS from this page.
link rel="stylesheet" href="Styles/jquery.mobile-1.0.1.min.css"
type="text/css" link rel="stylesheet" type="text/css"
href="Styles/ui-lightness/jquery-ui-1.8.16.custom.css"
when I do this, my jQuery Mobile data-icons dont show at all. I just see a black hole in place. The other pages where I refer to only the jQuery Mobile have no issues. they display the data-icons fine.
Any idea as to what I could be doing wrong?
Put the jQuery UI css link BEFORE the jQuery mobile css and should work.
Try linking your Javascripts in the followng order:
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
If this doesn't help, try using the custom selector in your code :jqmData(), as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling $("div[data-role='page']"), you should use $("div:jqmData(role='page')"), which internally maps to $("div[data-"+ $.mobile.ns +"role='page']") without forcing you to concatenate a namespace into your selectors manually specially for your data-icons
jQuery mobile shows the icon through a background-image and position CSS declaration, it's likely you have CSS that is overriding those styles.
To find your issue, use your debugger, Chrome's debugger is especially useful, under Computed Style look for the background-image/position style and the CSS class in conflict. Then you can see which class is winning and the actual value, if you see a black box you may very well just have a bad url to the image - which you can identify here as well by following the image link on the CSS style and seeing if that image really exists.
Also I don't see your < and > brackets around your CSS declaration, correct me if I'm wrong but I think you're supposed to link to each css file with a separate tag:
<link rel="stylesheet" href="Styles/jquery.mobile-1.0.1.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="Styles/ui-lightness/jquery-ui-1.8.16.custom.css">
I am loading jQuery UI as
google.load("jqueryui", "1.8.6");
from the Google CDN
And I want the theme UI Darkness to be associated with it.
Any other methods other than
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" />
Something like
google.load("jqueryui", "1.8.6","{theme: 'UI-Darkness'}");
So far google loader doesn't support this syntax for jqueryui, you can check the documentation here.
http://code.google.com/intl/zh-CN/apis/loader/#GoogleLoad
I think refer to the link in a tag is still the best way in your case.
I would like to create in my master page a control that depending on the rendered viewpage will change a css file
I was thinking to make a specific controller "CssController" and call this CssController from the src attribute of the css link. This controller will be in charge of choosing the right css and sending it back with text/css header.
question: will this approach break the mvc pattern? Indeed the choose of the design would be in charge of a controller. Is there a better alternative?
What i did in my master page was create a contentplaceholder in the <head> section, as so:
<head runat="server">
<title>Title Here</title>
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>" type="text/javascript" ></script>
<link href="<%= Url.Content("~/Content/css/site.css") %>" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
then, when you create a view using the master page, you can add the view-specific css you want into that content place holder. That way, it'll put your site.css first, plus the desired css, javascript, <script> blocks, whatever, on that particular view.
If you are using separate css files for separate themes, then those would be in fact the view and controller would work. So it does not seem to violate the pattern. But, it does seem to be a more complicated solution than others.
The common way I have seen to do this is with a Jquery Style Switcher
http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/
With a little bit of code you can determine the default style to show on each page
The basic MVC example sets Page Title via the controller. I'm not sure this is any different. If you were using it (for instance) to have users be able to select different skins for their experience, I'm not sure there is any other way to do it, regardless of whether or not it violates the pattern.