i'm using MAMP on my MacBook Pro as a local server. PHP and MySql are running fine. However, i have a strange issue with CakePHP - CSS only works on homepage of my site and only by the two following paths:
'localhost' and 'localhost/index.php'
Using 'localhost/index.php/' however returns just the bare unstyled markup as does all other pages in the site. How can a slash a the end break the CSS?
A few searches have suggested this could possibly be a mod rewrite issue in apache, but i'm out of my depth to be honest - i don't know how to test if changes i make turn mod rewrite on.
As CSS works only for 2 specific paths, could it perhaps be a problems with my routes? I only have 2 defined - '/' and '/index.php/' - and they are both the same.
Any help will be greatly appreciated,
James
It looks like your MAMP configuration (or Apache within MAMP has mod_rewrite disabled. It looks like you have to follow http://documentation.mamp.info/en/mamp-pro/advanced-functions/edit-configuration-files instructions, edit template for apache's httpd.conf, search for mod_rewrite and uncomment this line in config template.
The problem is most likely as tbwcf says that you're trying to load the CSS files using relative file paths, but you should always use CakePHP's helpers to add resource files to the layout:
<?php echo $this->Html->css('style'); ?>
The above will output
<link rel="stylesheet" type="text/css" href="/css/style.css" />
The benefit is that if you install the app to some other directory the path changes automatically:
<link rel="stylesheet" type="text/css" href="/other/directory/css/style.css" />
Do not use relative file paths like ../css. It will break the layout again in all but the simplest cases.
The slash at the end of the markup is most likely breaking the file path to your stylesheet. For example if your css is referenced as
<link rel="stylesheet" href="css/stylesheet.css" />
then adding the slash to the page URL would mean you'd need to jump back a step to get to the same stylesheet as it would no longer be in the same folder as the page you're on.
So you could add
../ before the reference like <link rel="stylesheet" href="../css/stylesheet.css" />
Or possibly an easier solution in this case would be to reference your stylesheet absolutely like:
<link rel="stylesheet" href="http://localhost:8888/project/css/stylesheet.css" />
Related
I've looked at other answers involving this question, but still can't get it to work. I'm trying to link my CSS file relatively. I've tried the base_url() concat and it still doesn't work. Maybe I just have a misconception about CI URLs. Anyway, my CSS file is under views->templates->Item_CSS.css
I have tried everything and still get no results. If anyone can help I'd be grateful. Thanks!
You won't be able to reach that path easily, since codeigniter uses it's index.php (situated in the root) to handle everything. The views folder isn't the base path
What I do is to add a css and js folder in the root of CI (where index.php,.htaccess lies), after that your css routes will be www.example.com/css/mycss.css or base_url().css/mycss.css.
In case you get a forbidden error you might need to modify the .htaccess to allow accessing those folders
Assuming that you config your base url as:
$config['base_url'] = 'http://www.abc.com/';
and you put the application folder where the system and index.php file is. Then use the following code:
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>application/views/templates/Item_CSS.css" />
I've crawled forums far and wide for a solution for this, but to no avail.
I'm running an app on a localhost and I want to link to my CSS styles in my html page.
The general consensus is that I should use base_url() . "css/main.css" to create a link.
The PROBLEM lies in the fact that I want other people on my network to be able to use my app. But when they link to my page from their computer, they see
link rel="stylesheet" type="text/css" href="http://localhost/codeigniter/css/main.css
which of course does not load the CSS to the page, as the css files are on my localhost, not theirs.
Please tell me there's an elegant solution to this problem. Codeigniter is driving me kind of nuts.
modify the $config["base_url"] value to the IP address assigned to your computer. Like:
$config["base_url"] = "http://192.168.1.5/codeigniter/";
What you need here is to setup base url as per ENVIRONMENT
switch(ENVIRONMENT) {
case 'localhost':
$config['base_url'] = 'http://localhost/codeigniter/whatever/';
break;
case 'anothercomputer':
$config['base_url'] = 'http://anotherdomain.com/';
break;
default: //live
$config['base_url'] = 'http://yourdomain.com/';
}
obviously you'll need to setup ENVIRONMENT const to all these values by checking e.g. $_SERVER['SERVER_NAME'] etc in the index.php
There is 3 Ways of adding css style to your document most common way is external,
use this code to get style from external file.css:
<link rel="stylesheet" type="text/css" href="your_css_file_location.css" />
the css file should be at .css format,
another way is by using internal, the style tag goes between the tags ,
<style type="text/css"> your style here </style>
and last the inline,
<body style="background-color: #FF0000;">
hope you got this, have a nice day.
Good Day, I'm learning CodeIgniter with Smarty. My CSS file is stored in
/App01/application/views/css/main.css
To link my CSS I use:
<link rel="stylesheet" type="text/css" href="http://localhost:88/APP1/application/views/css/layout.css" media="screen" />
But CSS is not applied on my page. When I open CSS URL, I get a message:
Forbidden
You don't have permission to access /APP1/application/views/css/layout.css on this server.
Please, what am I doing wrong? I'd like to keep my CSS together with the view because in future I'd like to learn how to create multiple themes and I thing the CSS should be kept within the theme folder.
Can I replace URL path to CSS file with some Smarty variable so that when I move my application I do not need to change CSS URL path in templates manually?
Thank you in advance! Vojtech
Anything in the /application folder of CodeIgniter should be considered out-of-bounds. For the best security, you should actually consider keeping /application above your www or public_html folder in a structure such as this:
– application
– controllers
– models
– views
– ...
– system
– core
– libraries
– ...
– public_html
– index.php
This makes your application code safer.
I’d advise creating your client-side scripts and CSS in a public folder. For example public_html/css and public_html/js. Or, if you wanted to go down the theme route, possibly name each CSS file as the name of the theme, so you’d have css/theme1.css and css/theme2.css.
If your site will always work from the root of a domain, then you can just use:
<link rel="stylesheet" type="text/css" href="/css/layout.css" media="screen" />
But if you feel that you’re going to be moving all sorts of things around, then consider preparing the file location in your controller before sending it to Smarty.
$this->load->helper('url');
$this->smarty->assign('css_file', base_url("css/theme1.css"));
That will return:
http://localhost/app1/css/theme.css
Or whatever your CodeIgniter URL is.
This will help to link css to codeigniter.
The link_tag is used to link resources and you can use helper function.
For example html helper, url helper, email helper, etc.
In your controller you have to create a function something like
<?php
class Home extends CI_Controller{
public function helper(){
$this->load->helper('html');
$this->load->view('index');
}
}
?>
And your index.php in view folder use link_tag keyword.
<html>
<head>
<title></title>
<?php echo link_tag('App01/application/views/css/main.css');?>
</head>
<body>
<?php
.......
?>
</body>
</html>
Try adding a symlink to your servers document root folder. (www/public_html/htdocs)
cd (document root folder)
ln -s (/App01/application/views/css) .
This way you can access your css folder and keep the current structure.
In the root of my domain i have the CSS file style.css and the masterpage file site.master.
The link to the CSS file within the site.master is
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
The problem is that webpages contained within subdirectories do not inherit the CSS file.
What am i doing wrong here?
If i copy the style.css file to the subdirectories everything works like a charm...
UPDATE: If i change the path to /style.css or to ~/style.css the style is Not applied also to the webpages within the root folder.
MasterPages use the containing page for the path.
change your css tag to be a server control and use the "~" root symbol.
<link id="lnkStyle" runat="server" href="~/style.css"
rel="stylesheet" type="text/css" />
You need to specify the path as /style.css.
Well the obvious question is, does the other pages inherit the correct masterpage, namely the one with your css link?
ie.
<%# Page Language="C#" MasterPageFile="~/MasterPage.master"...
also perhaps '/' before file name would help
If you're including that link tag in your master page, the HTML being output by the content pages in subdirectories contains a link to "style.css", which the browser looks for in that directory.
If you're developing in ASP.NET, you should be placing your CSS files in themes, which will take care of this problem. If you really don't want to do that for some reason, make the URL to the stylesheet an application-relative path ("~/style.css") and make the link tag executed on the server; I believe that that will resolve the application path and generate an absolute URL.
Try this:
<link href="<%: Url.Content("~/style.css") %> rel="stylesheet" type="text/css" media="screen" />
It will make the path relative to your hostname, giving the correct path to your pages in the subdirectories. Right now, just linking style.css gives it the folder relative path, so its looking inside of the same folder your page is in, instead of where you intended. Hope that helps. You could also re-write your link with a preceding forward slash, like "/style.css" and that should also do the trick.
I have this quite popular problem, but have failed to find a solution that works.
Basicly, I am using a Master Page (/Masterpages/Default.master), that includes
<link href="../css/style.css" rel="stylesheet" type="text/css />
And it also includes some images with the same relative linking.
But when I apply the Master Page to content pages (in diffrent folderlevels) the css formating and images is lost.
Is there anyway to dynamicaly solve the folderlevel links to css and images to all content pages using the masterpage?
Thanks in advance
UPDATE:
There is an additional problem. It's tricky to get the output to render correctly in both the browser and in design view in Visual Studio.
I got it to work by using the asp:image solution for the images in the masterpage and by double linking the css in the masterpage, one to make it render in VS and one to make it render correctly browsing the site.
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=ResolveUrl("~/css/style.css")%>" rel="stylesheet" type="text/css" />
best to use:
<link href="<%=ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css />
since this will cope with iis application roots unlike:
<link href="/css/style.css" rel="stylesheet" type="text/css />
You can make your link runat="server" and use tilde mapping to make the CSS path relative to the site root.
<link runat="server" id="siteStyle"
href="~/css/style.css"
rel="stylesheet"
type="text/css" />
The images referenced in the CSS should be relative to the location of the CSS file and should resolve normally once the CSS file itself is included properly. For images in tags on the page, you would need to use the ASP:Image control and, again, use the tilde mapping for a path relative to the root.
Fairly sure this will work
<link href="/css/style.css" rel="stylesheet" type="text/css />
/ takes you to the root of your site
You can use the tilde to get the link to work from anywhere. This will work in Images as well.
<link runat="server" href="~/css/style.css" rel="stylesheet" type="text/css />
Images in CSS are relative to the file they are referenced from.
(An exception from this is the "filter" rule in Internet Explorer which is used for PNG fixes. The images in this case are relative to the HTML document.)
Yes, the problem is that the materpage is using a relative url to load the CSS:
"../css/style.css"
you need to change this to the site root (depending on the location of your css files) something like:
"/css/style.css"
than all the various folder levels can use the same url.
Actually, master pages will rebase css files for you automatically, without you having to add runat="server". Be sure that your css file is located one directory down in the folder you specified.
You can use an absolute path to the css file, but visual studio doesn't seem to render the styles in design view when you do this. Also, sometime you won't know if you're going to be running in a virtual directory, so it's not always ideal to use the absolute path.
Also, use relative links to your image assests from the css file itself - which will work irrespective of how you link to your stylesheet.
You might also be interested in looking into themes and skins.
ASP.NET Themes and Skins Overview