I am making a bootstrap site for my sister and everytime i want to change css it works or 90% of the time it don't work.
I made a new file "style.css" to overwrite bootstrap i placed it under all the other tags in my and it still doesn't work can someone explain please?
Thanks
EDIT:
<section class="bg-primary text-white mb-0" id="about">
<div class="container">
<h2 class="text-center text-uppercase text-white">About</h2>
<hr class=" mb-5">
<div class="row">
<p class="lead">some text...</p>
<p class="lead">some text...</p>
</div>
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light" href="#">
<i class="fas fa-download mr-2"></i>
Download Now!
</a>
</div>
</div>
</section>
than i have in the bootstrap css file this line:
section{
padding: 6rem 0;
}
I want to change that to 9 rem so in my custom css file:
section{
padding: 9rem 0;
}
i does nothing ): and that is just one example maybe i do something very very stupid but i don't think so. and its not the cache.
head:
<head>
<!--there is some more here but not nessecary-->
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- tab icon -->
<link rel="icon" href="img/logo_1.png">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
<!--icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom styles for this template -->
<link href="css/freelancer.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
Thanks
Maybe your webpage is still cached, try to hit ctrl + f5 to check if it is presesting.
Otherwise just use the !important keyword in your css styles. down below you will find an example of how to use an !important statement.
.row {
padding: 15px !important;
margin: 10px auto !important;
}
An important statement overwrites files even if they come after the execution stack of the dom.
Here is some more information of the usage : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Selector_Types
Edit:
Be aware that the import keyword is hard to work around with when you want to change this later, for your specific case it would be fine. But if it is for bigger clients and projects, watch your important keywords ;).
Using your same imports I don't see Bootstrap's CSS having any paddings on the section tag, the styles you defined are applying correctly, maybe it's a different stylesheet that's causing this?
Also note you are importing Bootstrap CSS twice, and maybe for different versions of it? Try deleting the import you are not using. In fact, try deleting one css import at a time to see when the problem goes away, that'll at least help you find which stylesheet is overriding your styles
section {
padding: 9rem 0;
}
<head>
<!--there is some more here but not nessecary-->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!--icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<section class="bg-primary text-white mb-0" id="about">
<div class="container">
<h2 class="text-center text-uppercase text-white">About</h2>
<hr class=" mb-5">
<div class="row">
<p class="lead">some text...</p>
<p class="lead">some text...</p>
</div>
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light" href="#">
<i class="fas fa-download mr-2"></i> Download Now!
</a>
</div>
</div>
</section>
Related
I'm using Laravel to create a web application. So I created a header.css file and it is in public/assets/css/header.css. What I am trying to do is just style the header, but it isn't working.
In my default.blade.php I have
<!doctype html>
<html>
<head>
#include('includes.head')
</head>
<body>
#include('includes.header')
<div id="main" class="row">
#yield('content')
</div>
<footer class="row">
#include('includes.footer')
</footer>
</div>
</body>
</html>
My head.blade.php includes the link for the external stylesheet and it is
<meta charset="utf-8">
<meta name="description" content="blah blah.">
<meta name="author" content="Hunter Marshall">
<title>Elite Training Pro</title>
<!-- load bootstrap from a cdn -->
<!--<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css">-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link media="all" type="text/css" rel="stylesheets" href="{{ URL::asset('assets/css/header.css') }}"></link>
My header.blade.php is
<div class="navbar nav-background">
<div class="navbar-inner">
<a id="logo" href="/">Elite Training Pro</a>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</div>
My header.css is
.nav-background {
background-color:green;
}
Now I've tried HTML::style(), just assets(), HTML::to() but nothing seems to work. I can see the link to the stylesheet in my head when I look at the source code, but there is no background color. I also don't see the file in the inspect source.
Just use / before the folder path directive
<link rel="stylesheet" href="/assets/css/styles.css">
In your code try like this
<link media="all" type="text/css" rel="stylesheets" href="{{ URL::asset('/assets/css/header.css') }}"></link>
This works
href="{{ asset('assets/css/header.css') }}
I could not find any already asked questions relating to my problem.
Also, I'm new (again) to MVC structure as I took a long hiatus.
Anyhow, I created a new layout file _Layoutwithtop.cshtml. The Index.cshtml adopts the layout just fine, although About.cshtml and Contact.cshtml do not.
I will need all future View files to inherit _Layoutwithtop. Here are my attached files. Yes, I have included #Layout = "~/Views/Shared/_Layoutwithtop.cshtml"; line in the About and Contact Page.
Thanks.
_Layoutwithtop.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<meta charset="UTF-8">
<meta content="Great Lakes Imaging carries new and pre-owned radiology and x-ray imaging equipment for Chiropractors, Medical offices and Veterinary clinics. Offering a wide variety of top brands in the industry, we help you find the right equipment for your practice." name="description">
<meta content="Kodak POC 140, AGFA CR 30X, Bennett, HCMI, digital x-ray, film processor, x-ray parts, xray accessories, technique chart, radiation, xray equipment, xray companies" name="keywords">
<link href="Content/bootstrap.min.css" rel="stylesheet">
<link href="Content/Site.css" rel="stylesheet">
<link href="Content/animate.min.css" rel="stylesheet">
<link href="Content/assets/icons/icons.css" rel="stylesheet">
<link href="Content/owl.theme.css" rel="stylesheet">
<link href="Content/owl.carousel.css" rel="stylesheet">
<link href="Content/nivo-lightbox.css" rel="stylesheet">
<link href="Content/nivo_themes/default/default.css" rel="stylesheet">
<link href="Content/styles.css" rel="stylesheet">
<link href="Content/responsive.css" rel="stylesheet">
<link href="Content/colors/blue.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200" rel="stylesheet">
</head>
<body>
<div class="preloader">
<div class="status"></div>
</div>
<div>
#RenderBody()
</div>
<!-- footer -->
#Html.Partial("_footer")
<!-- / footer -->
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
<!-- scripts -->
<script src="Scripts/jquery.min.js"></script>
<script>jQuery(window).load(function(){"use strict";jQuery(".status").fadeOut(),jQuery(".preloader").delay(1e3).fadeOut("slow")})</script>
<script src="Scripts/smoothscroll.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/jquery.nav.js"></script>
<script src="Scripts/wow.min.js"></script>
<script src="Scripts/nivo-lightbox.min.js"></script>
<script src="Scripts/owl.carousel.min.js"></script>
<script src="Scripts/jquery.stellar.min.js"></script>
<script src="Scripts/jquery.ajaxchimp.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="Scripts/custom.js"></script>
<!-- / scripts -->
</body>
</html>
Index.cshtml
#{
ViewBag.Title = "Home Page | Great Lakes Imaging, Inc.";
Layout = "~/Views/Shared/_Layoutwithtop.cshtml";
}
<header class="header data-stellar-background-ratio=0.5" id="home">
<div class="overlay-layer">
<div class="navbar bs-docs-nav navbar-fixed-top sticky-navigation" role="navigation">
<div class="container">
<!--- nav header --->
<div class="navbar-header">
<button class="navbar-toggle" data-target="#stamp-navigation" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-grid-2x2"></span>
</button>
Great Lakes Imaging, Inc.
</div>
</div>
</div>
<!--- main home wrapper --->
<div class="container">
<div class="only-logo">
<div class="navbar">
<div class="navbar-header">
<img alt="Great Lakes Imaging Main Logo" src="images/newGLITranswhite.png">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="intro-section">
<h1 class="white-text intro">Your #1 source for digital x-ray equipment</h1>
<h5 class="white-text">We just happen to have 100 + chiropractic tables, too</h5>
<div class="button">Browse all of our equipment</div>
</div>
</div>
</div>
</div>
<!--- /main home wrapper --->
</div>
</header>
#Html.Partial("_Menu")
_ViewStart.cshtml
#{
Layout = "~/Views/Shared/_Layoutwithtop.cshtml";
}
I am using Dompdf to export an HTML page to PDF. I am using some Font Awesome icons that are displayed in the HTML file itself, but in the resulting PDF, there are question marks instead of icons.
Here is part of the HTML code:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Some title</title>
<!-- Latest compiled and minified CSS - Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="http://domain.com/public/assets/css/font-awesome-4.6.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- -->
<div id="wrapper" > <div id="page-wrapper"> <div class="container-fluid">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div class="panel panel-default panel-table">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12">
<div class="bs-callout bs-callout-primary">
<h4>Contact name</h4>
<ul>
<li><span class="fa fa-envelope"></span> <strong>Email</strong>: some#mail.com</li>
<li><span class="fa fa-phone"></span> <strong>Telephone</strong>: 0000-0000</li>
<li><span class="fa fa-location-arrow"></span> <strong>Location</strong>: Address</li>
</ul>
</div>
</div>
</div>
</div>
<div class="panel-body">
<!-- A table goes here -->
</div> </div>
</div>
</div>
</div>
</div>
</div><!-- .wrapper -->
</body>
</html>
Those icons are not displayed, only questions marks instead in the PDF:
<li><span class="fa fa-envelope"></span> <strong>Email</strong>: some#mail.com</li>
<li><span class="fa fa-phone"></span> <strong>Telephone</strong>: 0000-0000</li>
<li><span class="fa fa-location-arrow"></span> <strong>Location</strong>: Address</li>
How do I fix this?
Dompdf is not correctly parsing the FontAwesome stylesheet, causing it to read the font family incorrectly (why not post a bug report?).
You can work around the issue for now by redefining the fa class after you include the FontAwesome stylesheet.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<style type="text/css">
.fa {
display: inline;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 14px;
line-height: 1;
font-family: FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<p><span class="fa fa-envelope"></span> envelope</p>
</body>
</html>
If you compare this styling with the official one you'll notice that I changed the display type. Up to and including dompdf 0.7.0 auto-calculated widths are not supported and any block element (block, inline block) is given 100% width of its container. I've changed the display styling, but you could give it a fixed width instead, e.g. width: 1.25em;. I haven't done enough testing to know which one results in the fewest adverse affects.
I have figure out and came into conclusion. here is the one line statement that you can use to show font awesome icons in dompdf.
<span style="font-family: FontAwesome"></span>
I used puppeteer for the html to pdf conversion. I faced the same problem of the fontawesome icons not uploading to the pdf. So when I used slowMo : , it worked like a charm !
const browser = await htmltopdf.launch({headless: true, slowMo: 150});
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I use bootstrap v.3 and I wanted to make a diferrent button, so I copy all the css classes for btn-primary, renamed to myBigButton and apply my changes. Here works perfect. However in my page the new class 'myBigButton' doesnt exist (when I inspect element from the broswer..)
I have the same code in my page
<div class="container">
<div class="row ">
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block ">aaaaaa</button>
</div>
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block">bbbbbb</button>
</div>
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block">cccccc</button>
</div>
</div>
</div>
any ideas why?
The strangest is that if double write the css class
.myBigBtn {
color: #ffffff;
background-color: #5A6E9E;
border-color:#5A6E9E;
line-height: 100px;
font-size: 23px;
}
.myBigBtn {
color: #ffffff;
background-color: #5A6E9E;
border-color:#5A6E9E;
line-height: 100px;
font-size: 23px;
}
works..
UPDATE
I add all the css file here where it doesn't work either..
Your problem is the comment:
//here is my class
Comments in css are done like this
/* here is my class */
Change the comment to this and it should work
Everything works fine!
Include your CSS file in the <head> after the Bootstrap CSS:
...
<head>
Bootstrap CSS
Custom CSS
</head>
...
HTML should look like this:
<!DOCTYPE html>
<html lang="">
<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>BOOTSTRAP TEMPLATE</title>
<!-- Bootstrap CSS -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- 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>
<body id="body">
<div class="container">
<div class="row ">
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block ">aaaaaa</button>
</div>
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block">bbbbbb</button>
</div>
<div class="col-md-4">
<button type="button" class="btn myBigBtn btn-block">cccccc</button>
</div>
</div>
</div>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
The custom CSS:
<link rel="stylesheet" href="css/custom.css">
It's good practice to link to an external CSS file.
.myBigBtn and .btn have same prioprity, so styles are applied in order css files are included to page. And so .btn override your styles. That's the most probable cause.
I'm sure that there's an easy solution to my problem, but for the life of me I can't work out what I'm doing wrong.
I'm trying to get bootstrap-lightbox working in my site (which is a Django app, if that makes any difference).
I have the following in my header:
<script type="text/javascript" src="/static/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="static/dash/bootstrap-lightbox.js"></script>
<script src="static/dash/excanvas.min.js"></script>
<script src="static/dash/bootstrap.min.js"></script>
<script src="static/dash/jquery.flot.min.js"></script>
<script src="static/dash/jquery.gritter.min.js"></script>
<script src="static/dash/jquery.flot.resize.min.js"></script>
<script src="static/dash/jquery.peity.min.js"></script>
<script src="static/dash/fullcalendar.min.js"></script>
<script src="static/dash/unicorn.dashboard.js"></script>
<script src="static/dash/unicorn.js"></script>
<script src="static/dash/custom.js"></script>
<link rel="stylesheet" href="static/dash/bootstrap.min.css" />
<link rel="stylesheet" href="static/dash/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="static/dash/fullcalendar.css" />
<link rel="stylesheet" href="static/dash/unicorn.main.css" />
<link rel="stylesheet" href="static/dash/jquery.gritter.css" />
<link rel="stylesheet" href="static/dash/unicorn.grey.css" class="skin-color" />
<link rel="stylesheet" href="static/dash/bootstrap-lightbox.css" />
And in my HTML:
<a data-toggle="lightbox" href="#worldlightbox" class="thumbnail"><img src="/static/img/pics/bg/thumbs/WorldThumb.jpg" alt=""></a>
<div class="lightbox" id="worldlightbox" style="display: none;">
<div class='lightbox-content'>
<img src="/static/img/pics/bg/World.jpg">
</div>
When I click the link image, nothing happens at all. There are no errors in the console and the scripts are loading correctly.....
I'm pretty sure there's some conflict somewhere as none of the lightbox plugins I've tried have worked.
If someone can show where I'm going wrong, I'd be really grateful!!
I am sorry this is so late, but I just had the problem myself. The simple answer for your problem is that the lightbox is just not working the way it should be. And the help is scant and incomplete. I don't know how the developer ever got their example to work. But I got mine to work, and it should work for you too:
<ul class="thumbnails" style=" position:relative; top: 110px; display:block;">
<li class="span2">
<a data-toggle="lightbox" href="#carouselLightBox" class="thumbnail">Open Lightbox</a>
</li>
</ul>
<div class="lightbox fade" id="carouselLightBox" style="display: none;">
<div class='lightbox-content'>
<img src="/content/images/mapicons/cad.png" alt="" />
</div>
</div>
For whatever reason, putting your 'a' tag inside the 'ul' with the class name thumbnails, then naming your 'a' tag class thumbnail makes it work. Hopefully Django will take the time to fix this issue soon...