Reffering to a css stylesheet from an unknown, higher directory - css

I'm currently in the process of building my first PHP-based website. The entire website is located in the main directory: example.com
I want users to find different pages of my website by going to links like example.com/page, example.com/another_page, example.com/directory/some_page, etc. etc.
To do this, I make these directories, and add the following php-code in an index.php:
<?php
include("/home/user/domains/example.com/public_html/index.php");
?>
This works fine, the page is being included. The problem is that the stylesheet isn't. It only works in the main folder. I tried both these HTML-snippets:
<link href="Stylesheet.css" rel="stylesheet" type="text/css" />
<link href="/home/user/domains/example.com/public_html/Stylesheet.css" rel="stylesheet" type="text/css" />
But they both don't work.
How does this work in HTML, how to access the home directory?
Thanks in advance

The css file is downloaded and included on the client side, as opposed to the php include statement which includes the file on the server side.
The path for the css should therefor "make sense" from the clients perspective and probably be specified relative to the public_html directory. That is, if it resides directly in the public_html directory the line should read
<link href="/Stylesheet.css" rel="stylesheet" type="text/css" />

The browser can't see all the directories under your public_html. Web servers present the browser with a document root. You need to refer to it with a / only:
<link href="/Stylesheet.css" rel="stylesheet" type="text/css" />
Also consider using mod_rewrite instead of creating directories and PHP files everywhere. I think you would find that much more maintainable.

This is your absolute path for Server-Side access:
<?php
include("/home/user/domains/example.com/public_html/myDirectory/Stylesheet.css");
?>
However, you want access from your Web Server for this. The absolute path for the Web Server is as follows, where / is the root of your web server and myDirectory is a directory location off the root:
<link href="/myDirectory/Stylesheet.css" rel="stylesheet" type="text/css" />

Related

how to link css file from outside web application

Simple as title says, how do I include a css file that is found two parent folders up from the actual web application itself?
I have tried adding the file as a link to the web project and then referencing it like that and it dose not work
<link rel="stylesheet" href="../../mystyle.css" /> would literally move up two folders on your server. You may be better off with using the full path: <linke rel="stylesheet" href="/folder1/folder2/mystyle.css" /> - which all assumes that the path you need to get to is accessible to the web server.
Since the page comes from the server I would read the physical file and stuff that onto the page as part of the server script such as:
<style>
<?= css_file_content ?>
</style>
If in a parent folder, it may be outside the hosted path making it inaccessible to the client. But it is not inaccessible to the server-side script.
Visit: http://www.w3schools.com/css/css_howto.asp
You can add inline css if external doesn't work

easiest way to save CDN CSS resource locally?

i'm working on a bootstrap template locally on my dev server.. the template loads some resources via CDN..
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!--font-awesome-->
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="//code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet" type="text/css" />
Problem is this slows me down because everytime I hit refresh to check the changes on my page (localhost) the darn thing has to load the resources online again and again..
So i tried to open the resources via the link and save em locally. but this breaks because i guess there are more things to it than just the CSS code.
Is there an easy way to "localize" these things?
Thanks guys
This are the steps I followed to use CDN CSS resource locally:
Download and extract the font pack from here
Copy the ionicons.css to your project
Copy the fonts folder to your project
Ensure the font urls within ionicons.css properly reference the fonts path within your project.
Include a reference to the ionicons.css file from every webpage you need to use it.
In my case I include this in main.html
<link href="css/ionicons.css" rel="stylesheet" type="text/css" />
then simply add the icon and icon's classname to an HTML element.
<i class="icon ion-home"></i>
and folders are in this way:
- project_name
* css --> ionicons.css
* fonts --> ionicons.eot, ionicons.svg, ionicons.ttf, ionicons.woff
To preface this answer, I'm not sure that this solution is considered 'easy' but it will get you the ability to host locally vs. being dependent on the CDNs. The easy solution is using the CDNs. That being said:
The bootstrap.min.css file is easy to localize, you can go to getbootstrap.com and get it out of the Download Bootstrap option.
Localizing Font Awesome is a bit more work. Here you need to copy the entire font-awesome directory into your project. You can download it from this URL: http://fortawesome.github.io/Font-Awesome/ . You'll end up with a directory folder named something like font-awesome-4.2.0, which will contain a series of sub-folders: css, fonts, less and scss. You'll also need to call the local font-awesome.min.css file in the head section of your HTML. See the following GitHub link for more information on setting up Font Awesome locally: http://fortawesome.github.io/Font-Awesome/get-started/
Ionicons is similar to Font Awesome setup. From the following Ionicons web page, you'll need to Download the directory and include it in your project: http://ionicons.com/ . You'll need to call the local ionicons.min.css file in the head section of your HTML after you have the directory setup.
old question, but I think there's an easy solution now:
you can install the node package by using npm install ionicons
https://www.npmjs.com/package/ionicons
Save the css/js files locally from url and change path.
eg:- css/ionicons.min.css
http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css
http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css
http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css

