I have a Jekyll site with some posts and some pages in the root directory.
If I navigate to a page in the root directory, such as localhost:4000/index.html all of the files in the _includes directory load no problem using:
{% include head.html %}
If I then go to a post using the permalink format as defined in config.yml:
permalink: /:categories/:title
localhost:4000/blogpost/first-post
The include files are not loaded. Looking in Firebug at the CSS files in the header it gives an error that the file is not found and is looking in the directory:
/blogpost/first-post/css/boostrap.min.css
If I give the post a permalink in YAML as:
permalink: /first-post.html
Everything works fine.
How do I set up the include to find the right files in my pages when using permalinks to navigate?
Includes and assets are two different things.
Includes are partials that are usually stored in _includes. If include anyfile.html work in index.html, it will work in any other page or post.
assets like js, css or images are loaded by html following a path. It's better to use a path relative to the site root. That's why Jekyll calls assets like this :
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
So, if your site is reached at http://localhost/any/path, your _config.yml look like this :
url: http://localhost
baseurl: /any/path
And then, no more problems with assets !
Related
I am trying to load CSS file in localhost but it's just showing white page. I was try to drag and drop file direct to browser and its opened. So file its not empty. and file also open when i use a server and add link to file.
I am using laravel 5.8, PHP 7.2
<link href="{{ URL::asset('css/style.css') }}" rel="stylesheet" type="text/css" media="all" />
CSS file location /public/css i am getting link in source http://localhost/css/style.css
This is most likely a file reference error. Check the markup output and compare the file URL against where it actually sits in the directory structure. If they match up, maybe a directory permissions issue?
In css links only asset is working fine... No need to include URL. so try using only asset.
Is there a way to configure jekyll so that when it builds the static files in the _site folder it adjusts all the assets/urls so it works in a subfolder?
My setup is like this:
www.example.com/
I pushed all the _site files/folders to a subdirectory:
www.example.com/blog/
So now when I view my site, all the css/images are not rendering as they are all pointing to :
<link rel="stylesheet" href="/assets/vendor/bootstrap/css/bootstrap.min.css">
But the correct URL should be:
/blog/assets/vendor/bootstrap/css/bootstrap.min.css
I am using nginx for this, and I created a location section like:
location ^~ /blog/ {
alias /home/deploy/apps/_site/;
}
Have you tried using the baseurl setting in Jekyll? When hosting a project on GH it is basically serving out of a sub folder like you are trying to do, baseurl is the common way to deal with it.
In your config file set the baseurl:
baseurl: /blog
then update your templates to use Jekyll's relative_url filter to pull in the baseurl setting properly. For example:
<link rel="stylesheet" href="{{ 'assets/css/site.css' | relative_url }}">
or elsewhere
{{ page.url | relative_url }}
A less robust solution is to prepend all the urls with {{ site.baseurl }} directly like:
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/site.css">
There are various ways to build the url with the baseurl - these are just a couple of them.
If your site is already done and none of your links have baseurl built into them, there is no easy way to add it in other than going and updating all the links.
That said, there is not a lot of magic to baseurl - other than making it one place to edit it if it ever needed to be changed. That and there is something about jekyll serve that helps the site work in the browser better when doing local dev work (serve and build treat baseurl slightly differently I believe).
I am working with codeigniter. But CSS is not working even I use base url() function.
< link href="< ? php echo base_url(); ?>
application/views/vehicle/css/bootstrap.min.css" rel="stylesheet" media="screen" />
If I just echo base url(), it outputs
http://localhost/codeigniter/
My css is in
C:\xampp\htdocs\codeigniter\application\views\vehicle\css
Can someone please help me with this?
Your css file should be in publicly approachable directory.
Application directory (application or APPPATH) is not publicly reachable.
So your CSS file should be somewhere next to index.php file of your application.
It is common to have assets/css path started in your website root:
-application
-system
-assets
--css
---vehicle.css
-index.php
-.htaccess
And if you make your web application code that uses CSS files dinamicaly regarding of route used, you can resolve it by adding more related subfolders:
-application
-system
-assets
--css
---vehicle
----style.css
-index.php
-.htaccess
This way, after url helper is loaded, you could reach css link with:
<?php echo base_url('assets/css/vehicle/style.css');?>
Eventualy you should include assets location in .htaccess file enabling Apache server to allow reading of it.
Maybe because of the ">" closing tag before "media".
Maybe you could try with relative path. So use as many "../" as needed to go back into parent folder untill you reach root dir (if your php file is in a sub-folder) and then add the path to the CSS file.
I have installed Symfony 2.8 and I have put header.css in web/css, but I don't know how can I access it.
The web browser returns the following error:
GET http://www.grupoinversores.com/css/header.css 404 (Not Found)
You need symlink. For example... here you js, css, img directories:
AppBundle/Resources/public/
In console command $ php app/console assets:install --symlink creates symlink for this js, css, img directories for AppBundle/Resources/public/.
Now you js, css, img here: web/bundles/app/css, web/bundles/app/js, web/bundles/app/img and for currect generate path use this:
<link rel="stylesheet" href="{{ asset('bundles/app/css/style.css') }}">
http://symfony.com/blog/new-in-symfony-2-6-smarter-assets-install-command
it seems based on live page as I looked there you have created a "header.css" directory not a file. No 404, though.
Do you use Twig? Can you post the part of your HTML that tries to call your header.css file?
If you are using Twig, have you tried something like:
<link href="{{ asset('cms-assets/css/bootstrap/bootstrap.css') }}" rel="stylesheet" />
inside your HTML?
In my case the bootstrap.css file is inside the folder:
/web/cms-assets/css/bootstrap
And as seen, I can access it using the "asset" with Twig
I am very new to magento. I am really confused how to load my own CSS files into magento. From some internet help, I came to know that, we have to save these CSS files at some location similar to
var/www/company_name/skin/frontend/default/magento_new_theme/css/folder
I also read that during installation of magento, we create all these folders or they are created automatically. (Please correct me, if wrong).
The thing is , I have no magento installed. I am accessing the magento system from website of my company. And I really want some help regarding, where, I have to go to get this var folder?
Note : It is magento but not magento go.
For using css from current theme you can use the following
<link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('css/newstyle.css') >" media="all" />
To add your own CSS files, navigate to your local xml file. It will be at app/design/frontend/package/theme/layout/local.xml
If it does not exist, make a copy from the default folder into the same location in your theme's folders. Open it up and inside the section <reference name="head"> include the below
<!-- Custom CSS -->
<action method="addItem"><type>skin_css</type><name>css/Custom_file1.css</name><params/></action>
<action method="addItem"><type>skin_css</type><name>css/Custom_file2.css</name><params/></action>
Provided these CSS files exist in your skin/frontend/package/theme/css folder then they will be added to the document's head.
use this:
<?php
$this->getSkinUrl('css/name.css');
?>
If you have using default skin package and skin template magento_new_theme then,then you can use
Mage::getSkinUrl('css/folder'); //for folder
Css file
Mage::getSkinUrl('css/folder/yourcssfile.css');
Assuming your Magento installation is at the root URI of your website, the path for CSS is "/skin/frontend/package/theme/css" and for images "/skin/frontend/package/theme/images", typically.
The 'package' and 'theme' names will be set in your Magento admin. The default package is 'base' and the theme is 'default', so that path would be "/skin/frontend/base/default/".
You will need to ask your Magento admin what the package and theme names are.