Is possible to change between 2 CSS files?
For example: I have the default Bootstrap theme, but I want to make a dropdown list with a list of themes, so the user can select the theme that he wants. Searching I find that you can have something like that:
<link type="text/css" rel="stylesheet" href="../Content/bootstrap.min.css" title="default"/>
<link type="text/css" rel="alternate stylesheet" href="../Content/bootstrap.min.cosmo.css" title="cosmos"/>
And you can change with a JavaScript function:
<script>
function setActiveStyleSheet(title) {
var i, a, main;
for (i = 0; (a = document.getElementsByTagName("link")[i]) ; i++) {
alert(a.href);
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
</script>
But when I click a button, I think that the page refresh and returns to the default theme.
Is there any way to permanently change the theme?
Yes you can! You must get the url of the css file and add it to the BundleConfig and refresh the page. If you need some reference to workout with it take a look of this link
You need to persist which is the active stylesheet on client side. Probably via cookies.
Related
I want to add a link named "Add to favorite" in the footer of my site. I don't find any module which can do it, so please is there any way to do this ?
Big Thanks
I will just explain what Pete already said.
You need to add this javascript code somehow to make your "Add to favorite" button functional:
<script type="text/javascript">
$(function() {
$('#bookmarkme').click(function() {
if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
window.sidebar.addPanel(document.title,window.location.href,'');
} else if(window.external && ('AddFavorite' in window.external)) { // IE Favorite
window.external.AddFavorite(location.href,document.title);
} else if(window.opera && window.print) { // Opera Hotlist
this.title=document.title;
return true;
} else { // webkit - safari/chrome
alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
}
});
});
</script>
You need to create a link in a block or template:
Add to favorite
If you have your own theme, then put the javascript in a separate file and add it in the theme info file:
scripts[] = myFile.js
You can add it via a custom module also with durpal_add_js() function.
The easiest & NOT RECOMMENDED way is to add it in the block body itself, just after adding the link. You need to set formatting as "Full HTML" or "PHP" though for this to work.
I was hoping anyone could give some input on this,
I'm creating a meteor app in which I would like to use bootstrap to creating the admin environment, but have the visitor facing side using custom css. When I add the bootstrap package to my app using meteor it's available on every page, is there a way to restrict the loading of bootstrap to routes that are in '/admin' ?
When you add bootstrap package it's not possible. You can, however, add bootstrap csses to public directory and then load them in a header subtemplate that will only be rendered when you're in the dashboard.
EDIT
But then how would you go about creating seperate head templates?
Easy:
<head>
...
{{> adminHeader}}
...
</head>
<template name="adminHeader">
{{#if adminPage}}
... // Put links to bootstrap here
{{/if}}
</template>
Template.adminHeader.adminPage = function() {
return Session.get('adminPage');
}
Meteor.router.add({
'/admin': function() {
Session.set('adminPage', true);
...
}
});
DISCLAIMER: I am unsure of a 'meteor way' to do this, so here is how I would do it with plain JS.
jQuery
$("link[href='bootstrap.css']").remove();
JS - Credit to javascriptkit
function removejscssfile(filename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
var allsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
}
}
removejscssfile("bootstrap.css", "css")
However, doing that would complete remove it from the page. I am not sure whether meteor would then try to readd it when a user goes to another page. If that does not automatically get readded, then you have an issue of bootstrap not being included when someone goes from the admin section to the main site, which would break the look of the site.
The way I would get around that would be to disable and enable the stylesheets:
Meteor.autorun(function(){
if(Session.get('nobootstrap')){
$("link[href='bootstrap.css']").disabled = true;
}else{
$("link[href='bootstrap.css']").disabled = false;
}
});
There my be other bootstrap resources which may need to be removed, take a look at what your page is loading.
To use jQuery in the same way but for the javascript files, remember to change link to script and href to src
From my tests, Meteor does not automatically re-add the files once they have been removed so you would need to find some way of re-adding them dynamically if you want the same user to be able to go back and forth between the main site and the admin site. Or simply if the http referrer to the main site is from the admin, force reload the page and then the bootstrap resources will load and everything will look pretty.
P.s. make sure you get the href correct for the jQuery version
If somebody is interested in including any js/css files, I've written a helper for it:
if (Meteor.isClient) {
// dynamic js / css include helper from public folder
Handlebars.registerHelper("INCLUDE_FILES", function(files) {
if (files != undefined) {
var array = files.split(',');
array.forEach(function(entity){
var regex = /(?:\.([^.]+))?$/;
var extension = regex.exec(entity)[1];
if(extension == "js"){
$('head').append('<script src="' + entity + '" data-dynamicJsCss type="text/javascript" ></script>');
} else if (extension == "css"){
$('head').append('<link href="' + entity + '" data-dynamicJsCss type="text/css" rel="stylesheet" />');
};
});
}
});
Router.onStop(function(){
$("[data-dynamicJsCss]").remove();
});
}
Then simply use:
{{INCLUDE_FILES '/css/html5reset.css, /js/test.js'}}
in any of your loaded templates :)
We Have Plan to make Mobile Application Which is suitable for All Type of Standard Mobiles. So we choose the ASP Application, Because it Works in Browser, No Installation Files in Mobile Devices and It Connect to the WiFi with MySQL Server.
I want to Resize the ASP Web Application Forms height and Width suitable for Different Mobile Devices ?
One friend suggested to include jquery mobile and css in the ASP.net? Please Give your Valuable suggestion.
The simplest way here is to detect whether the browser is a mobile device or not and then select a new style sheet accordingly.
It can get quite involving detecting all of the different devices out there and their capabilities and so initially I would suggest that you only cater for a few screen sizes.
You could place something like this code in the default.aspx
protected void Application_Start(object sender, EventArgs e)
{
// Redirect mobile users to the mobile site
HttpRequest httpRequest = HttpContext.Current.Request;
if (!httpRequest.Browser.IsMobileDevice)
{
string path = httpRequest.Url.PathAndQuery;
bool isOnMobilePage = path.StartsWith("/Mobile/",
StringComparison.OrdinalIgnoreCase);
if (!isOnMobilePage)
{
string redirectTo = "~/Mobile/";
// Could also add special logic to redirect from certain
// recognised pages to the mobile equivalents of those
// pages (where they exist). For example,
// if (HttpContext.Current.Handler is UserRegistration)
// redirectTo = "~/Mobile/Register.aspx";
HttpContext.Current.Response.Redirect(redirectTo);
}
}
}
Here I've duplicated the web pages in a sub directory /mobile as I was implementing mobile support on a current web application. Duplicated code I know but it was the quickest way of doing it.
In my mobile.master page I have the following:
<link href="../Css/Mobile.css" rel="stylesheet" media="handheld" type="text/css" />
<link href="../Css/Mobile.css" rel="stylesheet" media="Screen" type="text/css" title="default"/>
<link rel="alternate stylesheet" type="text/css" href="../Css/thin.css" title="thin"/>
<link rel="alternate stylesheet" type="text/css" href="../Css/wide.css" title="wide"/>
<link rel="alternate stylesheet" type="text/css" href="../Css/medium.css" title="medium"/>
and
<script type='text/javascript' src='Javascript/resolution.js'></script>
The script itself (resolution.js) is:
function getBrowserWidth() {
if (window.innerWidth) {
return window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth != 0) {
return document.documentElement.clientWidth;
}
else if (document.body) { return document.body.clientWidth; }
return 0;
}
function dynamicLayout() {
var browserWidth = getBrowserWidth();
//Load Thin CSS Rules
if (browserWidth < 640) {
changeLayout("thin");
}
//Load Wide CSS Rules
if ((browserWidth >= 640) && (browserWidth <= 900)) {
changeLayout("medium");
}
//Load Wider CSS Rules
if (browserWidth > 900) {
changeLayout("wide");
}
}
function changeLayout(description) {
var i, a;
for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
if (a.getAttribute("title") == description) { a.disabled = false; }
else if (a.getAttribute("title") != "default") { a.disabled = true; }
}
}
function addEvent(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e" + type + fn] = fn;
obj[type + fn] = function() { obj["e" + type + fn](window.event); }
obj.attachEvent("on" + type, obj[type + fn]);
}
}
addEvent(window, 'load', dynamicLayout);
addEvent(window, 'resize', dynamicLayout);
I then have 3 style sheets, thin, medium and wide that get called. It would be worth placing a link back to the full size web page for those with smart phones that can handle a standard browser sized web page.
The style sheets not only dictate screen size, but font, colours and item locations.
Tables are a real pain here as they don't resize well. I replaced mine with divs and floating blocks whose positions are dictated by the style sheet.
I hope that this helps to get you on your way.
Take a look at AMF: ASP.NET Mobile Framework
Especially siutable for iPhone/iPad platform, but can be a little bit slaggish on Android.
Use only ASP.NET infrastructure, but don't allow to use ViewState and standard ASp.NET controls as well. But for mobile development it's a more convinient restriction.
Search for mobile friendly HTML/CSS layouts, start having a look at http://www.getskeleton.com
I have a website developed using ASP.Net MVC. Now I want to based on the request(based on the country) I want to change the web site theme.
Ex: for USA - theme 1
for Canada - theme 2
If the request is not matching to any theme I want to display default (my current theme).
How can I achieve this dynamically.
Do I need to rewrite my css again or Is there a better way to this?
Please share your ideas
Thanks in Advance :)
You should define a global css file for common styles. Assuming you have some kind of helper method for accessing the current country, you can conditionally load the country specific stylesheet, or load a stylesheet based on a rule e.g. stylesheet with the same name as the country (following code is untested):
<link rel="stylesheet" type="text/css" href="css/global.css">
// conditional
#if (SiteHelper.CurrentCountry == "USA") {
<link rel="stylesheet" type="text/css" href="css/usa.css">
}
// or assume a css file exists with the country name
<link rel="stylesheet" type="text/css" href="css/#(SiteHelper.CurrentCountry).css">
I would generally recommend using a different layout page for each country/theme as it gives you much more control. Essentially you would move the above logic into _ViewStart.cshtml and set the Layout based on the current country.
Not sure if this is the best approach but this is what I am doing. I have a folder structure similar to this:
/Content
layout.css
/Content/Images
/Content/Themes/ThemeUSA
layout.css
/Content/Themes/ThemeUSA/Images
Then I use Helper Extensions to return the correct path for example for an image:
<img src="#Url.Image(Model.EnhImg)" alt="#Model.EnhImgAlt" />
where
public static string Image(this UrlHelper helper, string fileName)
{
string sLocation = Content() + "images/" + fileName;
return helper.Content(sLocation);
}
private static string Content()
{
string sLocation = "~/content/";
string sTheme = (string)HttpContext.Current.Session["Theme"];
if (!String.IsNullOrEmpty(sTheme))
{
sLocation += "themes/" +sTheme + "/";
}
return sLocation;
}
Images in the theme folders have the same name as in the default folder. Same thing for stylesheets.
I'm developing a web part which needs some custom CSS files. So I'm using the CssRegistration class to add them to the page header.
The code registers 4 CSS files which got deployed to the layouts folder by the web part feature. A fifth CSS files is optionally registered when there's a path to it set in the web part's property AdditionalCss. The CSS files should be inserted in the header after all SharePoint CSS files and should be sorted in the order they were added by code.
The code I used is the following:
var contentCss = new CssRegistration
{ Name = "/_layouts/MyWebPart/css/content.css",
RevealToNonIE = true };
if (SPContext.Current.Web.UIVersion == 4)
contentCss.After = "corev4.css";
else
contentCss.After = "core.css";
Controls.Add(contentCss);
var customCss = new CssRegistration
{ Name = "/_layouts/MyWebPart/css/cn_custom.css",
After = contentCss.Name, RevealToNonIE = true };
Controls.Add(customCss);
var styleCss = new CssRegistration
{ Name = "/_layouts/MyWebPart/css/styles.css",
After = customCss.Name, RevealToNonIE = true };
Controls.Add(styleCss);
var colorsCss = new CssRegistration
{ Name = "/_layouts/MyWebPart/css/colors.css",
After = styleCss.Name, RevealToNonIE = true};
Controls.Add(colorsCss);
if (!string.IsNullOrEmpty(AdditionalCss))
{
var webPartCustomCss = new CssRegistration
{ Name = AdditionalCss,
After = colorsCss.Name,
RevealToNonIE = true };
Controls.Add(webPartCustomCss);
}
When I add the web part to a page all CSS files are added to the page as expected. Except the files are sorted in the wrong order.
Without the custom CSS file the order is: (link's rel- and type-attribute were removed for a better overview)
...
<link href="/_layouts/1033/styles/Themable/corev4.css"/>
<link href="/_layouts/MyWebPart/css/colors.css"/>
<link href="/_layouts/MyWebPart/css/content.css"/>
<link href="/_layouts/MyWebPart/css/cn_custom.css"/>
<link href="/_layouts/MyWebPart/css/styles.css"/>
With the custom CSS file the order is:
...
<link href="/_layouts/1033/styles/Themable/corev4.css"/>
<link href="/_layouts/MyWebPart/css/cn_custom.css"/>
<link href="/sites/mysite/Style%2520Library/de-de/test.css"/>
<link href="/_layouts/MyWebPart/css/styles.css"/>
<link href="/_layouts/MyWebPart/css/content.css"/>
<link href="/_layouts/MyWebPart/css/colors.css"/>
As you can see both cases provide a totally different order and the CSS files were never sorted in the order they were added by code.
With this strange behavior the whole CssRegistration class is not very useful as you cannot
relay that the CSS files are always in the same order. This makes designing with CSS nearly impossible.
Have you looked at the "After" property of the CssRegistration control? I think that if you don't specify an order using this property then the results are in alphabetical order in your source. This doesn't exactly match what you see but there may be something else going on that is causing your inconsistent behavior.
http://www.wictorwilen.se/Post/What-is-new-with-the-CssRegistration-control-in-SharePoint-2010.aspx