Internal CSS works fine but external style sheet isn't working. I end up with the standard page with no styling showing up. The templates served just fine except no CSS.
Created a simple app to eliminate some of the variables but the same issue persists.
root of app
C:\workspace\goworkspace\src\practice3\
GOPATH C:\workspace\goworkspace
//practice3/main.go
package main
import (
"log"
"net/http"
)
func main() {
fs := http.FileServer(http.Dir("static"))
http.Handle("/", fs)
log.Println("Listening...")
http.ListenAndServe(":8080", nil)
}
//practice3/static/example.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A static page</title>
<link rel="stylesheet" href="/stylesheets/main.css">
</head>
<body>
<h1>Hello from a static page</h1>
</body>
</html>
//practice3/stylesheets/main.css
body {
background-color: lightblue;
}
h1 {
color: navy;`enter code here`
margin-left: 20px;
}
No errors, everything seems to work fine (including internal css) except for the external css.
Related
using dark mode in a nextjs web app with tailwind, when scrolling, if you scroll past the scroll container (almost like your bouncing off the bottom or top of the page when scrolling), the dark mode isn't extending all the way, so the color isn't applying and it's just the previous color underneath (white in this case), what is the reason for this and is there a way to extend the dark mode fully?
Browsers that don't work
Firefox
Brave
Chrome
Browsers that do work
Safari
stackoverflow and tailwindcss.com in dark mode handle this well and the dark mode extends fully on the whole page
_app.tsx
<Store state={state} dispatch={dispatch}>
<Head>
<meta charSet="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
</Head>
<div className="h-screen dark dark:bg-black dark:text-white overscroll-auto lg:overscroll-contain">
<Component {...pageProps} id="app" />
</div>
</Store>{" "}
You must apply the styles to the body or :root (HTML) element. For the examples, I'll show them applied to the :root element.
You have two primary options in Next.js - global stylesheet or inline.
Global stylesheet with tailwind directives
Global styles
global.css
#tailwind base;
#layer base {
:root {
#apply dark:bg-black dark:text-white;
}
}
inline class
To apply styles inline, you must create a custom _document page. Again, you can apply the styles to either the body or html tags.
_document.js
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html className="dark:bg-black dark:text-white">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
I believe you need to add these classes to the <body> of the document, not just the main div.
There are a few ways to do add css classes to the body in NextJS, but one of the more common ways is to add it in a useEffect or componentDidMount of your Layout component depending on what kind it is.
For example:
useEffect(() => {
document.querySelector("body").classList.add("dark dark:bg-black dark:text-white");
}, []);
I was running into the same problem. Turns out it was because my dark background/foreground color styling was on a React component (a container layout component) rather than being on the body element.
I fixed it by setting the dark background/foreground directly on the body element in my css file:
#layer base {
body {
#apply dark:bg-slate-800 dark:text-white;
}
}
Then in your pages/_app.jsx file or wherever, you can call document.documentElement.classList.add("dark"); and the dark mode will be set properly even on scroll.
https://tailwindcss.com/docs/dark-mode
I tried all of previous answers and none of them worked for me. The only thing that finally worked was to create a _document.js, and add an id to the HTML section:
_document.js
import React from 'react'
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html id="html" className="bg-white">
<Head />
<body className="bg-bg-light dark:bg-bg-dark">
<Main />
<NextScript />
</body>
</Html>
)
}
Then add and remove the dark background (without the 'dark:' prefix) during the toggle:
DarkMode.jsx
useEffect(() => {
if (darkMode !== undefined) {
if (darkMode) {
document.body.classList.add("dark");
document.getElementById("html").classList.add("bg-black")
} else if (!darkMode) {
document.body.classList.remove("dark");
document.getElementById("html").classList.remove("bg-black")
}
}
}, [darkMode])
I did not add the tailwind directive to globals.css
Thanks to Sean W for setting me in the right direction.
Is it possible to somehow import the image base64 from another file? or save the url to a variable and import it to CSS? since the code is very long and it does not seem clean in this way.
Thank you for your help guys.
index.css
.column {
margin: calc(var(--grid) / 2);
border: var(--borderWidth) solid #fffddd;
border-radius: var(--borderRadius);
background-image: linear-gradient(rgba(0, 0, 0, 0.769),rgba(0, 0, 0, 0.961)),url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QDWRXhpZgAATU0AKgAAAAgABAEPAAIAAAASAAAAPgEQAAIAAAAMAAAAUIKaAAUAAAABAAAAXIdpAAQAAAABAAAAZAAAAABOSUtPTiBDT1JQT1JBVElPTgBOSUtPTiBENTEwMAAAAAAKAAAMgAAFgpoABQAAAAEAAACigp0ABQAAAAEAAACqiCcAAwAAAAICgAAAkAMAAgAAABQAAACykgoABQAAAAEAA...
What you could do is to use var() CSS from inside another CSS file that you can import .
File myCssVar.css
:root {
--mybguri64: url(data-image/jpeg;base64, ... ) ;
}
Your CSS file
#import url(myCssVar.css);
.column {
background-image: linear-gradient( ....), var(--mybguri64) ... ;
}
It will make your CSS easier to read.
Looks like from your edit you almost had it .
Background-image's URL is a string value. Of course, you can store it in another file, import it and use js to inject it dynamically.
The best solution to that is to use the server side script with an inline css to make this happen. to make this happen. lets say the backend language is php. and your pages are made up of 3 templates components. It could be in different backend languages either ASP.net, Javs, php, node... but i'm using php here since i'm vast in it. just follow through its quite simple and direct.
base64ImageFile.php - the file with the base64image variable it could be more than 1
header_template.php
footer_template.php
application.php
then in your base64Images.php you have this there..
<?php
$base64Img ='data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7';
$base64Image2 = 'data:image/png;base64,sgw....';
$base64Image3 = 'data:image/png;base64,sgw....';
$base64Image4 = 'data:image/png;base64,sgw....';
?>
**in my header_template.php, add the template to the beginning of the file.. **
<?php
require('base64images.php'); //the images are rendered here..
?>
<!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.0">
<title>Document</title>
<style type="text/css">
li {
background:url(<?php echo $base64Img; ?>) <!-- and used here --->
no-repeat
left center;
padding: 5px 0 5px 25px;
}
</style>
</head>
in my footer_template.php
<!--- footer elements/scripts go here --->
<script src="...."></script>
<script src="..."></script>
</html>
application.php - file, merge template components to build page here
<?php require('header_template.php'); ?>
<body>
.......body content coes here...
</body>
<?php require('footer_template.php'); ?>
this way you can re-use and seperate the components and even seperate images into different files and call them. in your file instead of typing it out. or even multiple images... but the CSS must be inline with the HTML..
I have a simple html do display an animation i made in After Effects, but i can't display the animation when loading it locally (data.json). But if i upload the animation through LottieFiles and use the link generated in my html file, it works. Can someone please explain me why i am not being able to load the animation through my data.json instead from the generated link ?
Bellow i put the code i have so far:
<head>
<!-- Meta -->
<meta charset="UTF-8">
<title>Bodymovin Demo</title>
<style>
body {
text-align: center;
}
h1 {
margin-top: 2em;
}
#bm {
width: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Test Animation</h1>
<div id="bm"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
<script>
var animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: true,
autoplay: true,
// this way works, but if i put 'data.json' which is on the same directory of this file it doesn't work
path: 'https://assets7.lottiefiles.com/packages/lf20_kxQ49M.json'
});
</script>
</body>
I also have a link to my 'data.json' file:
https://drive.google.com/file/d/1xsikpLLQY-7FMV1_S5VelmB2_85LD-oi/view?usp=sharing
Most likely you are getting a CORS error.
For security reasons browsers don't seem to allow you to load JSON files stored on your computer, it will work as long as the .json file is hosted online.
So through lottiefiles as you've done, or on your web hosting.
This question already has answers here:
How do I serve CSS and JS in Go
(2 answers)
Closed 4 years ago.
I just started learning go and 1 of the things I really wanna learn to do is making sites in go. I watched some tutorials for it and making sites worked, but I didn't know how to add styles.
I searched for some examples on the internet and stackoverflow, but couldn't find one that actually worked for me (and stayed simple).
Underneath is the code that I ended up with.
But I think I got a new problem now cause in the console it says:
I tried a lot of solutions that I found on the internet for this but none of them worked so I am pretty sure it is because I imported the css wrongly in go.
Go (functions.go):
package main
import (
"html/template"
"net/http"
)
type IndexPage struct {
Title string
SubTitle string
}
func indexHandler(w http.ResponseWriter, r *http.Request){
p := IndexPage{Title: "Pizza site", SubTitle: "everyone loves pizzas"}
t, _ := template.ParseFiles("index.html")
t.Execute(w,p)
}
func main() {
http.HandleFunc("/", indexHandler)
http.Handle("/css/", http.FileServer(http.Dir("css")))
http.ListenAndServe(":8080", nil)
}
Html (index.html):
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Pizzaaaaaaa</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<article>
<h1>
{{ .Title }}
<span class="subtitle">{{ .SubTitle }}</span>
</h1>
<p>Some text</p>
</article>
</body>
</html>
CSS ( /css/style.css )
*{
color: rgb(250, 157, 157);
}
FileTree
Your handle return 404 when you try to access css file from this url: /css/*
Change your css handle with this:
http.Handle("/css/", http.StripPrefix("/css/", http.FileServer(http.Dir("./css"))))
*You got 'text/plain' because the 404 is a plain text.
You have to add the mime type for css files in your response header.
if strings.HasSuffix(path, ".css") {
w.Header().Add("Content-Type", "text/css")
}
Or something similar with a variable for multiple different mime types.
EDIT:
Please also check this go lang package to include for better mime type handling:
https://golang.org/pkg/mime/
I'm trying to make a simple example work on my local environment. I want to make a map on my website, but once I downloaded the necessary files I've got strange problems. First, I had to add for the example script link the 'type="module"' code, which is already made me crazy. Nobody tests these applications, or my environment is so special? Why are they even using the import tag, if it's not working in the most used browser like a charm?! After I extended the example code and changed the import links to be fine for my environment (ol/Map.js to /ol/Map.js), now I've got this error you can read in the title. Failed to resolve module specifier "rbush". What can I do? I have no idea. There must be a main point I have missed. The example (https://openlayers.org/en/latest/examples/simple.html) works fine online on openlayers.org, but If I follow the instructions It don't on my end. Why?
OpenLayers 5.1.3 is meant to be used with the npm package manager as described here:
https://openlayers.org/en/latest/doc/tutorials/bundle.html
To use it without including the dependencies and "building" it, see the quick start page in the documentation:
Put a map on a page
Below you'll find a complete working example. Create a new file, copy in the contents below, and open in a browser:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css" type="text/css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.map {
height: 100%;
}
</style>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
working example of the "simple" example