I am a WordPress beginner who has taken over management of an existing WordPress site. I've established that a little problem I am seeing is to do with the order of loading of CSS files. When I view page source, I can see this towards the bottom of the head (site name changed for security):
<link rel='stylesheet' id='addtoany-css' href='https://www.mysite.co.uk/wp-content/plugins/add-to-any/addtoany.min.css?ver=1.16' type='text/css' media='all' />
<link rel='stylesheet' id='mysite-style-css' href='https://www.mysite.co.uk/wp-content/themes/mysite-acf/assets/css/mysite.css?ver=1674048874' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-style-css' href='https://www.mysite.co.uk/wp-content/themes/mysite-acf/assets/css/bootstrap.css?ver=1643275784' type='text/css' media='all' />
So the custom CSS for the theme (mysite.css) is being overridden by the next line which sets everything back to Bootstrap defaults.
Where in WordPress are such things determined, and how can I set it so that the Bootstrap CSS loads first and is then potentially overridden by theme CSS?
Try to use this in your functions.php:
add_action('wp_enqueue_scripts', function(){
wp_enqueue_style('main-style','http://website.com/styles/main.css');
}, 99);
https://developer.wordpress.org/reference/functions/add_action/
Be sure you got wp_head() in your header file.
Related
Today I noticed that font on my website mstem.net changed. I don't know why yet this font changed. In my main CSS file I have imported Google Fonts like:
#import url('https://fonts.googleapis.com/css?family=Oswald:400,900');
#import url('https://fonts.googleapis.com/css?family=Lato:400,900');
I checked for CSS code from Google Chrome Console and I noticed there is CSS rule added like:
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
I don't know where this line of code came from. When I uncheck it font comes back to normal.
Could you write me how to disable this CSS rule permanently?
I must add that I use Google Chrome Browser at Macbook with OSX 10.13.6.
Thank you for your help.
Cheers.
That CSS is coming from bootstrap.
In your header you have
<link rel='stylesheet' id='my-styles-css' href='https://mstem.net/wp-content/themes/wp-learn-marcelo/css/my-styles.css?ver=1.0' type='text/css' media='all' />
...
...
<link rel='stylesheet' id='bootstrap-css-css' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css?ver=4.1.1' type='text/css' media='all' />
Move your my-styles CSS below bootstrap for it to take precedence.
<link rel='stylesheet' id='bootstrap-css-css' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css?ver=4.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='my-styles-css' href='https://mstem.net/wp-content/themes/wp-learn-marcelo/css/my-styles.css?ver=1.0' type='text/css' media='all' />
I managed to solve that problem.
I installed Insert Header and Footers WordPress Plugin and paste in the header section this Google Fonts code:
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#400;900&family=Oswald:wght#400;700&display=swap" rel="stylesheet">
I looked up to a file which was the problem and I found out that problem was with the normilze.css file. I don't know if it was added with the newest WP version automatically or in some other way but it has broken my website.
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.
When I'm trying to edit the button style in word press theme, I am unable to locate the CSS path in cpanel directory.
When I am using inspect element, it shows the following CSS url:-
http://www.chivazo.com/wp-content/plugins/bwp-minify/min/?f=wp-content/themes/chivazo/plugins/owl-carousel/owl.transitions.css,wp-content/themes/chivazo/plugins/jackbox/css/jackbox.min.css,wp-content/themes/chivazo/plugins/rs-plugin/css/settings.css,wp-content/themes/chivazo/plugins/colorpicker/colorpicker.css,wp-content/themes/chivazo/style.css,wp-content/themes/chivazo/css/responsive.css,wp-content/plugins/woocommerce-woocart-popup-lite/static/styles/frontend/style.css
I'm getting confused about how to find the right CSS path.
Please help me.
page URL:- http://www.chivazo.com/checkout/
<link rel='stylesheet' id='brands-styles-group-css' href='http://www.chivazo.com/wp-content/plugins/bwp-minify/min/?f=wp-content/plugins/woocommerce-brands/assets/css/style.css,wp-content/plugins/woocommerce-currency-converter-widget/assets/css/converter.css,wp-content/plugins/yith-woocommerce-ajax-product-filter-premium/assets/css/frontend.css,wp-content/plugins/yith-woocommerce-ajax-search/assets/css/yith_wcas_ajax_search.css,wp-content/plugins/yith-infinite-scrolling/assets/css/frontend.css,wp-content/plugins/yith-woocommerce-compare/assets/css/colorbox.css,wp-content/themes/chivazo/css/bootstrap.min.css,wp-content/themes/chivazo/css/theme-animate.css,wp-content/themes/chivazo/plugins/owl-carousel/owl.carousel.css,wp-content/themes/chivazo/plugins/owl-carousel/owl.transitions.css' type='text/css' media='all' />
<link rel='stylesheet' id='jackbox-group-css' href='http://www.chivazo.com/wp-content/plugins/bwp-minify/min/?f=wp-content/themes/chivazo/plugins/jackbox/css/jackbox.min.css,wp-content/themes/chivazo/plugins/rs-plugin/css/settings.css,wp-content/themes/chivazo/plugins/colorpicker/colorpicker.css,wp-content/themes/chivazo/style.css,wp-content/themes/chivazo/css/responsive.css,wp-content/plugins/woocommerce-woocart-popup-lite/static/styles/frontend/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='custom-style-css' href='http://www.chivazo.com/wp-content/themes/chivazo/css/custom_style.php' type='text/css' media='all' />
You have this format for calling stylesheets so that every thing came in a single line. Keep separate lines.
Please check your viewpage source.
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>
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