Update: After a conversation with a project maintainer and a few changes on my part, imports are working again (see below), but my path to the stylesheet in the head is incorrect. If I have my main file as screen.css or similar, what is the recommended way to reference this in my <head> element?
My _config.yml for assets:
assets:
compress:
css: false
js: false
autowrite: true
cache: .asset-cache
cache_type: filesystem
skip_baseurl_with_cdn: false
skip_prefix_with_cdn: false
prefix: "/assets"
digest: true
sources:
- assets/css
features:
liquid: false
integrity: false
automatic_img_size: true
automatic_img_alt : true
`
Here's my screenstylesheet:
#import "variables";
#import "grid";
body {
line-height: 1.6;
font-size: 18px;
}
h1, h2, h3 {
line-height: 1.2;
}
.social ul {
list-style-type: none;
text-align: center;
}
.social ul li {
display: inline;
}
.social ul li a {
text-decoration: none;
}
.rights {
text-align: center;
}
Related
I am building an ubereats copy with react.
To identically copy the style in key components (such as the navbar and the sidebar) I need to use custom css.
I don't need to make an exact copy and I want to save up time, that's when i decided to use React-bootstrap aswell.
To work with react bootstrap I need to have this line in my index.js or App.js, I have it on my index.js :
import 'bootstrap/dist/css/bootstrap.min.css';
To work with my custom css I have to import those, I have a custom css for my navbar and my sidebar and I am importing the css in the component, in the Navbar:
import './MainNav.css';
I found that if I comment out the line where I import React-bootstrap and run npm start my navbar is displayed according to my css, and, obviously, React-my bootstrap components are unstyled:
Page without React-bootstrap min css imported
And if i don't comment out the line where I import React-bootstrap and run npm start my navbar elements are all around the place and I can't manage to restyle them back in the desired position but, obviously my React-bootstrap components are styled accordingly:
Page with React-bootstrap min css imported
I haven't been able to find a post related to this problem, how can I fix the compatibility problem?
I have tried with importing import 'bootstrap/dist/css/bootstrap.min.css'; only in those components it is needed but it is all the same.
I installed React-bootstrap via npm and have this versions:
"react": "^17.0.0",
"react-bootstrap": "^1.4.0",
I also tried to include bootstrap from CDN by adding this line in my index.html instead of using the import in index.js but i had the same issue:
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
Send help
EDIT: I am including MainNav.css upon request.
#import url(//db.onlinewebfonts.com/c/11469c307f0de6481e3a04cc5d54ae93?family=Uber+Move+Text);
:root {
--font-family: sans-serif;
font-size: 16px;
--color-green: #06c167;
--color-grey: #eee;
--color-greyDarker: #545454;
}
* {
box-sizing: border-box;
}
#font-face {
font-family: "Uber Move Text";
src: url("//db.onlinewebfonts.com/t/11469c307f0de6481e3a04cc5d54ae93.eot");
src: url("//db.onlinewebfonts.com/t/11469c307f0de6481e3a04cc5d54ae93.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/11469c307f0de6481e3a04cc5d54ae93.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/11469c307f0de6481e3a04cc5d54ae93.woff") format("woff"), url("//db.onlinewebfonts.com/t/11469c307f0de6481e3a04cc5d54ae93.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/11469c307f0de6481e3a04cc5d54ae93.svg#Uber Move Text") format("svg");
}
.smallText {
font-size: 0.7rem;
font-weight: 300;
font-family: "Uber Move Text";
}
.logo h1 span {
font-weight: 900;
color: var(--color-green);
font-size: 24px;
}
.general input {
font-family: sans-serif;
font-size: 15px;
font-weight: bold;
font-family: "Uber Move Text";
}
.logo {
font-weight: 300;
color: white;
font-family: "Uber Move Text";
}
.logo {
font-weight: 600;
color: var(--color-green);
font-family: "Uber Move Text";
}
input {
border: rgb(41, 41, 41);
border-width: 2px;
border-bottom-style: solid;
font-size: 16px;
padding: 10px;
background: rgb(240, 240, 240);
color: #000;
letter-spacing: 1px;
font-family: "Uber Move Text";
text-align: left;
width: 120%;
}
.navbarform {
margin-left: 50%;
margin-right: auto;
}
.tosidebar {
margin-right: 3%;
}
.navbar {
margin-bottom: 20px;
width: 100%;
}
.linkto{
text-decoration: none;
}
.linkto:visited { text-decoration: none; color:black; }
.linkto:hover { text-decoration: none; color:black; }
.linkto:focus { text-decoration: none; color:black; }
.linkto:hover, a:active { text-decoration: none; color:black }
.logout {
font-size: 20px;
}
Hard to tell without looking at your MainNav.css. So please include your file next time when you ask questions like this. Anyway, my guess is that the class selectors you have in your stylesheet are conflicting with classes defined by Bootstrap.
My code was all working correctly until I did a CSS3 validation which told me I needed to move the #import font code line to the first line in the css style file. When, I did that of course I realized the web fonts I had chosen had not been displaying, so I fixed all the sizes, etc. to best display the pages with the chosen fonts.
I can't seem to figure out this last quirk, though. The p a:link, a:visited color blue is not being picked up in the p tags, except for one place in the footnote area (footnote #6)! The other a links within p tags are picking the white color up from the insert-container p a styles. I understand that the last style overrides previous ones, but the selectors are different, so I'm not understanding why this is happening.
I've cleared the cache, tried different browsers, tried changing the colors on each of the a link styles, but if I change it to fix the paragraph text, then it ends up also changing the insert-container link styles.
You can see the issue on my CodePen at https://codepen.io/Ovimel/pen/XQjgeg and the CSS is shown below. Thanks!
CSS3
/*styling for paragraph text links */
p a {
font-weight: 900;
}
p a:link,
a:visited {
color: #194a76;
text-decoration: underline;
}
p a:hover,
a:active {
color: #194a76;
text-decoration: underline;
}
/* styling for colored page inserts from xopixel dot com */
#fullwidth-insert {
padding: 30px 0;
background: #7d654b;
text-align: center;
color: #fff;
font-family: "Carme", sans-serif;
font-size: 1em;
font-weight: 400;
line-height: 1.5;
text-rendering: optimizeLegibility;
}
.insert-container {
max-width: 85%;
width: 960px;
margin: 0 auto;
}
.insert-heading {
margin: 0;
font-size: 2rem;
font-weight: 300;
padding-bottom: 1rem;
letter-spacing: 0.08rem;
}
/* styling for full-width insert heading links */
.insert-heading a {
color: #fff;
font-family: "Days One", sans-serif;
font-weight: 300;
text-decoration: underline;
}
.insert-heading a:hover,
a:active {
text-decoration: underline;
color: #194a76;
}
/* styling for full-width insert paragraph links */
.insert-container p a:link,
a:visited {
color: white;
font-weight: 700;
text-decoration: underline;
}
.insert-container p a:hover,
a:active {
text-decoration: underline;
color: #194a76;
}
/*styling for footnotes*/
p.footnote {
font-size: 0.8em;
/*10 pt 13px */
}
Higher specificity will beat out order in the stylesheet. This selector:
.insert-container p a:link
has higher specificity than this one:
p a:link
You can see the selector is more specific as it targets links inside a p inside the .insert-container div. For more on the how it is calculated by the browser: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I've watched some videos and copied what they did but it's not working. I have my file in the same folder as my documents. Ugh, the site wants me to add more "details" or it won't let me post. I had my html and my css pages separated but it put them together. If you know how feel free to break them apart.
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
}
.potato {
margin-left: 250px;
margin-top: 40px;
margin-right: 20px;
line-height: 38px;
font-family: 'lazyspringday';
}
.p1 {
font-family: 'lazyspringday';
}
body {
margin: 0;
padding: 0;
font-family: 'lazyspringday', serif;
}
#font-face {
font-family: "lazyspringday";
src: url('lazyspringday.ttf') format:('truetypefont');
}
.nav {
background-color: #ffb6c1;
color: #ffffff list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav>li {
display: inline-block;
padding-right: 50px;
font-size: 16px;
}
.nav>li>a {
text-decoration: none;
color: #ffffff
}
.nav>li>a:hover {
color: #C0C0C0
}
.banner {
width: 100;
display: block;
}
.banner>.bannerimage {
width: 100;
height: 100;
display: block;
}
ul.nav {
margin: 0;
}
div.left {
width: 50%;
padding: 0 0 0 5%;
margin-right: 5px;
margin-top: 10px;
float: left
}
div.right {
width: 50%;
padding: 0 5% 0 0;
float: right
}
p {
padding-top: 25px;
text-align: left;
}
.potato {
color: #00b8e6;
font-size: 15px;
font-family: 'lazyspringday';
font-weight: 100;
}
<div class="header">
<img class="banner-image" src="ccc.png" width="100%" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<img src="british-shorthair-3055340_1920.jpg" width: "400" height="400" class="float-img">
<p class="potato">
Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute cat themed foods and drinks in a relaxing environment. Spend some quality time playing with some feline friends. Enjoy watching the cats have fun in an environment made just for them.
All cats will be adoptable and provided by the local shelter. Cat Corner Cafe will also have fun events like cat yoga, art with cats and game days. Come by yourself, with your meetup group or have your next birthday party here! We look forward to seeing
you. To be alerted when we open please sign up with your email on our homepage.
</p>
first of all define #font face on the top and remove ":" from format and rename turetypefont to truetype
#font-face {
font-family: "lazyspringday";
src: url('lazyspringday.ttf') format('truetype');
}
Hope this will help
first and foremost, put your fonts in fonts folder seperately and css stylesheet in css folder, then include/import fonts in your css at top like this.
#font-face {
font-family: 'lazyspringday';
src: url('../fonts/lazyspringday.eot');
src: url('../fonts/lazyspringday.eot?#iefix') format('embedded-opentype'),
url('../fonts/lazyspringday.woff2') format('woff2'),
url('../fonts/lazyspringday.woff') format('woff'),
url('../fonts/lazyspringday.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
we use woff and woff2 for using fonts in web.
you can also use web fonts generator to generate webfonts just uploading your .ttf file there.
In the head tag of your html file (index?) place something like this:
<link href="(your file location)" rel="stylesheet">
After importing the font you can do it in several different ways. I'd recommend you to use a body tag that would contain everything on that html file.
If you chose to use the body tag, simply add this line to your css file:
body {
font-family: 'Montserrat', serif;
}
Example:
Use Google Fonts. https://fonts.google.com
Then copy this code into the <head> of your HTML document.
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Then use the following CSS rules to specify these families:
font-family: 'Roboto', sans-serif;
I want to add a Leaflet map to my Website. Unfortunately my own CSS file seems to override Leaflet's CSS-file on some elements.
The map's zoom buttons should look like this:
But they now look like this on my homepage:
I wonder if it is my own CSS file overriding the CSS from Leaflet. But how can I prevent this? Have a look at my #content a. Seems like the zoom buttons are interpreted as a link and so take the CSS properties from my file.
body {
background-color: #EFEFEF;
margin: 0;
padding: 0;
}
#wrapper {
width: 1000px;
padding: 0;
margin: 0 auto;
}
#content {
background-color: #FFFFFF;
width: 700px;
float: left;
padding: 0 2.5em 0 2.5em;
margin: 0;
}
#content p, ol, ul {
font-family: "Open Sans Condensed", sans-serif;
color: #444444;
}
#content a:link, #content a:visited {
color: #C09100;
text-decoration: none;
}
#content a:hover, #content a:active {
color: #C09100;
text-decoration: underline;
}
#map {
height: 400px;
width: 100%;
margin: 0 auto;
}
strong {
color: #444444;
font-size: 100%;
font-weight: bold;
}
h1 {
color: #444444;
font: 3em "Amatic SC";
text-align: center;
}
h2 {
color: #444444;
font: 2em "Amatic SC";
text-align: center;
}
<html>
<head>
<!-- Link to Leaflet's CSS file: -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<!-- My own CSS file: -->
<link rel="stylesheet" type="text/css" href="rumkommenstyle.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="JS/Leaflet.MakiMarkers.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="map">
<script type="text/javascript">
var layer = new L.StamenTileLayer("watercolor");
var map = new L.Map("map", {
center: new L.LatLng(56.074207, -3.376634),
zoom: 6
});
var icon = L.MakiMarkers.icon({
icon: "marker",
color: "#900",
size: "m",
});
map.addLayer(layer);
L.marker([56.074207, -3.376634], {
icon: icon,
title: 'Crossgates, Fife, Scotland',
alt: 'Crossgates, Fife, Scotland',
}).addTo(map);
</script>
</div>
</div>
</div>
</body>
</html>
(answer edited)
Short answer:
To get the black color on your zoom in/out buttons, you can add this to your css:
.leaflet-bar > a:link { color: black; }
Long answer:
You notice that your div with id="map" contains a script. When this script is run, it creates a div with class leaflet-bar in which the zoom buttons are actually links.
So, if you look at the tree of elements, you'll find that #content contains div.leaflet-bar which contains the zoom links.
So, which color should apply to the links ( #content a:link or .leaflet-bar a:link) ?
Colors of leaflet links are set in http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css
When I test this
http://www.andrewsellick.com/examples/sliding-side-bar/#
results are buggy and not the same.
Don't both based on the same standard ?
Every browser has it's own default styles.
You should un-apply the browser defaults with a "reset" stylesheet (here is mine):
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ul { list-style-type: none; }
ol { list-style-type: decimal; }
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
html, body { line-height: 1; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
blockquote, q { quotes: "" ""; }
* { font-family: Verdana, "Trebuchet MS", sans-serif;
font-size: 13px; color: #666;
text-decoration: none; white-space: normal;
vertical-align: baseline; }
input[text="submit"], button { color: #000; }
HTML and CSS are rendered by each browser how they think it is better, based on some conditions. This can be done without violating the standard.
Think about it like two people reading a common text: their voices differ even if they both are reading it correctly.
That said, if you told us more in detail what you would expect to see, we would be able to actually help you.
You can also use YUI to reset default browser css: http://developer.yahoo.com/yui/reset/
That said, even resetters don't always work, but you can try them out. They'll certainly ease the pain to some degree.