Website automatically minifies? CSS changes wont appear - html

I have a big problem on my website.
When i am making changes to the CSS files nothing changes on the website.
It looks like my site is using a other CSS file u can see it here:
My website is using that CSS file while this CSS file is the correct one:
http://quasarwheels.com/wp-content/themes/gilbertson/style.css
I did include this in my header for getting the CSS file
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php bloginfo(‘name’); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="shortcut icon" href="<?php bloginfo( 'url' ); ?>/favicon.png">
<link rel="apple-touch-icon" href="<?php bloginfo( 'url' ); ?>/favicon.png">
<link rel="stylesheet" href="<?php echo THEME_URL;?>/bootstrap/css/bootstrap.min.css">
<?php if(is_singular('frame')) {?>
<link type="text/css" rel="stylesheet" href="<?php echo THEME_URL?>/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="<?php echo THEME_URL?>/css/bike-builder.css" />
<?php }?>
<link type="text/css" rel="stylesheet" href="http://quasarwheels.com/wp-content/themes/gilbertson/style.css" />
<!--[if IE]>
<style type="text/css"> #mtb, #rac, #rat, #track, #rct, #rcc{ margin-top: -55%!important;}</style>
<![endif]-->
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
</head>
Thanks for your time!

If you inspect your page in the browser (not the header.php file) you'll see your links are being modified:
<link rel="stylesheet" href="http://quasarwheels.com/wp-content/themes/gilbertson/A.bootstrap,,_css,,_bootstrap.min.css+style.css,Mcc.KscEqGi0LS.css.pagespeed.cf.vgQu4bgNvt.css">
You can also see that several of the other stylesheets are coming from a plugin called BWP Minify. It looks like this plugin is minifying your stylesheets automatically, so you need to check the plugin settings and see if it needs refreshing or deactivating.
WordPress doesn't perform CSS minification out-of-the-box, so it's either coming from a plugin or your theme: in this instance it looks like the BWP plugin.

If you are sure you have uploaded the correct CSS file, flush your wordpress theme's cache / site cache to force the new file to be parsed and minified.

Move the
<link type="text/css" rel="stylesheet" href="http://quasarwheels.com/wp-content/themes/gilbertson/style.css" />
link to the top of the css links so it is rendered first.

Related

Codeigniter CSS not being applied to html view pages

The css is not being applied to the html views in my codeigniter project. Everything else seems to be working fine.
One answer on StackOverflow suggested removing the ?= base_url() ? part , which I Have tried but that doesn't work either,
This is the head.php file in templates, which contains the css.
Where else could the problem lie?
<head>
<?php require_once("meta.php"); ?>
<title><?= $title ?></title>
<link rel="shortcut icon" href="<?= base_url() ?>resource/images/favicon.ico" type="image/x-icon" />
<link href="<?= base_url() ?>resource/css/bootstrap.min.css" rel="stylesheet" />
<link href="<?= base_url() ?>resource/css/modern-business.css" rel="stylesheet" />
<link href="<?= base_url() ?>resource/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="<?= base_url() ?>resource/css/animate.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
I have tried removing the base part, but that doesn't work either.
<head>
<?php require_once("meta.php"); ?>
<title><?= $title ?></title>
<link rel="shortcut icon" href="<?= base_url() ?>resource/images/favicon.ico" type="image/x-icon" />
<link href="resource/css/bootstrap.min.css" rel="stylesheet" />
<link href="resource/css/modern-business.css" rel="stylesheet" />
<link href="resource/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="resource/css/animate.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
You have to recheck your configs and make sure you set your base_url correctly in your config.php so it would be something like that:
$config['base_url'] = 'http://localhost/YOUR_PROJECT_DIRECTORY/';
enable mod_rewrite and make sure your .htaccess is in your FCPATH and is as simple as this:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
finally remove your index.php in your config.php if you are not using it like this:
$config['index_page'] = '';
and your ready to go, load the url_helper in your controller:
$this->load->helper(['url']);
now you can use base_url correctly wherever you want:
<link href="<?= base_url('resource/css/bootstrap.min.css') ?>" rel="stylesheet" />
Just make sure that this path is correct and inspect>console in your browser to see if it is loaded.

HEAD inner tags showing in BODY tag