Magento CSS Wrong Path

My magento site unable to load the CSS because of wrong path. the Path is:
<link rel="stylesheet" type="text/css" href="C:\Program Files (x86)\Zend\Apache2\htdocs\myecommerce_comhttp://myecommerce.com/skin/frontend/default/theme183v2/css/reset.css" media="all" />
and the Correct path is
<link rel="stylesheet" type="text/css" href="C:\Program Files (x86)\Zend\Apache2\htdocs\myecommerce_com\skin\frontend\default\theme183v2\css\reset.css" media="all" />
I already change the value of my DB table core_config_data, cleared cache, etc..
Still not working.
It's an old question, but mostly for my own documentation:
I've had this problem. There are some things to check:
Is the folder /media/ writable? This is where Magento stores the combined js and css files.
Is the folder /var/session and /var/cache writable? Caching needs to be stored somewhere.
Just to be sure: are the tables core_cache and core_cache_tag truncated?
Making /media/ writable solved the problem for me.
Try to go to the control centre
in the System menu, in fact i think this question has been asked before
well
System => Configuration => Web
The main point to watch out for is
i. Url options -> Add store code to Urls should be 'No'
ii. Unsecure -> Base Url should point to your own domain e.g http://mycommerce.com/
iii. Secure -> Base Url should point to your own domain e.g http://mycommerce.com/
also you should have
{{unsecure_base_url}}skin/
for your Base Skin
I had the same problem but found a different solution.
Are you using an Addon like GT Speed to combine or reduce your JS and CSS files?
I uninstalled this plugin and the problem was solved for me. Hope this helps.

Adding the .css and JavaScript files directly under server and accessing them in TBBs [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to add external JavaScript or CSS files to our Tridion page?
I want to add the .css and .js files to the Tridion server.
I want to refer them in the TBBs.
<link href="path/style.css" rel="stylesheet" type="text/css" />
<script src="path/script.js" type="text/javascript"></script>
I have some questions:
Do I need to place them directly in Tridion server machine?
Do I need to add them in IIS as virtual directories to refer them?
In either of the ways I am not sure how to give the "href".
I am using Dreamweaver TBBs and SDL Tridion 2011 SP1.
I know that there are other ways to handle the .css and scripts.
But my requirement needs them to add directly in server.
Please share your suggestions.
It all depends on where the files are on the local disk (which unfortunately you fail to mention in your question).
If you have the files on disk like this:
c:\
inetpub
wwwroot
mywebsite
index.html
style.css
script.js
And you have created a web site with its root at c:\inetpub\wwwroot\mywebste, then you can refer to style.css and script.js from within index.html as
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js" type="text/javascript"></script>
If however you created a web site with its root at c:\inetpub\wwwroot, you'd refer to the same files as:
<link href="mywebsite/style.css" rel="stylesheet" type="text/css" />
<script src="mywebsite/script.js" type="text/javascript"></script>
Either way, you will have to ensure that the files are placed onto the web server. You can either do that through Tridion or by placing them there manually.
If you want to publish the CSS and JavaScript files from Tridion, I suggest reading this question: How to add external JavaScript or CSS files to our Tridion page?

Import local CSS file into a procedure

I got a PL/SQL Web Toolkit project not online (url : http://127.0.0.1:8080/dad/my_procedure).
And I just want to know how to import a local CSS file into this procedure...
I tried to do something like this :
htp.print('<link href="'C:/Users/Me/Desktop/css/filecss.css" rel="stylesheet" type="text/css" />');
or even
htp.print('<link href="/css/filecss.css" rel="stylesheet" type="text/css" />');
with no success...
In reality I don't know what's the root directory for a project like this.
The CSS file has to be within the HEAD area of the webpage. You should have your htp.print statement between the htp.headopen and htp.headclose calls.
Also, the CSS file path is relative to the web server processing the request, so the path should be to the directory on the web server that the CSS file resides.

Resources