I'm using xampp for my php. And I have download a code igniter and save it on my htdocs. I already made a databasing and a sample page. My only problem is how can I link my css. Where should I save my style.css? How can I call my style.css?
<link rel="stylesheet" href="<? base_url(); ?>stylesheet/style.css" type="text/css" media="screen"/>
I have this but still have a problem. Is there a step by step on how to link a css?
Thank You.
Put your CSS wherever you’d like, then target that url.
Try putting it in the folder ‘/css/test.css’ for instance ‘/’ being the root of your site, not your CI install.
From CI, you can then call it with
<?= link_tag(base_url().'css/test.css'); ?>
That should generate the following code
<link href="http://yoursite.com/css/test.css" rel="stylesheet" type="text/css" />
If you’re having trouble targetin the CSS, the easiest way to find out where your script is trying to call it, is to look in your web pages source output. You’ll see exactly where CI thinks it’s located.
You can put your stylesheet anywhere really - it's just a matter of getting your directory to it correctly. The code you posted is going to look in your main directory (the folder with the license, system, user_guide, etc. It's going to a look for a folder called 'stylesheet', and then for style.css.
Make sure that you have your stylesheet in there.
Using the Firefox plugin FireBug will help a lot with that. View the source of the HTML that was output, and find out where the browser is looking for that stylesheet, and make sure it's there.
This is Syed Haroon from Mysore, Karnataka, India.
Assume:
Root Folder Name: ci_test
CSS file name : mystyles.css";
Controller file name: Start.php
view file name: test_view.php
Solution:
Suggestion for WAMP (hope it will be easy to fix the same in xampp):
Save it in root/system/application/css
Create a new CSS directory in application folder (just to Manage files and folder in the correct way)
How to connect back to CSS file?
in system/application/config/config.php
Edit "$config['base_url'] = http://localhost/" to
$config['base_url'] = "http://localhost/ci_test";
Crate a new line
$config['css'] = "system/application/css/mystyles.css";
Create a Controller in "system/application/controllers/start.php" insert the below sample code:
class Start extends Controller {
var $base;
var $css;
function Start(){
parent::Controller();
$this->base = $this->config->item('base_url');
$this->css = $this->config->item('css');
}
function hello(){
$data['css'] = $this->css;
$data['base'] = $this->base;
$data['mytitle'] = 'Welcome to this site';
$data['mytext'] = "Hello, now this is how CSS work!";
$this->load->view('test_view', $data);
}
}
Crate a view file in "system/application/views/test_view.php" insert the below sample code:
<html>
<head>
<title>Web test Site</title>
<base href= <?php echo "$base"; ?> >
<link rel="stylesheet" type="text/css" href="<?php echo "$base/$css";?>">
</head>
<body>
<h1><?php echo $mytitle; ?> </h1>
<p class='test'> <?php echo $mytext; ?> </p>
</body>
</html>
now enter this in ur address bar of the browser "http://localhost/ci_test/index.php/start/hello/"
The simplest way of doing this is to place the css file in the same directory with the index.php file and reference it using <link rel="stylesheet" type="text/css" href="style.css" />, or if you have more than one css file, you can create a subdirectory into which you can place them.
I think the better way is, you create a public folder. Put the css, and the js, and images folder inside the public folder.
Make a .htaccess file in the root folder. (where is the index.php)
Put this into .htaccess file:
RewriteEngine On
RewriteCond $1 !^(index\.php|images|js|css)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ ./index.php/$1 [L,QSA]
RewriteCond $1 ^(images|js|css)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ ./public/$1 [L,QSA]
After you can refer the files like this:
<img src="/images/blablabla.jpg">
Or /css/blabla.css
etc...
My file my file path is
<link href="<?php echo base_url();?>assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>& not working.
At last I have used
RewriteEngine on
RewriteCond $1 !^(index\.php|images|assets|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]
on my .htaccess file & it's working now. You can rename your file instead "assets" my style folder name.
Related
I have a .htaccess file that redirects all the URL request to my index.php
AcceptPathInfo On
RewriteEngine on
RewriteBase /Projects/tester/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?request=$1 [L,QSA]
Inside my index.php I have a code that include the URL file:
<?php
if(isset($_GET['request'])){
include('pages/'.$_GET['request'].'.php');
}else{
echo 'index';
}
?>
If my URL is localhost/Projects/tester/green my index will include a file called green.php that exists inside the folder pages.
inside pages/green.php I have this code:
<link rel="stylesheet" type="text/css" href="style.css">
<div id="greenBox">
This box is green!
</div>
When I run that URL I can see a large green div with an text inside.
Great, now lets create a folder called subs inside the folder pages and create a file called yellow.php
<link rel="stylesheet" type="text/css" href="style.css">
<div id="yellowBox">
This box is yellow!
</div>
When I run this URL localhost/Projects/tester/sub/yellow I can see the text but the style.css don't load (I can't see the yellow div).
If all the content is being included in the index.php and style.css file is in the same folder as the index.php, why green.php can load the style.css but the yellow.php not?
I can see the yellow div only if I add ../style.css inside the yellow.php, but if it is to work on this way, I believe we should use ../style.css on green.php while in yellow.php use ../../style.css, no?
Is there a way to solve this? is problem in .htaccess?
Of course the external browser doesn't understand where your files are located on the server, so if you are in the following situation (from the browser's perspective):
http://localhost/Projects/tester/green
-> hey browser, load "style.css"
-> browser loads http://localhost/Projects/tester/style.css
But if you change the "virtual" path:
http://localhost/Projects/tester/sub/yellow
-> hey browser, load "style.css"
-> browser loads http://localhost/Projects/tester/sub/style.css
So you have three solutions here, in order of my personal preference:
1) Use absolute URLs for loading css data, optionally using a PHP var:
<link rel="stylesheet" type="text/css" href="/Projects/tester/style.css">
<link rel="stylesheet" type="text/css" href="<?php echo $base_path; ?>/style.css">
2) Use the <base> html element in head: (warning: it applies to ALL relative urls in the page: links, images, etc.)
<head>
<base href="http://localhost/Projects/tester/" />
</head>
3) If using absolute URLs is not an option, you can calculate how many "virtual subdirectories" you are down and generate a prefix like this:
<?php
// first calculate $virtal_subdirs_number
$relative_urls = str_repeat("../", $virtual_subdirs_number);
?>
<link rel="stylesheet" type="text/css" href="<?php echo $relative_urls; ?>/style.css">
Its because the style.css is in parent directory of yellow.php, So for accessing a file in parent directory you must have to give path like ../style.css which mean look for it in one directory back and /style.css mean in the current directory which contain yellow.php
Hi guys am new to Laravel and this is my first project to do in laravel, I had trouble linking my assets(CSS & Js) file on my views.. I did a research an found if I will use {{URL::asset('assets/plugins/bootstrap/css/bootstrap.min.css')}} in Laravel 5.1 it will work. I did succeed when it was just a single link, but when I add other links..
<link rel="stylesheet" href="{{URL::asset('assets/plugins/animate.css')}}">
<link rel="stylesheet" href="{{URL::asset('assets/plugins/line-icons/line-icons.css')}}">
<link rel="stylesheet" href="{{URL::asset('assets/plugins/parallax-slider/css/parallax-slider.css')}}">
<link rel="stylesheet" href="{{URL::asset('assets/css/custom.css')}}">
The server denied the access to all files in assets folder Access forbidden!.
My .htaccess file code is..
<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews
</IfModule>
RewriteEngine On
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [L,R=301]
# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>
Question is if .htaccess file had a problem why when I put one asset link it accept?
Or what is the proper way of linking the files?
Am using XAMPP as my local server.
*Guy I just learned Laravel yesterday so be easy on me... Thanks in advance
You can use laravel blade template method
{!! HTML::style('css/style.css') !!}
{!! HTML::script('js/script.js') !!}
Note :you should add css files into public folder means in my example it will be like public/css folder.
same will be applied to jquery files also.
also you can add following way if you are using online links
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
or else
<link rel="stylesheet" href="{{ URL::asset('css/style.css') }}" />
<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script>
try this and replace css with your folder name.
<link rel="stylesheet" href="{{asset('css/home.css')}}">
When adding assets it's best to use assets helper http://laravel.com/docs/5.1/helpers#urls
For external
<link rel="stylesheet" href="{{asset('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')}}">
and also laravel ships with an htaccess file try replace it with yours https://github.com/laravel/laravel/blob/master/public/.htaccess
Also give correct permissions to your directories
Folders 755
Files 644
Apart from;
app/storage 777 (or 755 with owner as webserver user)
Use Laravel Collective HTML Package
After installed this package you can use like this
{!! Html::style('your/css/file.css') !!}
{!! Html::script('your/js/file.js') !!}
{!! Html::image('your/image/file.jpg') !!}
Thanks guys for a help I did solve my problem.
I went again at http://laravel.com/docs/5.1/helpers#method-asset
there I found they say $url = asset('img/photo.jpg'); will give me the url to my asset file.
So I Route...
Route::get('check', function () {
$url = asset('assets/css/headers/header-default.css');
return $url;
});
I got the link http://localhost/Dentist/public/assets/css/headers/header-default.css
So i just violate the rule if there was any and I did this in my stylesheet.
<link rel="stylesheet" href="<?php echo $url = asset('assets/css/style.css'); ?>">
--> ** Apart from that you can do this **
{!!asset('assets/plugins/jquery/jquery.min.js')!!}
because as the said if you use blade, then there is no need of using <?php echo ; ?> command... so I replaced <?php echo $url = ; ?> with {!! asset('assets/css/...') !!}
Make sure your files are in public/assets/ directory
Thanks all
In my case me looked upper of the place dropped the error.
I found me has missed a " ' " character in a same looked declaration:
<script src="{{asset('js/bootstrap.min.js)}}"></script>
somewhere up there.
As you can see there missed character " ' " after ".js"
So that all underneath declarations havent " ' " pair until this error place
I'm coding something into CodeIgniter and I want to apply a css template. I found one I like and download it.
After merging the css code with the code I have before the merging, I found that the images used by the css template doesn't load. Originally they should stay on root of html folder (or www, or public_html, you know what I mean...), but I put them under an assets folder which is on same level as system folder.
Something like this...
Website Folder
|
|---application\
|-----(CodeIgniter application folders...)
|---assets\
|-----style.css
|-----css\
|-------mini.css
|-----images\
|-----js\
|-----robots.txt
|---system
|-----(CodeIgniter system folder...)
|index.php
I googled for a couple of hours and I found this post (post #5). I try what the OP says but it doesn't work.
I can autoload the url_helper adding
$autoload['helper'] = array('url');
to the autoload.php file. But when I add
<base href="<?php echo base_url() ?>"/>
the images are still absent.
The original html file has this line
<link href="style.css" type="text/css" rel="stylesheet" />
so, I'm guessing that I should add assets/ so it looks
<link href="assets/style.css" type="text/css" rel="stylesheet" />
but still the images are missing.
If I move the contents of assets folder to root, everything is fine, but of course, that's not a good practice AFAIK...
My base_url is
http://localhost/prog/nonsense/mvc/
Before you ask, yes, I did read the .htacces solutions, but I really don't want to mess with .htaccess editing for now.
A little help here could be appreciated.
have you check .htaccess ?
It must have something like:
RewriteCond $1 !^(index\.php|assets|upload|robots\.txt|.*\.css)
I have the same thing as you, and I call them like this:
<link href="<?=base_url('assets/style.css');?>" rel="stylesheet">
This works for me if the base_url() is set and the url helper is called.
I call the base_url() and then the assets folder then style.css. There's no need for a / after base_url();?> because there's one in the base_url() anyway.
Another option using codeigniter's built in HTML function:
Also, if you look at this link, you'll see you can use the HTML helper and call it via codeigniter's built in functions.
This time, you shouldn't need base_url();
do:
$autoload['helper'] = array('url', 'html');
then in the view for header add this:
<?=link_tag('assets/style.css');?>
It will output to this:
<link href="http://localhost/prog/nonsense/mvc/assets/style.css" rel="stylesheet" type="text/css" />
base_url could also be used as link_tag:
<link href="<?php echo base_url('assets/style.css'); ?>" rel="stylesheet" type="text/css" />
would work too and keep your code cleaner.
yes! I just added the following line in .htacces file it working fine
RewriteCond $1 !^(index\.php|images|robots\.txt)
I just add one line in .htacces side of application folder
RewriteCond $1 !^(index\.php|images|robots\.txt)
I am new to codeigniter, and I am using v.2.12. I am getting an error when I try to load the css from the external file.
I create the css folder inside the application folder. And I create the css file in the name of all.css.
In the view file I use the following code to link the css file.
<link rel="stylesheet" type="text/css" href="<? echo base_url();?>css/all.css">
But the css file is not loading. I'm getting 404 error. Here is my configuration settings:
$config['base_url'] = 'http://webscarlets.com/ci/index.php';
$config['index_page'] = 'index.php';
Website Link: http://webscarlets.com/ci/index.php/welcome.
This is how you include CSS files in CodeIgniter:
<?php echo link_tag('css/mystyles.css'); ?>
That snippet will output this HTML:
<link href="http://site.com/css/mystyles.css" rel="stylesheet" type="text/css" />
The function link_tag is in the HTML helper, which must first be loaded.
(Note that you probably shouldn't put your CSS files in /application/css. It's just easier to put them in /css or maybe /assets/css.)
The function base_url() should return the base path (without index.php)
You may fix it by adding a backslash like:
<link rel="stylesheet" type="text/css" href="<? echo base_url();?>/css/all.css">
or remove the index.php from your config:
$config['base_url'] = 'http://webscarlets.com/ci/';
I just find the solution to avoid index.php file and load ours CSS files.
Just copy the code below in a .htaccess file:
Options +FollowSymLinks
Options -Indexes
DirectoryIndex index.php
RewriteEngine on
RewriteCond $1 !^(index\.php|images|styles|scripts|robots\.txt|favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L,QSA]
Greeting!
To attach a CSS, JS, Images .etc you just have to do is go to your config folder and write at the end of the constant.php file.
define('URL','ADD YOUR LOCAL/REMOTE PATH');
define('CSS',URL.'public/css/');
define('IMAGES',URL.'public/images/');
define('JS',URL.'public/images/');
After that goto your view and in the link just add
<link rel="stylesheet" type="text/css" href="<?php echo CSS; ?>index.css">
this will solve your problem.
Hope it helps.
Add below line in your controller action /application/controllers/yourController.php
$this->load->helper('url');
Then add below line to your view file's head tag.
<link rel="stylesheet" type="text/css" href="<? echo base_url('assets/css/yourcssfile.css');?>" />
Assuming that you have assets/css/ folder is created in your app directory.
<path to your app folder>/assets/css
before using the base_url() you should have to load the URL helper class.
something like $this->load->helper('url'); in your controller
base_url() return you the path something like
'http://webscarlets.com/'
if you have set it directly in the root or 'http://webscarlets.com/dir/'
and also make sure about the location of your CSS file.
follow the link to know more about URL Helper
another way would be
define a constant in constants.php (in config directory)
define("LAYOUT_URL","http://localhost/yoursite/css/");
"css" folder here i m assuming is inside application folder. NOw you can attach css in page like
<link rel="stylesheet" type="text/css" href="<?php echo LAYOUT_URL;?>all.css">
As Jogesh_p.
you use base_url as follow
put in controller (your controller)
$this->load->helper('url');
in controller .
if you want to use
as follow
put in where you want use base_url.
echo base_url()
NOTE: better you create new folder at root
(Example: theme)
same: application, system, user_guide, theme)
i hope can you do
Edit autoload.php as follows
$autoload['helper'] = array('url');
Then load css , js,image like that
img src="<?php echo base_url(); ?>assets/images/master.jpg"</img>
//config.php
$config['base_url'] = 'http://webscarlets.com/ci/';
$config['index_page'] = 'index.php';
and try to load css by adding application folder
<link rel="stylesheet" type="text/css" href="<? echo base_url();?>application /css/all.css">
EDIT
Here
base_url() echos 'http://webscarlets.com/ci/' then adding the file with path application /css/all.css
Include $this->load->helper('html'); in a controller function.
And use linktag key word in view file something like this:
<html>
<head>
<title></title>
<?php echo link_tag('resources/style.css');?>
</head>
<body>
<?php
....
?>
</body>
Here the resources is the folder that contain the style.css file.
Currently I tried to remove index.php on codeigniter url. I installed my codeigniter on localhost/jqm/withci . Then I write .htaccess to remove index.php and it worked well.
.htaccess file :
RewriteEngine on
RewriteCond $1 !^(index\.php|images|robots\.txt)
RewriteRule ^(.*)$ /jqm/withci/index.php/$1 [L]
But Im having some problem, my css file and js wont load.. My conroller is
class Home extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->helpers('url');
}
function index() {
$this->load->view('head_view');
$this->load->view('main_view');
$this->load->view('foot_view');
}
}
my view for head_view is :
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>jQuery Mobile with Codeigniter</title>
<link rel="stylesheet" href="<?php echo base_url();?>jquery.mobile/jquery.mobile-1.0a4.1.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="<?php echo base_url();?>jquery.mobile/jquery-1.5.2.js"></script>
<script src="<?php echo base_url();?>jquery.mobile/jquery.mobile-1.0a4.1.js"></script>
<!-- CDN Respositories: For production, replace lines above with these uncommented minified versions -->
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />-->
<!-- <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>-->
<!-- <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>-->
</head>
<body>
I tried to use base_url() but it didnt load my css and js.
Thank you..
PS : Im using css and js file for jQuery Mobile. We can load it from CDN repositories, but I want to make it loadable from my own directory in case I want to load custom css or js in future
In your .htaccess file add the folder which contains the JavaScript and CSS to the rewrite condition, something like:
RewriteCond $1 !^(index\.php|images|jquery\.mobile|robots\.txt)
Currently those files aren't loading, instead they're pointing to your index.php file.
Try adding this to your rewrite rules to prevent the rewrite from occuring on all files and directories:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
you can set a new config variable at the config file and but the path for the css/js file on it