I am building a website using the source files of a previous website I already built. My problem is that the tags that belong to the HEAD appear in the BODY in browsers inspectors (Firefox and Chrome). Here is my HEAD:
<!DOCTYPE HTML>
<html lang="<?php echo $lg; ?>">
<head>
<base href="<?php echo $cfg->getHostDirectory(); ?>assets/cpanel/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="shortcut icon" type="image/x-icon" href="../images/favicon.ico">-->
<link rel="stylesheet" type="text/css" href="../css/playfair-display.css">
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../css/glyphicons.css">
<link rel="stylesheet" type="text/css" href="../css/ts-css.css">
<link rel="stylesheet" type="text/css" href="../css/admin.css">
<script src="../js/jquery.js"></script>
<script src="../js/modernizr-custom.js"></script>
<script src="../js/ts-jquery.js"></script>
<script src="../js/js-admin-create.js"></script>
<title><?php echo $cfg->getTitle($fileName, $lg); ?></title>
</head>
For some reason, I do not understand these tags goes in the BODY at runtime.
I searched on the StackOverflow for solutions but I cannot find anything helpful.
Update:
Update:
Here I see a weird duplicate that does not actually exist in the real file!!!
I had a similar issue with a registration form action to another page (which processed the registration and told the user an email had been sent for them to complete the process) but this latter page appeared to show all the html tags as text!
I tracked it down to a set-up file I had required, which had set the header content-type to application/json, thereby causing the browser to try and treat the response as an AJAX type response rather than a page to be loaded.
I had the same problem when adding a custom <jsdata>-tag to my head. So I think it is due to your <base>-tag. In don't know why you need it but try deleting it or put it at the end of your head because only all the tags after your custom tag will be moved into the body.

Having problems displaying favicon in codeigniter. Title shows the code instead

<link rel="icon" type="image/x-icon" href="<?php echo base_url().'favicon.ico'?>">Project name</title>
I have placed favicon.ico in the root folder.
But when trying to browse the page title shows the code instead with the entire link tag.
Lost of ideas on what to do.
Solution 1:
<link rel="icon" href="<?php echo base_url(); ?>favicon.ico"> <title>Project Name. </title>
Turn's out OP wrapped into <title></title>, which causing it not working.
Solution 2:
put your favicon.ico to your project root folder, then use href="favicon.ico"

Responsive not working after converting html theme to drupal theme

While trying to convert a HTML responsive theme to Drupal 7 theme, it's responsive is not working!!!
Can anyone help me with this to sort the issue? We have copied Bartik theme and removed the CSS and pasted the HTML5 theme CSS and js that we created...changed the index.tpl into page -- front.tpl.php and copied it into the template folder.....in the page -- front.tpl.php we give all the path for CSS and js as:
<?php $path="http://".$_SERVER['HTTP_HOST']; ?>
<link rel="icon" href="$path.">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="<?php echo $path.base_path().path_to_theme()?>/css/style.css">. As specified we gave path for all css and js files,but don;t know where we went wrong!!
Might it be because you dont have:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
in your head?

Website displays as gibberish when linked from Facebook in IE

I recently had a server switch but this happened on occasion prior to my server being switched. When I link a post on my facebook fan page, occasionally it will just show the link with no description and look odd. Apparently, the reason is because it's rendering the page like this in IE...
Does anyone have any idea why it's doing that? It's a wordpress blog and here are my top lines...
<!DOCTYPE html><!-- HTML 5 -->
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
Thanks for any help!
replies:
Tried changing DOCTYPE as requested, no luck. I also removed the meta tag and same thing. I am using http://web-sniffer.net/ with IE and it seems 50% of the time it loads normal, the rest looks like gibberish. Will keep updated based on replies
reply 2:
Here is my exact header in php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "w3.org/TR/html4/strict.dtd">
<html <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="/favicon.ico" >
<link rel="icon" type="image/gif" href="animated_favicon1.gif" >
<title><?php bloginfo('name'); if(is_home() || is_front_page()) { echo ' - '; bloginfo('description'); } else { wp_title(); } ?></title>
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
</head>
Added this as my new header:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
Still no luck, it shows as gibberish.
I am beginning to wonder if it's server side because it seems to work fine on my local drive (though to be fair I'm not connected to the live DB), and I changed the theme to the basic wordpress theme and it still had the error
I'm pretty sure I know what happened. It appears to be a compression issue on the server using WP-Super Cache. I turned it off and it appears to be better