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?
Related
I am designing a fitness website, for testimonials, I tried using bootstrap code. but as soon as I enter the link for bootstrap CSS my own CSS stopped working.
first, I gave the link to bootstrap file than on second line gave the link of my own CSS file but still not working
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>NewliFit</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<link rel="stylesheet" type="text/css" href="css/firstone.css">
<script src="javascript/fade.js"></script>
</head>
.
That’s weird, I know that you must add a link to Bootstrap before you add your own files, but unless you have a name conflict in your own CSS, everything should work as planned. A strange tip, would be to check that you don’t have uncalled for spacing between your HTML tags. Apart from that you’d need to post your code.
Cheers
I bought a template online, and edited some of the HTML. I use x10Hosting for free server and domain name. The website is deployed;
http://www.wizerwish.x10host.com
However, the CSS is not recognised or executed no matter what path I write in the index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Unishop | Universal E-Commerce Template
</title>
<!-- SEO Meta Tags-->
<meta name="description" content="Unishop - Universal E-Commerce Template">
<meta name="keywords" content="shop, e-commerce, modern, flat style, responsive, online store, business, mobile, blog, bootstrap 4, html5, css3, jquery, js, gallery, slider, touch, creative, clean">
<meta name="author" content="Rokaux">
<!-- Mobile Specific Meta Tag-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Favicon and Apple Icons-->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
<!-- Vendor Styles including: Bootstrap, Font Icons, Plugins, etc.-->
<link rel="stylesheet" media="screen" href="css/vendor.min.css">
<!-- THIS IS WHERE THE CSS FILES ARE -->
<link id="mainStyles" rel="stylesheet" media="screen"
href="css/styles.min.css">
<link id="mainStyles" rel="stylesheet" media="screen"
href="css/styles.css">
<!-- Modernizr-->
<script src="js/modernizr.min.js"></script>
</head>
That is the html. The CSS folder path is as follows, starting from the desktop;
template-1/dist/css/
NOTE: the template-1 folder is on the desktop.
I have even copied and pasted the CSS files in the same folder (dist) where the html and other file are. But it is still not working.
I accessed your css file and got it working by removing the css & js path. all files are in same path. so no need of path extension.
I just pushed a website live, and it's only loading "raw HTML." I've been troubleshooting on this for a few hours, and can't seem to work out why.
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/ico" href="http://www.example.com/favicon.ico"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Example</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/freelancer.min.css" rel="stylesheet">
Any help would be much appreciated.
You are doing it right, the problem is that CSS files are residing in different folders. It is an advisable practice to create a CSS folder in the root of your site containing all the CSS files, something like that:
Then you just need to slightly modify your link elements in the header:
<!-- Bootstrap Core CSS -->
<link href="css/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/freelancer.min.css" rel="stylesheet">
And so you could keep adding more CSS files if needed.
I hope it was helpful!
Please double check the location of you css
if you put it in separate folder, you might want to use something like this
<link rel="stylesheet" type="text/css" href="../min/freelancer.min.css">
if its just in the same folder as your index.html
<link rel="stylesheet" type="text/css" href="freelancer.min.css">
now if you put in a separate folder with you index.html file
<link rel="stylesheet" type="text/css" href="min/freelancer.min.css">
just take note that "../" makes you go back one folder from the current location of your index
Problem solved. I had to combine all of the files into .index.html
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Theme CSS -->
<link href="css/freelancer.min.css" rel="stylesheet" type="text/css">
Type is required please check with type.
<head>
<meta(charset='utf-8')>
<link rel="shortcut icon" type="image/x-icon" href="http://viewwit.com/image/favicon.ico" />
</head>
the head of my site starts with this but the favicon still won't show up inside of the title bar on any of my pages.
if you want to check for yourself the site is http://viewwit.com/ (I know it's bad, I'm making it just for fun).
I can't figure out why it isn't working. Any help would be awesome.
Try these
<meta charset="utf-8">
<link rel="shortcut icon" href="http://viewwit.com/image/favicon.ico" />
Take a look at the meta charset
As an easy fix, you can place your favicon within the root directory (same place as index.html). This is the default location which a browser will look for when searching for a favicon.
I'm creating a landing page for work using a html template, I've taken this template here (www.switchonbook.com) and am editing it for a different product.
Regardless of what I do the second CSS won't show. I have
-Tested the CSS and the HTML through testers online, no problems
-Tried changing the location of the files
-Compared the code to the original code of the landing page
Here is the code I am using for the new landing page;
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css? family=Open+Sans:300italic,400,300,600,700' rel='stylesheet'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Switch On: Your DIY Toolkit</title>
<meta name="description" content="Switch On: Your DIY Toolkit">
<link rel="shortcut icon" href="http://www.ripeandready.com/wordpress/wp- content/uploads/2015/03/favicon.png" type="image/x-icon">
<link rel="icon" href="http://www.ripeandready.com/wordpress/wp-content/uploads/2015/03/favicon.png" type="image/x-icon">
<link href="http://switchonbook.com/css/styles.min.css" rel="stylesheet">
<link href="http://switchonbook.com/css/main.css" rel="stylesheet" >
</head>
<body>
Any help would be greatly appreciated!
There are a few errors in your code. For instance, here:
http://fonts.googleapis.com/css? family=Open+Sans:300italic,400,300,600,700
There should not be spaces after the ?. Similarly, there should not be a space here after the -:
http://www.ripeandready.com/wordpress/wp- content/uploads/2015/03/favicon.png
Also, you do not have closing </body> and </html> tags.