I use Hugo to generate website. I have a syntax highlight css (e.g. tomorrow-night-blue.css) in /themes/hyde/static/css, a highlight.pack.js in /themes/hyde/js and have the following code in the header.html
<!-- CSS -->
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/print.css" media="print">
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/poole.css">
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/syntax.css">
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/hyde.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/tomorrow-night-blue.css">
<script src="{{ .Site.BaseURL }}js/highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
The code chuck on the rendered website only has a blue background colour but the texts are not highlighted as shown below.
I think the syntax highlight css conflicts with other css, but I don't know where the conflict is and how to resolve it.
Source files are hosted here, if that helps to debug.
Did some search. Couldn't find a solution for my particular issue, but still managed to highlight the code following this post here.
https://github.com/yihui/hugo-xmin/pull/5/files
Essentially, one needs to put something like following in the header.html
<link href="//cdn.bootcss.com/highlight.js/9.12.0/styles/github.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script src="//cdn.bootcss.com/highlight.js/9.12.0/languages/r.min.js"></script>
<script>
hljs.configure({languages: []});
hljs.initHighlightingOnLoad();
</script>
I've put both the link to css and script in the header.html as opposed to putting them separately in hearder.html and footer.html as shown the link. It works either way.
I'm still open to more specific solutions.
Related
I initially was loading a page
somePage
And the index.html would render with styling
<head>
..
<link rel="stylesheet" type="text/css" href="app/themes/basic_themes/blabla/base_theme/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/themes/defaults/generated.css">
<link rel="stylesheet" type="text/css" href="app/themes/basic_themes/blabla/generated.css">
<link rel="stylesheet" type="text/css" href="app/themes/brands/blabla/generated.css">
<script src="/js/libs/jquery.min.js"></script>
</head>
The above code works fine in production. However someone made some changes and deleted the app folder and refactored the code to this:
somePage
And the index.html to
<head>
..
<link rel="stylesheet" type="text/css" href="themes/basic_themes/blabla/base_theme/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="themes/defaults/generated.css">
<link rel="stylesheet" type="text/css" href="themes/basic_themes/blabla/generated.css">
<link rel="stylesheet" type="text/css" href="themes/brands/blabla/generated.css">
<script src="/js/libs/jquery.min.js"></script>
</head>
Now index.html cannot find the css styling. I tried different relative and absolute paths but nothing seems to work.
Any help?
EDIT: My folder structure is:
When I load my page localy http://localhost:56071/blabla/en/ and then click to navigate to "somePage" I end up on http://localhost:56071/tos/blabla/en/ a page with text and no styling. However, if I try to navigate to http://localhost:56071/themes/basic_themes/blabla/base_theme/bootstrap.min.css it returns a 404. BUT I can access my .css file through this link http://localhost:56071/blabla/en/themes/basic_themes/blabla/base_theme/bootstrap.min.css Can someone explain whats happening here?
The third link in the below code is supposed to be my own stylesheet for a django app I'm creating. There is only one style sheet in the entire application, but for some reason when I went to add new styles today none of them were taking place.
I deleted all the CSS from the file to see if it impacted the site, and it had no effect. Then I deleted the file all together, and still no change in appearance.
Then I commented out the <link /> to the stylesheet and the website loses its styles! I assume one of two things is happening
I'm editing the wrong stylesheet
Something is messed up with the browser. However, as I mentioned, this is the only stylesheet in the entire app directory, so I don't know how there could be another style sheet that the link is referring to. Any help is greatly appreciated!
<head>
{% load static %}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.css' %}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="{% static 'polls/script.js' %}"></script>
</head>
I prepared my bootstrap website using visual studio and it works properly.
But when I try to run html file through going in that folder then bootstrap css is not loading.
Can you tell me the reason behind this?
Thanks in advance
Here is my head section
<link href="../font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="../dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="../dist/css/bootstrap-theme.css" rel="stylesheet" />
<title > K.P Facility Management</title>
<link href="StyleSheet.css" rel="stylesheet" />
<link rel="shortcut icon" type="image/png" href="../images/title.png" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../dist/js/bootstrap.min.js"></script>
Most probably the paths are wrong. With the "../" before your path, you're going up a level from the root, which will return an error (if you look at the inspector).
Try placing this html in the folder that contains the folders you are going to use files from, and change the paths to:
<link href="dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="dist/css/bootstrap-theme.css" rel="stylesheet" />
I am trying to make a simple website using Python and Flask. Right now, I have the HTML and CSS finished, but my page does not show any of the CSS. My files are in the following hierarchy:
/static
/static/css/style.css
/static/js/skel.js
/templates
/templates/index.html
I have the following code in my html file:
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/config.js"></script>
<script src="../static/js/skel.min.js"></script>
<script src="../static/js/skel-panels.min.js"></script>
<noscript>
<link rel="stylesheet" href="../static/css/skel-noscript.css" />
<link rel="stylesheet" href="../static/style.css" />
<link rel="stylesheet" href="../static/css/style-desktop.css" />
</noscript>
When I run this, the terminal displays "304" for the JS files and gets them from "/static/js/skel.js" which I think is correct, but it then displays "404" for the CSS files and gets them from "/css/style.css". I am not quite sure why this is happening - shouldn't this be retrieving files from /static/css/style.css? How can I fix it?
Thanks for the help.
Your on-disk layout is not the same thing as the routes served by your Flask site. Do not rely on the relative paths between templates and static.
Instead, have Flask calculate the routes to static files for you, using the url_for() function in your Jinja template:
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/config.js') }}"></script>
<script src="{{ url_for('static', filename='js/skel.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/skel-panels.min.js') }}"></script>
<noscript>
<link rel="stylesheet" href="{{ url_for('static', filename='css/skel-noscript.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/style-desktop.css') }}" />
</noscript>
If the template is really what you have, and your layout is really what you list, then they don't match:
/static/css/style.css
does not match
<link rel="stylesheet" href="../static/style.css" />
Instead you should have
<link rel="stylesheet" href="../static/css/style.css" />
or move style.css up one folder. Note however that IIRC you can't have ../ in path, because static folder is supposed to be at same level as your flask app script. So you should be able to just have
<link rel="stylesheet" href="static/css/style.css" />
but as others have mentioned it is better to have flask generate the url for you via url_for (see example in step 6 of tutorial).
I had the same problem. This solved it:
open your config.js and add static/ in front of the css/... in all links like href="css/style.css" that they look like href="static/css/style.css" and it should be fine.
The question is already 5 months old but I hope I can help someone who has the same problem.
I am trying to use a bootswatch Bootstrap template that you can find here: http://www.bootstrapcdn.com/#bootswatch_tab (The template is Amelia).
Do I only add this to my index.html document:
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css" rel="stylesheet">
or do I need to add these two as well to make it work:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
I figured I just needed the first piece of code but I need it to connect to my style.css document.
For Bootstrap, you need only these by default :
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Depending on the theme, which you want to use, you will have to go through the source code to check what other external files have been used for layout(css) and visible effects(.js) for it
go through src and you'll find a url for amelia :
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css" rel="stylesheet">