I want to add a carousel in a Hugo site, so I'm trying to use tw-elements. I have used their quick start guide and put the tw-elements plugin in the plugins section of the tailwind-config.js file, but the script isn't exported to the public folder. Has anyone done this before? What step(s) am I missing?
Thanks!
Just putting the tailwind-config.js file in Hugo won't be enough. You need to:
generate a style.css using Tailwind in your assets/ or static/ directory
put a link to the style.css generated by Tailwind into Hugo, for example in <head></head> section, for example in the baseof.html template.
See here for a complete guide on integrating Hugo with Tailwind:
https://www.unsungnovelty.org/posts/03/2022/how-to-add-tailwind-css-3-to-a-hugo-website-in-2022/
An alternative is to use Tailwind CDN by putting the following line in the <head></head> section of your site:
<script src="https://cdn.tailwindcss.com"></script>
Related
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
When I run the pagespeed test of Google with my website, it tells me to optimize the CSS delivery.
I checked a lot of websites, tried to combine my CSS files into one and deregistered the wp_enqueue_styles handles. My new CSS file loaded when I tested, but the website was void of CSS . (I deregistered files like Bootstrap and FontAwesome).
It seems that it did not load the CSS of my new file, although I copied and pasted exactly what was in the old CSS files.
For information, I am using the Beaver Builder Child Theme and plugin. I created a folder includes/css in the root directory of my website in which I placed the new CSS file. This new file I loaded in header.php.
I followed exactly the steps described here.
Could someone help me with the steps to resolve this?
Did you link the CSS file you created in the page in question?
Something like this in your head:
<link rel="stylesheet" href="/mynewcss.css" />
Also, if you have a test page set up, I can tell you exactly what you need to do.
I'm on Debian Jessie, 32bit, editing with gEdit and trying to get BootStrap to work without an internet connexion. I went to getbootstrap.com/getting-started, downloaded the files from the left-most button, extracted the various folders (js, css, fonts) into a folder named bootstrap.
I also created custom.css in the css folder and threw in a line
#qlksjhdf { color:#FF0000;}
Within this folder, I created an HTML file. Then I copied some code from a working example. When I use the CDN links, all works fine, as expected, but when I replace the CDN with local linking such as "css/bootstrap.css", the styling disappears, although the H1 styling in "css/custom.css" works.
Do I need to "install" something or wouldn't just downloading and linking the files suffice ? And yes, I've also downloaded jQuery and linked it locally...
Are you sure that you're using the right file path for the Bootstrap resources. If you put everything in a folder called bootstrap, you should be able to link the css file like this from your index.html:
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
Double check the path you are using to reference the bootstrap files. That is most likely the issue. If everything looks fine, can you add some code to the example or create a JS fiddle with the code you are working with?
Any ideas how i can use Fortawesome without override the theme css in wordpress?
I tried using boostrap cdn adn upload the folder on server.
You can add the CDN link of fontawesome to your theme's 'functions.php' file. A brief information about this has been given here. You can also use this plugin to integrate fontawesome icons easily into your blog/site.
I'm trying to add an external css file in my index.html.
Organization-name - codehunks
My directory structure is as:
codehunks.github.io
_layouts/
style.css
LICENSE.txt
README.rst
index.html
I tried adding it as:
<link rel="stylesheet" type="text/css" href="_layouts/styles.css"/>
but it didn't work.
I searched and get to know that raw.github.com/../.. doesn't work in case of css/text
I found some articles adding it by providing link as [username].github.io/[repo]/[folder]/[filname] but this didn't work for my organization.
I tried adding it as codehunks.github.com/codehunks.github.io/_layouts/style.css but the link is giving me 404 not found response.
Any possible solution or I'm following something wrong.
Here's my page codehunks.github.io and here's my code Source Code
your style will work at /styles.css if you put it in the root, _layout folder is used by jekyll/ruby.
create a css folder in the root of your repo and put the style in there.
/css/style.css instead.