I just now"run code snippet"here on stackoverflow and css works but when i open the index.html doc in my folder it wont show any color, weird. can someone pleas help thanks.
h1 {
font-size: 50px;
}
a {
text-decoration: none;
}
.thumbnail-title {
background: rgb(96, 125, 139);
color: rgb(202, 238, 139);
display: block;
font-size: 50px;
margin: 0;
padding: 4px 10px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheets" href="styles.css">
<h1>ottergram</h1>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
</html>
You have a typo right there: <link rel="stylesheets" href="styles.css">
it's rel="stylesheet" without the letter "s" not like you did rel="stylesheets".
So simply take this one: <link rel="stylesheet" href="styles.css">.
<link rel="stylesheets" href="styles.css">
stylesheets wont work, only stylesheet!
<link rel="stylesheet" href="styles.css">
Please change your external css reference with this one.
If you do not use the canonical links to downloadable resources, be sure that the paths of the downloaded files and your current URL are written correctly.
For example:
Current URL:
http://exapmle.com/test/
Use ..
<link rel="mask-icon" href="../safari-pinned-tab.svg" color="#5bbad5">
Use full URL:
http://exapmle.com/test/
<link rel="mask-icon" href="http://exapmle.com/safari-pinned-tab.svg" color="#5bbad5">
Related
Php code
i searched on the web and i didnt see anything about this it looks like no error css status is 200
css code is at the bottom.
.sagalt {
margin-top: 500px
}
<html>
<head>
<meta charset="utf-8">
<title>quantum</title>
<link rel="shortcut icon" href="logo.png" type="image/png">
<link rel="stylesheet" href="qntm.css?v=<?php echo time(); ?>">
<!--link//-->
</head>
<body>
<div>
Sign Out
</div>
</body>
</html>
Think you are trying to apply CSS to the link. Anchor tag being an inline element, margin top/bottom property alone wont have an effect in it as inline elements flow with content on the page. Use display: inline-block or display: flex or float: left as per your requirement.
.sagalt {
color: red;
margin-top: 100px;
display: inline-block;
}
<html>
<head>
<meta charset="utf-8">
<title>quantum</title>
<link rel="shortcut icon" href="logo.png" type="image/png">
<link rel="stylesheet" href="qntm.css?v=<?php echo time(); ?>">
<!--link//-->
</head>
<body>
<div>
Sign Out
</div>
</body>
</html>
I'm working on a Laravel project which uses Webflow's CSS framework rather than the default bootstrap framework. It works great for most pages, but I do have a 'profile' page where the CSS does not work at all. I found out it's because the route for the page uses a variable, it looks like this:
Route::get('/chum/{id}', 'App\Http\Controllers\ProfilesController#display');
The function:
public function display($id){
$users = User::findOrFail($id);
$following = $users->followings->count();
$followers = $users->followers->count();
return view('profile', [
'users' => $users,
'following' => $following,
'followers' => $followers
]);
As you can see you go to the URL along with the id of the user's profile and it should bring you there. But for some reason the fact that you're adding that variable to the end of the URL causes the CSS to not work at all. If it helps at all these are the stylesheets and javascript files I'm using in the boilerplate.
<!DOCTYPE html><!-- This site was created in Webflow. http://www.webflow.com -->
<!-- Last Published: Sun Nov 29 2020 00:43:15 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="5fc2087d6594016e2f088aed" data-wf-site="5fc06e9787e537386fa53575">
<head>
<meta charset="utf-8">
<title>Profile</title>
<meta content="Profile" property="og:title">
<meta content="Profile" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ["Courier Prime:regular,italic,700,700italic"]
}
});
</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">
! function(o, c) {
var n = c.documentElement,
t = " w-mod-";
n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch")
}(window, document);
</script>
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
(Content would go here.)
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5fc06e9787e537386fa53575" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>
You should change the path/url of your asset to root folder of your site. Maybe just need / at beginning. change
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">
to
<link href="/css/normalize.css" rel="stylesheet" type="text/css">
<link href="/css/webflow.css" rel="stylesheet" type="text/css">
<link href="/css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">
or you can also change with asset helper function of laravel to add your full URL of the current host. like
<link href="{{asset('css/normalize.css')}}" rel="stylesheet" type="text/css">
{{asset('css/normalize.css')}} will be https://yourhost.com/css/normalize.css
I am using the html5blank to create a site on WordPress. Locally, the media queries are working perfectly fine but when and I add them to the wordpress style.css file, they don't seem to work. I have got rid of all media queries and kept only a simple one just to test it and it's still not working. I have my media queries at the end.
This is part of my header.php file:
<!doctype html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
<link href="//www.google-analytics.com" rel="dns-prefetch">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory')?>/style.css" />
<link href="<?php echo get_template_directory_uri(); ?>/img/icons/favicon.ico" rel="shortcut icon">
<link href="<?php echo get_template_directory_uri(); ?>/img/icons/touch.png" rel="apple-touch-icon-precomposed">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="<?php bloginfo('description'); ?>">
<?php wp_head(); ?>
<script>
// conditionizr.com
// configure environment tests
conditionizr.config({
assets: '<?php echo get_template_directory_uri(); ?>',
tests: {}
});
</script>
</head>
<body <?php body_class(); ?>>
<header>
These are the simple media queries I added for testing in Wordpress to the bottom of the css file, but are not working:
#media screen and (min-width: 600px) {
div.balancepersonal {
font-size: 100px;
}
}
#media screen and (max-width: 600px) {
div.balancepersonal {
font-size: 10px;
}
}
This is the p tag in the index.php file I'm trying to make responsive:
<div class="balance-personal">
<div class="balance-container">
<div class="top-div-balance">
<img src="img/IMG_6739.jpg" class="trees-photo">
<div class="trees-shadow">
<div class="container amenidades-txt">
<p class="balancepersonal">BALANCE PERSONAL</p>
You want the stylesheet_url param for bloginfo as seen here: https://developer.wordpress.org/reference/functions/get_bloginfo/
Reason: your current param gives location on the server file directory as opposed to a web location a browser can access.
Edit stylesheet_url should give you the complete location to your style.css.
Alternatively you could use the template_directory_uri (as you are elsewhere) and add the style.css part
I have copied my assets folder to public and called my css files using
<link href="{{!! asset('assets/global/plugins/font-awesome/css/font-awesome.min.css') !!}}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/global/plugins/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css" />
but when I open my local host to view my app the css does not working and when I check the css using inspect element it shows this error
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Object not found!</title>
<link rev="made" href="mailto:postmaster#localhost" />
<style type="text/css"><!--/*--><![CDATA[/*><!--*/
body { color: #000000; background-color: #FFFFFF; }
a:link { color: #0000CC; }
p, address {margin-left: 3em;}
span {font-size: smaller;}
/*]]>*/--></style>
</head>
<body>
<h1>Object not found!</h1>
<p>
The requested URL was not found on this server.
The link on the
<a href="http://localhost:7777/laravel/resources/views/login.blade.php">referring
page</a> seems to be wrong or outdated. Please inform the author of
that page
about the error.
</p>
<p>
If you think this is a server error, please contact
the webmaster.
</p>
<h2>Error 404</h2>
<address>
localhost<br />
<span>Apache/2.4.16 (Win32) OpenSSL/1.0.1p PHP/5.6.12</span>
</address>
</body>
</html>
First you put all your css and js file inside public folder.
ie, wamp->www->your project folder->public.
then in the coding section simply use the below mentioned technique.
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/jquery.datetimepicker.css"/>
<script type="text/javascript" src="../select/select2.min.js"></script>
<script type="text/javascript" src="../select/select2.js"></script>
<link href="../select/select2.css" rel="stylesheet">
Add a slash to the beginning of your assets urls:
<link href="{{!!asset('/assets/global/plugins/font-awesome/css/font-awesome.min.css') !!}}" rel="stylesheet" type="text/css" />
<link href="{{ asset('/assets/global/plugins/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css" />
i been work on php Template (.dwt.php) and in the header i put fontawsome css
but the font awesome not work whatever i do i try change fonts paths and its not work here code of the php template
<?php
require "header.php";
if(!$_SESSION['UserAssoc']['Administrator']) Redirect("home.php", "Insufficient Privileges");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>NOMS</title>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen" />
<link href="css/thin-admin.css" rel="stylesheet" media="screen" />
<link href="css/font-awesome.css" rel="stylesheet" media="screen" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/dashboard.css" rel="stylesheet" />
<script src="Scripts/jquery.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/smooth-sliding-menu.js"></script>
</head>
and here my fontawsome.css file
#font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'),
url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),
url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
and i have all this fonts in folder called fonts and the fontawsome.css in the css folder can anyone please help?
You don't need to load FontAwesome like that; you can just use the stylesheet. Don't need to use fontface:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">