| Load page specific CSS file |
[eluser]elaniobro[/eluser]
Trying to load a page specific file. so for example this is my header.php file Code: <head>the home.css file is the css file to be used for the home page. How can I remove that css link and then have CI automatically pick up the css file based on the page it is on. Ex: www.mysite.com -> loads 'home.css' www.mysite.com/about -> loads 'about.css' www.mysite.com/store -> loads 'store.css' Any insight is greatly appreciated. I am assuming this is done perhaps in the controller as such: Code: $this->load->view('about.css');
[eluser]Sarfaraz Momin[/eluser]
You are not permitted to load css files as views. They will present a nice looking error for you. Well you can do this by 2 different ways. 1st Option: Try to load the file from the controller to the view. e.g: Controller Code: $data['css'] = '<link type="text/css" href="<?= base_url();?>com/css/home.css" rel="stylesheet" media="screen" />';Code: <head>2nd Option: To create conditional statement in your views and pass a variable with specific data to load views accordingly. e.g: Controller Code: $data['page'] = 'homepage';Code: <head>I am sure there will tons of other way people might be using and there would be better ones too but I am tried to be as simple as possible in loading CSS and JS files. -Sarfaraz
[eluser]elaniobro[/eluser]
-Sarfaraz Thanks a ton! I got it to work. I did not use your method exactly, but did something similar, and what I believe is a lot more simple. I could be wrong so please correct me if I am wrong. What I did was put the page name inthe controller as $data: Code: <?phpThen, rather then put an if statement in the header, I simply just echo the $data attribute that I want like so: Code: <head>This is now doing exactly what I want! Cheers!
[eluser]Sarfaraz Momin[/eluser]
Good that it worked. The approach is ok I feel. I belive in doing the things that you are comfortable with.
[eluser]slowgary[/eluser]
It might be better practice just to put all of your style information into one stylesheet, and include it on all pages. Usually much of the style information is duplicated across pages, and the assumption is your visitors will hit more than just one page, so they'll already have the style info for subsequent pages caches in their browser. Additionally, by separating your stylesheets, you're adding additional http request for each page, which will cause your sight to be slower. I don't really see one benefit to doing it this way.
[eluser]slowgary[/eluser]
Also... it looks like you're using CI in a very static way. If you're going to create a controller for each page, you might as well just create a static site altogether. You should instead try to write more reusable code... how about creating a Pages controller? Then you could pass in a slug, e.g. 'about'. If you made the pages controller your default, you could still access your pages by hitting yourdomain.com/about, but you'd be able to reuse your code. Just a suggestion. Good luck.
[eluser]elaniobro[/eluser]
This is bad practice, for many reasons. If you notice, I have a global.css file that is used across all pages/sites. Having page specific .css files enables quicker load time and optimization. I know it is small, but size does matter, especially if you are coming through on a mobile phone. There is absolutely no reason to have 800 lines of CSS code be read from every page, especially if one page may only require 10 lines of CSS. That means the browser is spending time reading the other 790 lines of code.
[eluser]elaniobro[/eluser]
[quote author="slowgary" date="1266905070"]Also... it looks like you're using CI in a very static way. If you're going to create a controller for each page, you might as well just create a static site altogether. You should instead try to write more reusable code... how about creating a Pages controller? Then you could pass in a slug, e.g. 'about'. If you made the pages controller your default, you could still access your pages by hitting yourdomain.com/about, but you'd be able to reuse your code. Just a suggestion. Good luck.[/quote] Well I am extremely new to CI, and MVC, in regards to building a site from the ground up. I usually just worked with others on already existing frame works. I was under the impression that each page should have a controller/view. i.e. About_controller, about_view Home_controller, home_view Store_controller, store_view I guess I have some reading to do  Thanks for the tip
[eluser]slowgary[/eluser]
[quote author="elaniobro" date="1266905268"] Having page specific .css files enables quicker load time and optimization. I know it is small, but size does matter, especially if you are coming through on a mobile phone.[/quote] This is not necessarily true. Having more requests adds more latency than the size of your CSS files. You'd be better off combining all of your CSS files together. This way, the user would only need to download 1 CSS file, 1 time. If you want to make your CSS files smaller, run them through an optimizer to remove whitespace. Also, remember that data that travels over the internet is broken up into packets, so depending on where the boundary of a packet falls, a larger file may download in the same time as a smaller file. If you want your site to be faster, cut down on the number of requests. Do not separate your CSS files. |
| Welcome Guest, Not a member yet? Register Sign In |
MENU
EXTRA MENU
ABOUT US
CodeIgniter is a powerful PHP framework with a very small footprint, built for developers who need a simple and elegant toolkit to create full-featured web applications.
