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.
Related
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.
I'm new to web development and am using Laravel. For this, I purchased a HTML admin page template which already included Laravel (so basically Laravel plus the theme in HTML already set up). Now I'm using some elements from everywhere inside the template and I ended up having heavily long reference lists. I don't think this is necessary or even considered good code (rather HTML markup), and I even tried to remove some of the references, but then for some reason some elements of the page do not properly work anymore.
For example, I choose a certain button element from a HTML page included in the template, I copy the code and paste it inside where I need it. I also copy the references, but not necessarily all the references (because there were not only buttons on the page). However, not having -all- the references ended in a messed-up page with few things working. I wonder if there is like any tool which automatically removes these statements since I feel that the following is ridiculous compared to the actual size/content of the page (which is merely a form to enter your personal data):
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrapvalidator/css/bootstrapValidator.min.css')}}"/>
<!--page level styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/wizards.css')}}"/>
<!--End of page styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/inputlimiter/css/jquery.inputlimiter.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jquery-tagsinput/css/jquery.tagsinput.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/daterangepicker/css/daterangepicker.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datepicker/css/bootstrap-datepicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jasny-bootstrap/css/jasny-bootstrap.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datetimepicker/css/DateTimePicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/j_timepicker/css/jquery.timepicker.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/clockpicker/css/jquery-clockpicker.css')}}" />
<!-- end of plugin styles -->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/colorpicker_hack.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/switchery/css/switchery.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/inputlimiter/css/jquery.inputlimiter.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/chosen/css/chosen.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/daterangepicker/css/daterangepicker.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datepicker/css/bootstrap-datepicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jasny-bootstrap/css/jasny-bootstrap.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/fileinput/css/fileinput.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/multiselect/css/multi-select.css')}}"/>
<!--End of plugin styles-->
<!--Page level styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/form_elements.css')}}"/>
(Not to forget all the JS at the bottom!)
Just simply go to Google's developer by clicking Short cut (control + shift+ I) and then go to Audit tab, you will find all the details and performance audit report. From there you can find the used and unused css and JavaScript codes.
You can inspect the particular webpage. During inspecting, you can find out the error/unused portion of css/js files in console. They basically name the unused file with line number.
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>
On XP, IE8 site http://rweberjewelry.com/ is ignoring styles. Here's a video http://www.screenr.com/AeMH. It works fine on Win7 IE9. This started when I updated to WP 3.5.2 and latest theme version.
Problems - images not showing, fonts are huge, page container does not fill page, and just overall ignoring of most styles!
Theme designer says it renders well on their browser emulator and "..there is something else in play either on your network or computer. If the browser is getting pushed into compatibility mode for some reason or something similar."
I had a friend check her computer and it is having the same problem.
I read a suggestion to add the following but it didn't help:
meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"
I checked:
IE>tools>compatibility mode> website is not listed and "display all websites in compatibility mode" is not checked and ripped paper icon is not showing next to the URL so I don't think it is in compatibility mode.
Much thanks for any ideas.
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<link rel="stylesheet" type="text/css" media="all" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/style.css" />
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/grid.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/base.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/layout.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/slideshow.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/shortcodes.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/js/projekktor/theme/style.css" type="text/css" media="screen"/>
<!-- plugin and theme output with wp_head() -->
<link rel='stylesheet' id='testimonials-widget-css' href='http://www.rweberjewelry.com/wp-content/plugins/testimonials-widget/testimonials-widget.css?ver=3.5.2' type='text/css' media='all' />
<link rel='stylesheet' id='avia-woocommerce-css-css' href='http://www.rweberjewelry.com/wp-content/themes/propulsion/config-woocommerce/woocommerce-mod.css?ver=3.5.2' type='text/css' media='all' />
<!-- custom styles set at your backend-->
<style type='text/css' id='dynamic-styles'>
<!----a ton of stuff deleted - too long ----->
</style>
<!-- google webfont font replacement -->
<link id="google_webfont_1" rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cardo" />
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/custom.css" type="text/css" media="screen"/>
</head>
You seem to have some HTML issues that IE8 isn't handling quite as gracefully as the other browsers. Some of the worst offenses are apostrophes in HTML attributes, which prematurely end the attribute.
W3C validator results