I've started learning to use django and have starting working on hosting one on Digital Ocean's App platform.
I'm hosting my static files on Digital Ocean's Spaces. My CSS file loads just fine. My fonts, however, do not.
My file structure is as folows:
Project
--Static
---CSS
-CSS files
---Fonts
- font files
I set up my #font-face in the CSS file like this:
#font-face {
font-family: 'poppins';
src: url('../static/fonts/Poppins-Light.woff2') format('woff2');
}
and apply the font as follows:
.div-name{
height: 100px;
font-family: 'poppins';
font-size: 40px;
}
Like I said, my CSS loads just fine, the fonts are just not showing up.
What am i missing?
Thanks for the help.
url('../static means go up one folder from the file, then into /static, so UP from inside /css to inside /static and then DOWN into /static
However up there is no /static folder inside static, you have miscalculated your folder levels.
To fix you can use an absolute url url('/static/... or make your relative url work correctly url(../fonts
Absolute URL: if url('/ begins with a slash, it means it starts that the root of the site and works down. You can test absolute URLs by typing them in your browser, eg go to http://127.0.01:8000/static/fonts/Poppins-Light.woff2 and see if it downloads the file
Relative url: means it starts with the file and moves relative to it. Your example starts with your .css file in /css, then goes up via ../ into the /static folder. /static has both /CSS and /Fonts folders inside it so the full url is url('../Fonts/Poppins-Light.woff2'). You don't need to mention /static as you stay inside it the whole time. If you used url('../../, eg, up two levels, then you would need to mention /static.
Related
I set backround-image like this
background-image: url('/assets/img/Layer2.png');
It work on Browser but not work on ios divice . thanks for reading my questions
You must be trying to set image in an scss file. You got the relative path incorrect.
The path is:
background-image: url('../assets/img/Layer2.png');
If you are setting in html file it is ./assets/img/Layer2.png
Based on this tutorial I started an ionic2 project from a tutorial template http://ionicframework.com/docs/v2/getting-started/tutorial/adding-pages/.
After successfully adding a new mypage.html and mypage.ts page under /app/pages/mypage I also wanted to align my objects to center on my page, so I created a mypage.scss file with the content:
.centered {
text-align: center;
}
Also note that I added the class centered on the mypage.html <ion-content> tag.
What I found that when I serve my page the gulp won't compile and add my own styles to /www/build/css files. Am I missing something or is it buggy?
You need to include it in your app.core.css file like this:
#import "../pages/mypage/mypage";
The first mypage is the name of the folder, and the second one is the name of the file (the extension is not needed)
Okay so I found that you have to also import your file to /app/theme/app.core.scss. Which I don't really think is a good solution from ionic team (even worse I did not see this mentioned anywhere).
I think you could edit the gulpfile to source all the scss files under app directory so you don't have to import every single file to app.core.scss
How do I make .htaccess such that going to the folder in the web browser, where .htacess resides, will show the contents of the folder? Maye this is not something achieved by .htacess file but has something to do with changing the permission of the folder("directory").
I do not want to use an index.html file at all because the contents of the directory (folder) will change and then the index.html will be invalid.
I have a follow-up question. After this is done, is there then a way to programmatically use C# code to get the contents of the directory listing?
So you're trying to access your folders directory via the web browser:
All you need to add is:
<IfModule mod_autoindex.c>
IndexOptions FancyIndexing IconHeight=16 IconWidth=16
</ifModule>
You will get something that looks a bit like this:
You can of course play around with the settings and add extra things like:
NameWidth=25
DescriptionWidth=40
IconsAreLinks
This is not necessary though, it really depends if this is just for you, or public access too. Does it need to be pretty :P
You can add an .htaccess file inside that specific folder then add this at the top of the .htaccess file. Remove any index.html file that you have there also.
Options +Indexes
I am trying to load a web design into django project on pyCharm. I created the URL in url.py for first page and its corresponding function in the view.py. On running the project index.html file is loaded only without images and css files. I have been searching for the solution but I could not understand any of them. Some of those said, place your static files into 'static' in the root directory of project. But in my html code, I have referenced them as css/main.css. In this case I might have to change all the code. Is there some easiest way to load static files? Please guide me step by step.
Here is the structure of my files in the project:
MyProject/template:
css/"all css files
js/"all java script files"
image/"all images"
fonts/fonts
index.html and other html files![error log:][1]
Follow these steps:
You need to create a static directory in your project root.
Specify the static directory in the django project settings.
Include the static files like css, js, image, fonts inside the static directory.
Change the static file's path in templates -- e.g. from /css/bootstrap.min.css to {% static "css/bootstrap.min.css" %}
I'm trying to make template.render() (import was: from google.appengine.ext.webapp import template) use a template located in a directory other than the root of the application.
I have a directory, called static, where I'd like to keep my templates. Or possibly, I'll change that to static/templates later, but this doesn't matter.
The problem? TemplateDoesNotExist: index.html, a sad exception.
This:
path = os.path.join(os.path.dirname(__file__), 'index.html')
logging.debug(path)
self.response.out.write(template.render(path, template_values))
.. works, but this:
path = os.path.join(os.path.dirname(__file__), 'static/index.html')
logging.debug(path)
self.response.out.write(template.render(path, template_values))
.. does not.
/static has been added to app.yaml, although it shouldn't matter.
Thanks for any advice.
Adding /static to app.yaml does cause files in /static to be treated differently.
See http://code.google.com/appengine/docs/python/config/appconfig.html#Static_File_Handlers and note:
If you have data files that need to be read by the application code, the data files must be application files, and must not be matched by a static file pattern.
Templates are data files.