Im new to Jekyll and I am making a site with custom html and css in order. Jekyll downloads the minima theme by default, so I overrode the homepage with the following html:
<!DOCTYPE html>
<html>
<head>
<title>testsite</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
all my html
<script>
$.ajax(an ajax call);
</script>
</body>
</html>
I am looking to add a custom stylesheet, yet I am having trouble correctly linking to within the theme. I have checked online but many forums seem out incorrect on the folder structure.
Here is the current structure.
--layouts
-home.html
--posts
--site
--assets
-main.css
-main.css.map
--jekyll
--update
--privacy
-index.html
--jekyll-cache
-config.yml
-Gemfile
-Gemfile.lock
-index.markdown
My question is, is there a simple way to add a stylesheet that will work on all pages when live? I can link a stylesheet the normal way id do it, however that doesn't work when uploaded to github. Would it be better to start from a build without a theme? If so how do I setup the gemfile?
Thanks!
Great simple approach. I love it. Here is how to proceed:
Remove Minima from your config file/project
Create a directory _includes
Move the head to header.html in _includes
Call the header in the home.html (and any other layout) file by using {% include header.html %}
Link the new CSS in the header.html file
Jekyll without themes (and plugins) is so much better. Looking for more? https://www.jekyllcodex.org
Related
I have a simple flask application. It has flask-bootstrap installed and so I can access some CSS classes from there and my own style sheet in my static folder. However, I want to be able to add another stylesheet from a CDN in my index.html file.
I usually do something like place the following inside head tags.:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Is this possible? I don't think that using the
{{url_for('static' )}}
syntax would work here and I haven't found anything online that's describing what i'm doing (or I couldn't tell).
Yes, this is how I do it too. And then I link to my own stylesheet after the Bootstrap CDN.
Edit: and if you use a base template that is being extended by multiple templates for sub pages you can put the head tag in the base template so it precedes all templates.
I have trouble to make my Css and Javascript working. Here is a capture of my current work. I have created a folder with my different html pages and same for Css and js (i only have one css for everything and several js).
It worked when all my htmls, Css and Js are into the main folder but when it comes to organize into severel foldes, nothing is working except my Htmls.
enter image description here
Thank you very much.
Try this out
<link rel="stylesheet" href="/css/style.css">
Try this for the CSS
<link rel="stylesheet" href="../css/style.css">
All your files are in different directories and if you have to link your HTMLs with the CSS and JS files, you have to get out of the HTMLs directory to the parent directory. And, then specify the path to the CSS, JS, and Images.
Use this to reach the parent directory of the current directory.
../
I see you are using Visual Studio Code, there is a trick for call CSS and Javascript
#Styles.Render("~/css/style.css")
#Styles.Render("~/css/yourstyle.css")
and is a good practice to separate css from javascript folder
#Scripts.Render("~/Scripts/yourscript.js")
I'm working on a Wordpress theme and I have downloaded the Compiled CSS and JS files from getbootstrap official website.
I have moved all the files to my Theme directory, more specifically to /bootstrap/css and bootstrap/js accordingly.
When I call the file in my header.php, nothing happens. But if I use Bootstrap CDN the test website works. The solution might be obvious, but I'm simply not seeing it.
in header.php
<html>
<head>
<meta charset="utf-8" />
<link href=”bootstrap/css/bootstrap.min.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”bootstrap/js/bootstrap.min.js”></script>
Edit: Yes, the files bootstrap.min.css is located in bootstrap/css folder.
First, you should not include hardcoded styles, try enqueueing in the functions.phpfile as the documentation states:
wp_enqueue_style
Second, the reason why the loading works with the CDN is because it's finding the source directly from the repository. This tells us that the path of your style is not right. Be sure that the theme structure be like this:
ThemeName/bootstrap/css/
Last as #Chris G said, you should use the get_stylesheet_directory_uri() function to get the file's relative path.
I know my question is similar to: Bootstrap popup does not appear when include bootstrap.min.css
However it was not resolved and I am practically having the same issue (minus the JS).
I am currently designing my Bootstrap website using Pinegrow, everything looks fine in the software however I realized when I actually preview or upload the code to a browser parts of the website is being overridden, I just found out it's because of the bootstrap.min.css file.
The strange thing is my 'home', 'about me' pages are fine, however when it gets to 'skills', 'portfolio' etc pages the css from my custom file is overridden.
For example:
This is what my software shows
Preview from Pinegrow
And this is what happens when it is in a browser:
Preview from Browser
Things I have done
Some people suggested just deleting the .min file, however doing that mucks up the website.
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" type="text/css"> The custom css file is placed at the bottom in the html (someone said it provides priority to the custom file)
Using the !important rule doesn't work and I don't think it's the right to use it
I am using ID selections in CSS
Is the only solution to go into the .min file and edit the code from there? Is there a way to get my custom CSS code to override the .min instead? Would it help if i posted some of my code? Many thanks for your time.
I would have done so:
If a few page works, my opinion, problem in markup. If you don't use one header section for all pages, try to copy content from skills to about, then I would check the wrapper, and deeper structure first. Do you see any strange rules in development tools on skills page? (I'm learning, and I can only give you simple tips.)
We use ScrewTurn Wiki and I created a Wiki page that contains the CSS information. I used:
<head>
<link rel="stylesheet" type="text/css" href="http://wiki.ourcompany.net/tech.CSS-Master.ashx">
</head>
as the link in all the other Wiki pages as the reference for the CSS info, where Tech is the namespace and CSS-Master is the Wiki page containing the CSS info.
This worked fine for a while, then suddenly it just stopped working. Any suggestions?
Are you trying to apply this CSS across your whole wiki? There's actually a lot you can do with theming. In the main directory on your webserver, there's a 'Themes' subdirectory, where you can make a new folder for a theme, then you can select a theme in the Administration->Configuration page, as well as when you're editing a namespace (if you want to change the theme for a particular namespace).