For whatever reason I can't seem to get my custom stulesheet to link to the HTML index. Bootstrap and Font Awesome styles work perfectly though
My HTML IS is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<!-- start of scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- jquery -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- (bootstrap3) Latest compiled and minified JavaScript -->
<!-- end of scripts -->
<!-- start of stylesheets -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- (bootstrap3) Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- (bootstrap3) Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- end of stylesheets -->
</head>
<body>
</body>
</html>
CSS is:
body {
background-color: lightblue;
}
And the File structure is:
/root
/css
-style.css
/js
-scripts.js
-index.html
Place your custom stylesheet after the bootstrap stylesheet in your head. The browser will read down, so custom stuff always comes last. In your code, Bootstrap would always take precedence over your custom style.
<link rel="stylesheet" type="text/css" href="css/style.css">
Or you can mark your custom css as !important:
body {
background-color: lightblue !important;
}
More on specificity here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
There is something you need to know about CSS. your style sheets are read by the order you have added them. so you should add your own CSS file at the end for keeping them from overriding by previous CSS files.
if you have
.bg{background:red} in your first CSS file, and
.bg{background:green} in your last CSS file.
whenever you add .bg to the elements , the background color will be green not red.
Related
I'm new to the Bootstrap world and I am following an online class to learn Bootstrap.
From there I learnt that I can have custom CSS classes that I can use in my webpage.
So I have created a folder called my project folder and I have linked the path in head of my page.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" herf="css/styles.css">
But now the CSS effects sre not reflected in the webpage
.footer{
background-color: #D1C4E9;
margin: 0px auto;
padding: 20px 0px 20px 0px;
}
I have used sublime as an editor, linux(ubuntu20)
EDIT 1.1 This is the Bootstrap get started template not the one you linked.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
It's a blank slate template, open for you imagination. Try looking at the component section on the Bootstrap website # https://getbootstrap.com/docs/4.5/components/. Adding component in between the body tag will get you started.
Bootstrap uses CDN's Content Delivery Network to load stylesheets and javascript files. CDN's have minimize delays in loading web page content by reducing the physical distance between the server and the user. CDN's don't use local path and have better performances most of the time.
It's common and best practice to use CDN's with a local fallback in case the CDN connection fails. In your case, your problem is probably coming from your local url path. If you don't want to use CDN's make sure your local pathing is right.
You have a typo in your CSS link. the word href is spelled wrong. that's why your CSS can not be detected.
Wrong:
<link rel="stylesheet" herf="css/styles.css">
Right:
<link rel="stylesheet" href="css/styles.css" />
<html>
<head>
<title>My Travel App</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
<div class="header item"><i style="font-size: 20px;" class="edit icon"></i>Blog Site</div>
Home
New Post
</div>
</div>
<p class="sample"> I can style here with css in app.css</p>
Can anyone help with the css/semantic-ui problem, please?
When I use style tag in the file as above it is working but if try to style something in my app.css file it does not work. I can style something else that I did not use semantic-ui in but I cannot style anything that has something from semantic-ui.
For example: I can style the class "sample" in my app.css file but cannot style class "item".
Thanks!
Its because of your files precedence in header, it read line by line first come first serve.
Always add your custom file in the end of header so that your custom style's overwrite default styles.
Replace below code
<head>
<title>My Travel App</title>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
</head>
Move semantic.min.css in top of app.css...
<head>
<title>My Travel App</title>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
</head>
On my meteor project, I embed bootstrap CDN on the header. But due to the merged stylesheet is embedded right after the <head> tag, some of my styles are overwritten by the bootstrap. Here is the rough HTML looks like on browser
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/merged-stylesheets.css?hash=e4358d3b8494bc13eda6b965c33b5902cd562a07">
<meta ..>
<title>...</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
...
</body>
</html>
How can I setup the merged stylesheet to be embedded after the CDN or right before </head> closing tag?
That's currently a Meteor caveat, discussions are on-going here: https://github.com/meteor/meteor-feature-requests/issues/24
The possibility to change it will probably come in a future release
I downloaded a premake template of a ecommerce platform that contains css js views and such to apply to my Laravel framework project. It looked very nice but I would like to make some changes, for example color of the background. However once I tried to modified any part of the css file and then undo the modification, the website views gone really bad. the changes were undone but some of the effects seems no longer working after I made such modification, any explanation or solution for me to undo my modification?
I used MarkUps-dailyShop. Modified style.css lets say delete the below code in it
#aa-header {
display: inline;
float: left;
width: 100%;
}
even though i undo such change, the homepage was of some sliding bar and dropdown menu before but now all these effects just gone and left with just words and colors.
I use Laravel 5.2
I place css and js script in the layouts.app as shown below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Soyegg</title>
<!-- Font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<!-- Bootstrap -->
<link href="{{public_path('css/bootstrap.css')}}" rel="stylesheet">
<!-- SmartMenus jQuery Bootstrap Addon CSS -->
<link href="{{public_path('css/jquery.smartmenus.bootstrap.css')}}" rel="stylesheet">
<!-- Product view slider -->
<link rel="stylesheet" type="text/css" href="{{public_path('css/jquery.simpleLens.css')}}">
<!-- slick slider -->
<link rel="stylesheet" type="text/css" href="{{public_path('css/slick.css')}}">
<!-- price picker slider -->
<link rel="stylesheet" type="text/css" href="{{public_path('css/nouislider.css')}}">
<!-- Theme color -->
<link id="switcher" href="{{public_path('css/theme-color/default-theme.css')}}" rel="stylesheet">
<!-- <link id="switcher" href="css/theme-color/bridge-theme.css" rel="stylesheet"> -->
<!-- Top Slider CSS -->
<link href="{{public_path('css/sequence-theme.modern-slide-in.css')}}" rel="stylesheet" media="all">
<!-- Main style sheet -->
<link href="{{public_path('css/style.css')}}" rel="stylesheet">
<!-- Google Font -->
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<!-- datepicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<!-- datepicker end -->
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- contents-->
#include('layouts.navbar')
#yield('content')
#include('layouts.footer')
<!-- jquery-2.2.4.min.js -->
<script src="{{ public_path('/js/jquery-2.2.4.min.js') }}"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Bootstrap.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- JavaScripts -->
{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
<script src="js/jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery Bootstrap Addon -->
<script src="js/jquery.smartmenus.bootstrap.js"></script>
<!-- To Slider JS -->
<script src="js/sequence.js"></script>
<script src="js/sequence-theme.modern-slide-in.js"></script>
<!-- Product view slider -->
<script src="js/jquery.simpleGallery.js"></script>
<script src="js/jquery.simpleLens.js"></script>
<!-- slick slider -->
<script src="js/slick.js"></script>
<!-- Price picker slider -->
<script src="js/nouislider.js"></script>
<!-- Custom js -->
<script src="js/custom.js"></script>
</body>
</html>
I just found where the problem is. It worked again after I change public_path('css/style.css') to url('css/style.css')
Is Laravel not supposed to read css by local directory?
I saw several questions on this topic in here but I can't get it work for me.
I use Polymer elements with Bootstrap and it seems like the polymer elements ignore Bootstrap's css. I tried to link the CSS inside the Polymer elements but it did not fix the problem. For example, This is my Polymer element "tal-button.html":
<link rel="import" href="../components/bower_components/polymer/polymer.html">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrapValidator.min.css" rel="stylesheet">
<polymer-element name="tal-button" attributes="">
<template>
<button class="btn btn-success">I'm a Bootstrap Button</button>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
My index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tal Buttons</title>
<script src="components/bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/tal-button.html">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- BootstrapValidator -->
<link href="css/bootstrapValidator.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
<section>
<button class="btn btn-primary">Cool</button>
<tal-button></tal-button>
</section><!-- /#intro -->
</body>
</html>
The "Cool" Button is displayed well, but the Tal-Button is displayed as a regular button and it didn't get the Bootstrap style.
Any help will be appreciated. Thanks!
You need to put the stlyesheet imports into the <template>...</template> tag.
Only then are these CSS definitions visible inside the shadow dom of your tal-button element.