can anyone advise what might be causing 2 sets of controls on this site please?
http://www.janequinn.biz/media/
Only started appearing after just updating the wordpress plugin.
Thanks.
You have two versions of video.js on that page and three versions of the video.js css.
<link rel='stylesheet' id='videojs-css' href='//vjs.zencdn.net/4.5/video-js.css?ver=3.9.2' type='text/css' media='all' />
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<link href="http://vjs.zencdn.net/4.7/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.7/video.js"></script>
Related
I created custom.css to overwrite my bootstrap. It works but for a few seconds, it shows default bootstrap style first, and then loads custom one. Any ideas? Thanks!
The custom css goes after bootstrap btw:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
<link rel="stylesheet" href="https://toert.github.io/Isolated-Bootstrap/versions/4.0.0-beta/iso_bootstrap4.0.0min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" href="https://toert.github.io/Isolated-Bootstrap/versions/4.0.0-beta/iso_bootstrap4.0.0min.css">
Try switching the places so that custom.css loads first ^^
I have an ASP.NET MVC project using Boostrap 4 and jQuery DataTables. For both tools, the CSS files load but none of the CSS rules are applied. Looking at the network tab of Chrome dev tools, content type is coming over as text/css. Here's the code within the head tag of the main layout page:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
#*<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />*#
<link href="#Url.Content("~/Content/Site.css")"rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/pushy.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/MyStyle.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/font-awesome.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/theme.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/DataTables/css/jquery.dataTables.min.css")" rel="stylesheet" type="text/css" />
#*<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/DataTables/css/dataTables.bootstrap.min.css")" />*#
<link href="#Url.Content("~/Content/DataTables/css/dataTables.bootstrap4.min.css")" rel="stylesheet" type="text/css" />
I've tried using runat="server" in both the link and head tags, using #Styles.Render instead of a link tag, swapping out the minified file with the full one, href with and without #Url.Content(), and using a file directly from Bootstrap, all with no success (haven't been able to find any other solutions on SO either).
MyStyle.css loads and applies properly, but not the Bootstrap or DataTables CSS. This is driving me nuts trying to figure out the issue - what am I missing?
I'm running .NET 4.6.1 on Visual Studio 2017.
Actually another css file from _Layout.cshtml overwrites the view page css file.removed main.css from Viewpage.cshtml
I'm trying to make the font on my website a little bit larger. I thought this would be a super simple fix. Just jump into the Style.css file and up the body font size. But I found that when I did this, it didn't update on the front end despite the file being updated for sure.
I realized when I dug into the source code, there seems to be a line of code added to the end of the link to the stylesheet that appears to be preventing the new update from being reflected - "?ver=4.8". Check it out below:
<link rel='stylesheet' id='font-awesome-css' href='http://www.example.com/wp-content/plugins/the-social-links/assets/css/font-awesome.min.css?ver=4.8' type='text/css' media='all' />
<link rel='stylesheet' id='the-social-links-style-css' href='http://www.example.com/wp-content/plugins/the-social-links/assets/css/style.css?ver=4.8' type='text/css' media='all' />
<link rel='stylesheet' id='dashicons-css' href='http://www.example.com/wp-includes/css/dashicons.min.css?ver=4.8' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='http://www.example.com/wp-includes/css/admin-bar.min.css?ver=4.8' type='text/css' media='all' />
<link rel='stylesheet' id='sb_instagram_styles-css' href='http://www.example.com/wp-content/plugins/instagram-feed/css/sb-instagram.min.css?ver=1.4.9' type='text/css' media='all' />
<link rel='stylesheet' id='sb_instagram_icons-css' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css?ver=4.6.3' type='text/css' media='all' />
<link rel='stylesheet' id='blaskan-fonts-css' href='https://fonts.googleapis.com/css?family=Droid+Serif%3A400%2C700%7CSource+Sans+Pro%3A300%2C400%2C600%2C700%2C900%7CWork+Sans%7CPacifico&subset=latin%2Clatin-ext&ver=4.8' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css' href='http://www.example.com/wp-content/themes/blaskan/assets/css/bootstrap.min.css?ver=4.8' type='text/css' media='all' />
<link rel='stylesheet' id='fontawesome-css' href='http://www.example.com/wp-content/themes/blaskan/assets/css/font-awesome.min.css?ver=4.8' type='text/css' media='all' />
<link rel='stylesheet' id='blaskan-style-css' href='http://www.example.com/wp-content/themes/blaskan/style.css?ver=4.8' type='text/css' media='all' />
<link rel='stylesheet' id='tablepress-default-css' href='http://www.example.com/wp-content/plugins/tablepress/css/default.min.css?ver=1.8' type='text/css' media='all' />
It's the second to last stylesheet that I want to update. So, I thought that I could just jump into the header.php file to remove that weird code at the end that appears to be overriding the update, but when I opened the file, all I see there is:
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
No stylesheet links in sight.
Can anybody tell me where I can edit the stylesheet code to remove that "ver=4.8" code from the end?
The them I'm using is https://wordpress.org/themes/blaskan/, if that helps.
Thanks in advance!
You would normally not modify the themes css directly. The correct way to do this, is to create a child theme and modify the CSS-Files of your child theme. Here is an instruction on how you can create a child theme.
Wordpress even suggests using a child theme:
There are a few reasons why you would want to use a child theme:
If you modify a theme directly and it is updated, then your
modifications may be lost. By using a child theme you will ensure that
your modifications are preserved. Using a child theme can speed up
development time. Using a child theme is a great way to learn about
WordPress theme development.
I m sonal.
I am designing a website.
In which i m using font-Awesome and bootstrap combine.
But some where confused in linking.
my linking files are:
<link rel="stylesheet" href="../goyal/bootstrap-3.0.0/dist/css/
bootstrap.min.css">
<link rel="stylesheet" href="../goyal/bootstrap-3.0.0/dist/css/
bootstrap-theme.min.css">
<script src="../goyal/bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/
bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="../goyal/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../goyal/font-awesome/css/font-
awesome.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
Where i am lacking. I am in new in this feild.
The only issue I can see is that you are linking both full and minified version of a few of the files.
Try this instead:
<link rel="stylesheet" href="../goyal/bootstrap-3.0.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../goyal/bootstrap-3.0.0/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../goyal/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="../goyal/bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
The .min.css and .min.js files are supposed to be used in production, they ususaly have shorter variable names etc to make the files smaller, but are ALOT harder to read.
I would recomend linking to the files that are not minified while developing then switch to the minified files when going 'live' with the site to keep the bandwidth down.
I have a script which dynamically creates CSS. Currently, the CSS is not loaded in the head section, but is loaded in the middle of the document.
I receive this error at validation service:
Element link is missing required attribute itemprop.
This is the line error:
<link rel='stylesheet' href='stylemaker.php?loadstyle=65456465' type='text/css' media='all' />
What are the potential causes of this problem?
itemprop is an HTML5 attribute for adding microdata to your elements. It is not necessary.
And if you can't move it into the head (for whatever reason), you can always load it dynamically using jQuery like so...
<script type="text/javascript">
$('head').append('<link rel="stylesheet" href="stylemaker.php?loadstyle=65456465" type="text/css" media="all" />');
</script>
It's not going to validate if the css is within the body tag move
<link rel='stylesheet' href='stylemaker.php?loadstyle=65456465' type='text/css' media='all' />
to the head section