I did exactly what #riddleMeThis recommended here, but WordPress is not reading in the styles. What am I missing?
Child theme functions.php
// Add styles for admin page - event edit table looks terrible after adding columns for custom taxo's
add_action('admin_head', 'admin_styles');
function admin_styles() {
echo '<link rel="stylesheet" href="custom-editor-style.css" type="text/css" media="all" />';
}
custom-editor-style.css, located in child theme directory (same dir as style.css)
table.fixed {
table-layout: auto !important;
}
Theoretically this should override the table.fixed declaration in load-styles.php, unless that php file is loaded after my add_action() call... TIA
You are not correctly locating the style sheet, as its path is wrong.
// Add styles for admin page - event edit table looks terrible after adding columns for custom taxo's
add_action('admin_head', 'admin_styles');
function admin_styles() {
echo '<link rel="stylesheet" href="'. get_stylesheet_directory_uri() . '/custom-editor-style.css" type="text/css" media="all" />';
}
My Best Way using wp_enqueue_style
function admin_styles() {
$ver = rand();
wp_enqueue_style('adminStyle', get_template_directory_uri() . '/assets/css/admin.css',[],$ver );
}
Related
I added a theme in my HTML page by:
<link rel="alternate stylesheet" href="css/dark.css" title="dark">
this creates an option to switch theme from view>style in browser as it is expected to. I want to create a switch in the page itself for changing the theme. <button>Switch Theme</button>will create a button but how do I make it switch theme?
You should trigger a change in the href attribute of the <link> tag on the click of the button, as demonstrated:
HTML
<link rel="stylesheet" href="dark.css" id="theme">
<button id="switch">Switch Theme</button>
JavaScript
document.getElementById('switch').onclick = function() {
if (document.getElementById('theme').href == "dark.css") {
document.getElementById('theme').href = "light.css";
} else {
document.getElementById('theme').href = "dark.css";
}
};
Now, the dark.css and light.css would contain different styles for your elements for both the themes respectively. For example:
dark.css
body{
background: #000;
}
light.css
body{
background: #fff;
}
this is very simple you need to bind the click to function and call it:
Replacing css file on the fly (and apply the new style to the page)
I am linking to the jQuery Mobile stylesheet on a CDN and would like to fall back to my local version of the stylesheet if the CDN fails. For scripts the solution is well known:
<!-- Load jQuery and jQuery mobile with fall back to local server -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='jquery-1.6.3.min.js'%3E"));
}
</script>
I would like to do something similar for a style sheet:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
I am not sure if a similar approach can be achieved because I am not sure whether the browser blocks in the same way when linking a script as it does when loading a script (maybe it is possible to load a stylesheet in a script tag and then inject it into the page) ?
So my question is: How do I ensure a stylesheet is loaded locally if a CDN fails ?
One could use onerror for that:
<link rel="stylesheet" href="cdn.css" onerror="this.onerror=null;this.href='local.css';" />
The this.onerror=null; is to avoid endless loops in case the fallback it self is not available. But it could also be used to have multiple fallbacks.
However, this currently only works in Firefox and Chrome.
Update: Meanwhile, this seems to be supported by all common browsers.
Not cross-browser tested but I think this will work. Will have to be after you load jquery though, or you'll have to rewrite it in plain Javascript.
<script type="text/javascript">
$.each(document.styleSheets, function(i,sheet){
if(sheet.href=='http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css') {
var rules = sheet.rules ? sheet.rules : sheet.cssRules;
if (rules.length == 0) {
$('<link rel="stylesheet" type="text/css" href="path/to/local/jquery.mobile-1.0b3.min.css" />').appendTo('head');
}
}
})
</script>
Assuming you are using the same CDN for css and jQuery, why not just do one test and catch it all??
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape('%3Clink rel="stylesheet" type="text/css" href="../../Content/jquery-ui-1.8.16.custom.css" /%3E'));
document.write(unescape('%3Cscript type="text/javascript" src="/jQuery/jquery-1.6.4.min.js" %3E%3C/script%3E'));
document.write(unescape('%3Cscript type="text/javascript" src="/jQuery/jquery-ui-1.8.16.custom.min.js" %3E%3C/script%3E'));
}
</script>
I guess the question is to detect whether a stylesheet is loaded or not. One possible approach is as follows:
1) Add a special rule to the end of your CSS file, like:
#foo { display: none !important; }
2) Add the corresponding div in your HTML:
<div id="foo"></div>
3) On document ready, check whether #foo is visible or not. If the stylesheet was loaded, it will not be visible.
Demo here -- loads jquery-ui smoothness theme; no rule is added to stylesheet.
this article suggests some solutions for the bootstrap css
http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/
alternatively this works for fontawesome
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script>
(function($){
var $span = $('<span class="fa" style="display:none"></span>').appendTo('body');
if ($span.css('fontFamily') !== 'FontAwesome' ) {
// Fallback Link
$('head').append('<link href="/css/font-awesome.min.css" rel="stylesheet">');
}
$span.remove();
})(jQuery);
</script>
You might be able to test for the existence of the stylesheet in document.styleSheets.
var rules = [];
if (document.styleSheets[1].cssRules)
rules = document.styleSheets[i].cssRules
else if (document.styleSheets[i].rules)
rule= document.styleSheets[i].rules
Test for something specific to the CSS file you're using.
Here's an extension to katy lavallee's answer. I've wrapped everything in self-executing function syntax to prevent variable collisions. I've also made the script non-specific to a single link. I.E., now any stylesheet link with a "data-fallback" url attribute will automatically be parsed. You don't have to hard-code the urls into this script like before. Note that this should be run at the end of the <head> element rather than at the end of the <body> element, otherwise it could cause FOUC.
http://jsfiddle.net/skibulk/jnfgyrLt/
<link rel="stylesheet" type="text/css" href="broken-link.css" data-fallback="broken-link2.css">
.
(function($){
var links = {};
$( "link[data-fallback]" ).each( function( index, link ) {
links[link.href] = link;
});
$.each( document.styleSheets, function(index, sheet) {
if(links[sheet.href]) {
var rules = sheet.rules ? sheet.rules : sheet.cssRules;
if (rules.length == 0) {
link = $(links[sheet.href]);
link.attr( 'href', link.attr("data-fallback") );
}
}
});
})(jQuery);
Do you really want to go down this javascript route to load CSS in case a CDN fails?
I haven't thought all the performance implications through but you're going to lose control of when the CSS is loaded and in general for page load performance, CSS is the first thing you want to download after the HTML.
Why not handle this at the infrastructure level - map your own domain name to the CDN, give it a short TTL, monitor the files on the CDN (e.g. using Watchmouse or something else), if CDN fails, change the DNS to backup site.
Other options that might help are "cache forever" on static content but there's no guarantee the browser will keep them of course or using the app-cache.
In reality as someone said at the top, if your CDN is unreliable get a new one
Andy
Look at these functions:
$.ajax({
url:'CSS URL HERE',
type:'HEAD',
error: function()
{
AddLocalCss();
},
success: function()
{
//file exists
}
});
And here is vanilla JavaScript version:
function UrlExists(url)
{
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status!=404;
}
if (!UrlExists('CSS URL HERE') {
AddLocalCss();
}
Now the actual function:
function AddLocalCss(){
document.write('<link rel="stylesheet" type="text/css" href=" LOCAL CSS URL HERE">')
}
Just make sure AddLocalCss is called in the head.
You might also consider using one of the following ways explained in this answer:
Load using AJAX
$.get(myStylesLocation, function(css)
{
$('<style type="text/css"></style>')
.html(css)
.appendTo("head");
});
Load using dynamically-created
$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >')
.appendTo("head");
Load using dynamically-created <style>
$('<style type="text/css"></style>')
.html('#import url("' + myStylesLocation + '")')
.appendTo("head");
or
$('<style type="text/css">#import url("' + myStylesLocation + '")</style>')
.appendTo("head");
I'd probably use something like yepnope.js
yepnope([{
load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
complete: function () {
if (!window.jQuery) {
yepnope('local/jquery.min.js');
}
}
}]);
Taken from the readme.
//(load your cdn lib here first)
<script>window.jQuery || document.write("<script src='//me.com/path/jquery-1.x.min.js'>\x3C/script>")</script>
I currently am trying to change the style of my page on the push of a button - the button is part of a dropdown. Everything I try does not seem to work,
here is what I'm trying:
Lead</li>
Have two <link /> tags defined like this:
<link rel="stylesheet" href="default.css" />
<link rel="stylesheet" href="onclick.css" disabled id="onclick" />
<link rel="stylesheet" href="offclick.css" disabled id="offclick" />
Using the jQuery, you can easily give the control to the following HTML:
Change Style
$(function () {
$("#style-change").click(function () {
if ($("#onclick").prop("disabled")) {
$("#onclick").prop("disabled", false);
$("#offclick").prop("disabled", true);
} else {
$("#onclick").prop("disabled", true);
$("#offclick").prop("disabled", false);
}
});
});
Hope this helps.
To begin with this line of code looks scary !
Lead</li>
If you want to change the style for a particular container ? or change the entire stylesheet ?
If later is the case, then you need to hold the current stylesheet value somewhere, may be in ViewBag or even Session. And then check when you are including in your layout, something on this lines..
#if(ViewBag.Style == "red")
{
Styles.Render("~Views/Customer/css/Hide.css");
}
else if(ViewBag.Style == "blue")
{
// you get the idea...
}
If you're willing to use JQuery you can do this within one line:
$("head").append("<link rel='stylesheet' id='extracss' href='"~Views/Customer/css/Hide.css"' type='text/css' />");
I am using 3 stylesheets (style1, style2, style3) for many pages.
style1 for my web header,
style2 for my contents and
style3 for footer
Now I want to apply a new stylesheet on my home page and disable style2 for only home page.
I added new classes for different elements but at some places it is still detecting my previous stylesheets. How can I disable CSS on a specific page?
Since you did not include the code to see how you doing it, and considering you are having the header as an include file:
USE PHP:
In your Home page before including header:
<?php $homepage = 1; ?>
//include your header//
In your header where you are referencing CSS:
<link href="css/style1.css" rel="stylesheet" type="text/css" />
<link href="css/style3.css" rel="stylesheet" type="text/css" />
<link href="<?php if($homepage == 1){ echo "css/Home-style.css";}else{ echo "css/style2.css";}?>" rel="stylesheet" type="text/css" />
Your files should be in PHP for this to work.
change "Home-style.css" to your new CSS file for home page.
Check for page then grab the dom stylesheets array object and disable anything you want .
if(window.location.href.indexOf("<name in page url >") > -1) {
//Next line will disable the 2nd stylsheet in the document .
document.styleSheets[1].disabled = true;
}
Also fyi you can view all style sheets in the dom with:
console.log(document.styleSheets)
This should give you the appropriate index of whatever stylesheet you want to remove.
You have to use jQuery to disable a stylesheet like :
<script>
$(function () {
if (location.pathname.indexOf('/pagename') >= 0) {
$('link[href*="/media/css/csspagename.css"]').prop('disable', true);
}
});
</script>
I have two CSS files in my Sencha touch application. Lets call them A.css and B.css. Based on the URL I want the application to load different CSS.
Lets say URL 1 is www.website.com/#1 so for this I would like to load A.css. similarly URL 2 is www.website.com/#2 so for this I would like to load B.css
Is it possible to load CSS dynamically based on the URL?
You can use JavaScript Regex for this.
Very easy method:
// For www.website.com/#1
if (/www.website.com\/#1/.test(window.location.href)) {
/* Your Code Here For Loading Css */
}
// For www.website.com/#2
if (/www.website.com\/#1/.test(window.location.href)) {
/* Your Code Here For Loading Css */
}
I hope this helps!!!
You can use the follow JavaScript code to load CSS dynamically for your requirement:
if (window.location == "http://www.website.com/#1") {
LoadCSS("A.css")
}
else if(window.location == "http://www.website.com/#2") {
LoadCSS("B.css")
}
function LoadCSS(filename) {
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
}
Get hashtag value from URL and then depending on value change the link for CSS.
To get hashtag value:
$url = "www.website.com/#1";
$params = parse_url($url);
$value = $params['fragment'];
This will give you hashtag value, then depending on value link CSS file in header:
<?php if ($value == 1) { ?>
<link href="A.css" rel="stylesheet" type="text/css" />
<?php } else { ?>
<link href="B.css" rel="stylesheet" type="text/css" />
<?php } ?>
I assume you have one template available for 2 URLs. Loading CSS using JavaScript is a pretty bad practice because it's slow and it's giving the user a bad experience since nothing is initially styled.
Anyway you can use the append function to add the CSS to the head tag.
$('head')
.append( $('<link rel="stylesheet" type="text/css" />')
.attr('href', 'your_stylesheet_url') );
And for the URL itself simply use the JavaScript window.location like so:
if (window.location == "#1url") {
// load the A.css using the append function like above
}