i'm very confused about how to add css files to a blog a made on django following this tutorial: http://www.programmersbook.com/page/21/Django-Beginner-Tutorial-Part-I/
Basically, i want to add a css style sheet to my blog. I've looked around a bit and seen somethings about static and media files and urls. I read a bit about them on Django's website but coulnd't fully understand them.
So, could anyone kindly tell me how i should display:
<link rel="stylesheet" type="text/css" href="style.css" />
They styles work when i do it internally, but how do i show external stylesheets?
It's right in the Django docs, check here. Follow the instructions there and you will be able to use something like that:
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}style.css" />
EDIT:
You should sepearate you "static" files from your templates. So move all your .css, .js and images to one directory in your app (it's default name is /static). Honestly, everything is written in the link provided.
Related
I am trying to host my website for free using GitHub (and I'm new to GitHub so sorry if this is a dumb question), but it just is not using the stylesheet I created and uploaded with all my files. It also is not loading images from my images folder. So from what I can tell, it doesn't like using local files, but it is fine using linked stylesheets like Bootstrap and images linked from somewhere online.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="_css/bootstrapOverride.css">
<link rel="stylesheet" type="text/css" href="_css/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
It refuses to use my bootstrapOverride.css and the animate.css.
How can I make it use local files like these? Same question with images as well?
I figured out the problem. The issue was my folder names in linking to my stylesheets. GitHub pages uses Jekyll and Jekyll ignores anything after an underscore. Since the folder I had my CSS in was "_css" it would see the underscore and stop there. I took the underscores out of the folder names, updated my links to the CSS and now we are all good!
I am building Semantic UI with Gulp using this guide
However, the problem is now that the icons are not showing. So if I use
<i class="facebook icon"></i>, nothing shows up.
I guess I haven't built the icon font or something like that.
Is it necessary to load Font Awesome or something like that myself? I have read through the Semantic UI documentation, but I cannot find anywhere stating that I have to do anything to enable icons.
You need to include the font assets which are located in themes/default/assets/fonts/
The themes folder must be in the same directory as your semantic.css file.
The fonts are imported externally from the semantic.css file from within the themes directory.
To obtain this directory, download the zip for semantic ui and look inside the dist folder.
I was having the same issue, use this link tag in the head of your html and you're good to go :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
Got this from their official website.
Since it's not marked as ansered yet in 2019... Here's the clear answer. The above answers are correct as well, just not straight forward.
So basically what you missed out is the inclusion of the icons themselves. When you download semantic-ui it comes with themes folder within the "dist" folder. what you must do is copy that themes folder and paste it in your project folder where your semantic-ui.css is located. and it will work.
Please remember to mark the question as answered.
I had an CORS-issue (causing square empty icons) with the Semantic UI Icons when loading the minified CSS from a CDN. Turns out that it was my location override that caused it, turning it off made the icons display properly.
I fixed the problem replacing this line
<link rel="stylesheet" type="text/css" href="/dist/semantic.min.css">
with this
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.7/dist/semantic.min.css">
I also had to add link to icon.min.css
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/components/icon.min.css">
I wrote a post about it on medium :)
In my case I forgot to import the semantic ui css file. Import it in the App.js ( as it is the top level file ) or anywhere inside your project.
import 'semantic-ui-css/semantic.min.css'
I had the same problem and I solve it adding the following lines on my webpack.mix.js
.copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff','public/css/themes/default/assets/fonts/icons.woff')
.copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff2','public/css/themes/default/assets/fonts/icons.woff2')
.copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.ttf','public/css/themes/default/assets/fonts/icons.ttf')
and then executing the command
npm run dev
This add in my case the missing files I need
In the semantic.css file, you'll find this line:
background: url("./themes/.....")
so, what you have to do is to copy the themes folder with all its contents beside your semantic.min.css
All simply copy the folder Semantic-UI-CSS-master with all its contents to your public/static/wwww folder, and will get things working smoothly.
I partially fixed this by downloading icon.min.css from this link and then replacing the CDN link with this two lines:
<link rel="stylesheet" href="~/Content/icon.min.css" />
<link rel="stylesheet" href="~/Content/semantic.min.css"/>
There are still some icons missing: all the outlined ones.
You could also try the fonts folder from this branch but it did not work for me.
So as the other answers have provided you can change the script to look like:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
Stop the server and close your browser. If you do not fully close the browser the error will persist. Restart your server.
If this does not resolve your issue, you can also choose to install the CSS library locally via
npm install semantic-ui-css
Then, import the library into your root index.js component,
import "semantic-ui-css/semantic.min.css";
I was having the same problems using react
tried everything mentioned and nothing worked
then just replaced this link
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css" />
hope that helps
I'm editing an app on my website but the style sheet is located in this path:
home/aib23/public_html/wp-content/themes/striking_r/assets/affiliate_app_css
what would the stylesheet look like for that path? This is what I thought it was:
<link rel="stylesheet" file://home/aib23/public_html/wp-content/themes/striking_r/assets/app_css" />
but it did not seem to work. Note that this stylesheet is placed within my wordpress theme folder.
Any help would be appreciated! Thanks in advance to those that contribute! :)
The link to your stylesheet can be relative, but in this case you can harness WordPress's built in functions to make your life easier, like so:
<?php get_stylesheet_directory() ?>
get_stylesheet_directory() will automatically return the directory where WordPress is looking for the stylesheet. For example, if your stylesheet was named styles.css, you might use something like this:
<link rel="stylesheet" type="text/css" href="<?php get_stylesheet_directory() ?>/styles.css">
You don't need to link the complete path to the file -- WordPress will take care of that for you.
This kind of path is local to the client system. So if I visit a page with this link it will look for your CSS file on my computer, at /home/aib23/public_html/wp-content/themes/striking_r/assets/app_css
Also, you need to use the href attribute in your link element in order for it to work.
I suggest you use a link relative to your web root - like this:
<link rel="stylesheet" href="/wp-content/themes/striking_r/assets/affiliate_app_css/myfile.css" />
Replace myfile.css with the name of your stylesheet.
When linking to your stylesheet, you can either do it relatively or absolutely. For instance, if you're linking to a stylesheet in the same directory as your HTML document, you can simply put
<link rel="stylesheet" href="style.css" />
If, however, you want to refer to a main stylesheet throughout many HTML documents, you may want to stick with an absolute path. In your case, something like this:
<link rel="stylesheet" href="/wp-content/themes/striking_r/assets/app.css" />
Please note: Your stylesheet file name should always end with .css. Additionally, all href paths start after the public_html folder in your specific case.
An interesting problem but maybe it has already been solved. I have a collection of CSS style sheets that apply to multiple domains. The way it has been architected, both domains share the same CSS files and add their own definitions and rules to the stylesheets. Our system is as such that anytime a developer makes a change to a CSS file that belongs to a particular domain, then that very same change needs to be done in another domain's style sheet as well.
For instance if I have two domains: Main, SubMain. BOth of these share a stylesheet called global.css and a developer working on the SubMain domain changes this stylesheet by adding a new rule. To ensure that things do not break in the Main domain, the developer needs to go ahead and add the same rule to global.css to the main domain's global.css stylesheet.
Why this does not have the same shared location is beyond me since this is a shared engineering project. My understanding is that the reason being that the changes were to be applied immediately and unfortunately the only option was to use the same stylesheet + directory structure across all the domains.
But this problem does exist and it is tremendous overhead. Is there anyway to extend CSS stylesheets such that domain specific CSS can be added to the extended stylesheets.
If not, what other solutions can be proposed ?
If you have the same code in two places, why have two files (and this goes for coding as well - methods or variables or whatever)? If you use something more than, keep it in one place and reference to it everywhere else.
What you need to do is to have the Main website point at a local copy of the CSS file (like so):
<link rel=stylesheet type=text/css href="/global.css">
... and then on the SubMain website, include in your headers a link to the Main website's CSS file (like so):
<link rel=stylesheet type=text/css href="http://mainwebsite.com/css/global.css">
To solve your problem, only have the editable CSS file/files on one domain (the Main one), and then link to them using absolute URLs in the other (SubMain) website.
I dont understand you. I dont know where your problem is. Do you want to add 2 css style sheets?
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="style2.css" type="text/css" rel="stylesheet" />
Or do you want that 2 domains using 1 style sheet?
<link href="http://url.com/style.css" type="text/css" rel="stylesheet" />
Both of the domains can use this. You are not linking in the directory of the style sheet. You put the link of your style in it. This will solve your problem.
Both domains can use one CSS file.
<link rel="stylesheet" type="text/css" href="http://myotherdomain.com/css/global.css">
Just link to one CSS file.
Or if you really want to "sync" them you could create a rsync script but that doesn't make sense.
It's apparent that you know you can include stylesheets across domains:
<link rel=stylesheet type=text/css href="http://example.com/global.css">
But did you know that you can include multiple stylesheets? Create a single stylesheet that has all of the "master" styles and put it in global.css on one of the domains (your choice). The styles unique to each domain can be in a stylesheet specific to that domain.
<link rel=stylesheet type=text/css href="http://example.com/css/global.css">
<link rel=stylesheet type=text/css href="/css/specific.css">
Maybe this question has been asked a lot,
but I still can't understand how to load CSS files when using django...
Please can anyone explain to me step by step how to load it?
Can I load the CSS file without the static folder or link, so I don't need to change the urls.conf but just setting in "setting.py" file?
(Sorry if my English is bad") :(
on local machine: you have to add:
(r'^site_media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': '/path/to/media'}),
on a server you don't (and more you shouldn't for security reasons) need the previous line.
So finally: here is my architecture:
project/
app1/
__init.py__
views.py
public/
site_media/
js/
example.js
css/
example.css
in my settings.py:
MEDIA_ROOT = '/thecompletepath/public/site_media/'
MEDIA_URL = '/site_media/'
and in my templates, i use:
<link rel="stylesheet" type="text/css" href="/site_media/css/example.css" media="screen" />
Just add a normal link tag to your template.
<link rel="stylesheet" type="text/css" href="http://example.com/path/to.file.css">
Unless you have a dynamic CSS file, you would not want to have it related to anything in urls.py. Likewise, if you're not using the media (static) folder, you don't need to change anything in settings.py. Just insert it into your HTML in the template.
If you don't want to use an external CSS file, of course, you can always just put <style> tags into your templates.