I have a project built up like this:
index page with full layout
separate php files including the index page
In the index page I use bootstrap but in the separate php files I sometimes use jqgrid, which does not go along with bootstrap all too well. The combination of these two makes jqgrid's shrinktofit or autowidth disfunction.
Is there any way to exclude the whole bootstrap css from being inherited in my separate php files?
yes you can exclude whole bootstrap functionality , by using php regular expression to comment the link to the bootstrap file loading, so that the bootstrap functionality will not affect the page.
if (__FILE__ == "index.php") {
echo '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">';
}
Related
I'm trying to come up with a system where visual components like foo or faa would be stored in the /components folder, and each component would be in its folder with that components files, say /foo, and the component files foo.component.css and foo.component.php inside it.
The name.component.php has some HTML and a style <link> inside, referring to the name.component.css. which styles that component. Components are included in page files, such as index.php, which gets its <head> tag from head.php, which is outside the root.
The file hierarchy would look like this:
├──* head.php
└──* /root
├──* index.php
└──* /components
├──* /foo
│ ├── foo.component.css
│ └── foo.component.php
└──* /faa
├── faa.component.css
└── faa.component.php
When index.php includes a component, its CSS will be added outside the <head>, which I would like to avoid. Is there a way to move the CSS link to the document <head> during the PHP execution, for example, with a custom function? The CSS needs to be moved from the name.component.php specifically, so manually adding the CSS to the head.php won't do.
File: head.php
<head>
<!-- Other non-component stylesheets here; -->
<!-- Component stylesheets would be moved here during PHP execution; -->
</head>
<body>
File: index.php
require_once("../head.php");
require_once("coponents/foo.component.php");
File: foo.component.php
// Can this be moved to the head during execution from this folder?
echo('<link href="/components/foo/foo.component.css" rel="stylesheet">');
// Some HTML elements here...
// Trigger something here that moves the CSS link to the head.php
Could buffering be an option here? Any pointers would be appreciated.
Should your component really define the css with an echo?
Your index.php could insert it, if you followed a naming convention. The problem you'll see is when you have more complexe things to do...
The way I'd do it is to create some sort of manifest for your component. You'd have a class that would list the required css files, javascript files (why not) and template files. Your index.php could easily run through the definition and include at the proper places.
// File foo.manifest.php
class FooComponent implements Component{
public $stylesheets = ['foo.component.css'];
public $javascripts= ['foo.component.js'];
public $dependsOn = []; // You could set dependencies here so other components are loaded if needed.
public $template = 'foo.component.php';
}
You index would load up the class, and loop through its stylesheets to echo them at the right place.
$components = [new Foo(),new Faa()];
foreach($components as $component){
foreach($component->stylesheet as $stylesheet){
echo ('<link href="'.$stylesheet.'" rel="stylesheet">');
}
}
require_once("../head.php");
foreach($components as $component){
require_once($component->template);
}
You'll have to figure out how to play with the paths tough, either your manifest declares them relative to the index.php or you find a way to know the file from where the manifest class comes from so you can make a relative path from it, unfortunately I'm not very good at PHP for this...
What I am doing in the website I am working on now is to have a single head.php file which I bring into the PHP files for the various pages on my site. Sometimes a particular PHP file for one of the pages may require a different JS file or CSS file. So, I have <?= $headEls ?> inside the head element in head.php.
Now, inside one of the PHP files for the pages I can assign a value to $headEls which is just a string for any script or link elements that may be required.
One problem is that with the above system you have to assign a value to $headEls inside every PHP file (even if you just make it an empty string) or you get an error trying to access an undefined variable. In order to get round that I put the following line inside head.php before trying to access $headEls: The line is $headEls = isset($headEls) ? $headEls : '';. So now I only have to assign a value to $headEls if I actually have a CSS or JS file(s) I want to bring into it.
I am sure that better systems can be thought of but it does work and I do not want to use a framework which solves all these problems plus ones I have never thought about but involves 1000s of files on my server and my local machine.
I'm new at the scene and I'm using Bootstrap 3 and this template for the first time. I need help with the navbar. In the template each content.html has their own navbar.
I need the navbar in a separate file, because I do not want to make changes in every single content.html file.
In my old site without Bootstrap I worked with:
<?php
include("includes/navigation.html");
Can someone help me?
You need configure to put your repeated html data's in a single file and include that one into another.
Lets simple,
if your Project structure like this
project(folder)
db(folder)
Dbconnection.php(file)
js(folder)
jquery.js(file)
css(folder)
bootstrap.css(file)
index.php(file)
page1.php(file)
page2.php(file)
Create a new file with contents of your navbar html tags alone.
For ex. in your nav-menu.php contains
<navbar>
......
......
</navbar>
and save them into new includes folder in your project. So now your project structure will be like this one,
project(folder)
db(folder)
Dbconnection.php(file)
js(folder)
jquery.js(file)
css(folder)
bootstrap.css(file)
includes(folder)
nav-menu.php(file)
index.php(file)
page1.php(file)
page2.php(file)
Now you should include this file(nav-menu.php) in all the template files using php include method, like
include("includes/nav-menu.php");
Add this above code in all of your common files.
You can use
<?php include("includes/navigation.php") ?>
in this project too.
Fastest way that comes to my mind is to just include the code you need to change for every page in a separate switch/case and call the different cases at the top of the page that is including the navbar.
Just note your navigation file needs to be .php, not .html like your example.
I have some modules in modules folder that have css and js folder and I am thinking of the way how to approach the automatic load of all this css and js files to my header of the template.
I was thinking of creating 2 modules called cssloader and jsloader that will be included in the header section of the template.
They would contain some php script that will put the urls of css (and js) in an array and this array will be outputed in the template like e.g.:
<?php echo Modules::run( 'cssloader/cssloader/_css_include_for_frontend' ); ?>
The urls will be grabed by some script that will be searching modules folder of the CI application and looking for css folder within and a file load_css.php with some defined constants or variables like
$css_loader_frontend['slider'] = array('slider.css',
'slider_ie6.css'
);
$css_loader_backend['slider'] = array('slider_admin.css');
This file will contain files that will be loaded e.g. slider.css (within slider module css folder)
And the similar scenario for javascript stuff.
Is my approach right or not and you would do it somehow different?
What do you think about it?
What would you do different and more effective?
Thanks
I Think this template class can help you, though, I was wondering why are you accessing assets files inside modules, I'm not well versed but as far as I know you should access files such as img, js, css and so on just on the level of system and application folders in a folder that could be named "public" or "assets" to avoid "Directory access is forbidden."
I have a navigation menu inside a CakePHP element file (views/elements/nav_default.ctp).
The file is included inside another element that is the header (views/elements/header_default.ctp) which is then included in the layout file (views/layouts/default.ctp).
I am trying to tell Cake to load a js file (webroot/js/mega_drop.js) from within the nav element like so:
<?php
$this->addScript('mega_drop');
?>
It does not get included. I looked at the documentation for addScript which just says:
Adds content to the internal scripts
buffer. This buffer is made available
in the layout as $scripts_for_layout.
This method is helpful when creating
helpers that need to add javascript or
css directly to the layout. Keep in
mind that scripts added from the
layout, or elements in the layout will
not be added to $scripts_for_layout.
This method is most often used from
inside helpers, like the Javascript
and Html Helpers.
The key part:
Keep in mind that scripts added from the layout, or elements in the layout will not be added to $scripts_for_layout.
So how do I do it then?
I guess I could add a <script src="/js/mega_drop.js"></script> to the default.ctp layout. That doesn't feel right though as it would tightly tie the layout and the element together.
Whats the CakePHP best practice way to do this?
addScript() does not load a file; it adds actual code to the $scripts_for_layout variable. The idea being that the layout is a good, common place to load your JavaScript files and code. That way you can output all the code in one location - in the head block or at the end - either way it's together. So if you are in a situation where you've got JavaScript code in the view, rather than output it inline, you can pass it up to the layout.
The best way to load a script file is with the HTML Helper- echo $this->Html->script("script or array('of', 'scripts')"); With that in mind, you could $this->set('scripts', 'mega_drop'); in the element and then call the Html Helper with that $scripts variable from the layout.
The problem with that: it won't work if your nav_default.ctp is called from the layout. $this->set() works inside of a view (or an element called from a view) because the View is rendered before the Layout. If you are calling your element from the layout, then it is too late to be setting viewVars for use in the layout. The best thing to do is set() the scripts variable from the Controller and use a if(isset($scripts)) { echo $this->Html->script($scripts); } in the layout.
Correct and valid 1.3.x CakePHP 2.0 Dev is from example.ctp file:
$this->addScript($this->Javascript->link('tab_enabler'));
$this->addScript($this->Html->css('jquery.tabs'));
This is an example of how to properly include CSS and JS files from the view and adding in the variable $scripts_for_layout to not generate validation error with the W3C as it is not correct to add the link to a css file in <BODY></BODY>
try
$this->Html->script('mega_drop', $inline=false);
in your element without the echo.
The Second parameter says to add it to the $scripts_for_layout variable.
You should be able to do this in your element, so that the javascript is only included when the element is.
I need to use drupal_add_css to call stylesheets onto single Drupal 6 pages. I don't want to edit the main theme stylesheet as there will be a set of individual pages which all need completely new styles - the main sheet would be massive if i put it all in there.
My solution was to edit the page in PHP editor mode and do this:
<?php
drupal_add_css("/styles/file1.css", "theme");
?>
<div id="newPageContent">stuff here in html</div>
But when I view source, there is nothing there! Not even a broken CSS link or anything, it's just refusing to add the CSS sheet to the CSS package put into the page head.
Variations don't seem to work either:
drupal_add_css($path = '/styles/file1.css', $type = 'module', $media = 'all', $preprocess = TRUE)
My template header looks like this, I've not changed anything from the default other than adding a custom JavaScript.
<head>
<?php print $head ?>
<title><?php print $head_title ?></title>
<?php print $styles ?>
<?php print $scripts ?>
<script type="text/javascript" src="<?php print base_path() ?>misc/askme.js"></script>
<!--[if lt IE 7]>
<?php print phptemplate_get_ie_styles(); ?>
<![endif]-->
</head>
Why is this function not working?
It is not quite clear where you are selecting the template that you have in your example. If you are selecting it from a module then you can just use drupal_add_css in the module rather than the template.
If you have your own theme you can use template_preprocess_page and put logic in there to add the relevant CSS (you can also use it to select the template to use).
I have noticed something weird and it might fix your problem:
drupal_add_css( drupal_get_path('theme','themname') . '/working.css','module' ,'all' , false );
drupal_add_css( drupal_get_path('theme','themname') . '/path/to/folder/notworking.css','module' ,'all' , false );
The first one will work ebcause the style it in the main them folder
The second line will not work because the style is in a sub folder !
Edit:
i think it did not work because i did not write the path the the style file properly :S so please disregard my answer
drupal_add_css( drupal_get_path('theme','test') . '/pages/subpage/style.css','theme');
is working
This function wont work in templates. The reason is that the variable $styles which will hold all the stylesheet html will already have been generated at this point, so drupal_add_css wont work as it adds to that. if you want to do this in your theme, you would probably have to add the css file manually
<link rel="stylesheet" ... />
The other way would be to use drupal_add_css in a module, but you might have a hard time adding the correct css files on the pages you want.
It's possible to use drupal_add_css() inside your template.php file; this page has a good example of how to do just that.
Thanks for the link, wyrmmage. That's very useful. I think the rest of the code in the page is unneccessary. You probably just need these since drupal 6 already automatically check for file existence:
drupal_add_css(path_to_theme() . '/css/yourcss.css', 'theme');
// Add the following to regenerate $styles.
// This is needed for template_preprocess_page() since css is already generated at this point.
$variables['styles'] = drupal_get_css();
Answer was very much to use the CSS Injector module - great little addon!
Here is an excerpt from its project page:
Allows administrators to inject CSS into the page output based on configurable rules. It's useful for adding simple CSS tweaks without modifying a site's official theme. The CSS is added using Drupal's standard drupal_add_css() function and respects page caching, etc. The 2.x brach leverages CTools so CSS can be included with Feature changes (ie. CSS that improves the look of a View can be packaged with the View).
This code inside template.php works for me:
function alagna_preprocess_page(&$vars) {
drupal_add_css(path_to_theme() . '/header_1.css', 'theme');
$vars['css'] = drupal_add_css();
$vars['styles'] = drupal_get_css();
}
explained:
alagna is the theme name
header_1.css is the css file required.
drupal_add_css is expecting a path relative to base path whereas drupal_get_path does not return the path relative to base path.
global $base_path;
drupal_add_css($base_path . drupal_get_path('module / theme','name') . "/styles/file1.css", "module / theme");
You can choose between module and theme accordingly.
Try this
common.inc drupal_get_css($css = NULL)
Parameters
$css: (optional) An array of CSS files. If no array is provided, the default stylesheets array is used instead.
$css = $vars['css'];
// unset the system css files
$unset_css = array
'modules/system/system.css',
'modules/system/system-menus.css',
);
foreach($unset_css as $css_f) {
if(isset($css['all']['module'][$css_f])) {
unset($css['all']['module'][$css_f]);
}
}
// add css
$css['all']['theme'][drupal_get_path('theme', 'openpublish_theme') . '/css/style.css'] = true;
$vars['styles'] = drupal_get_css($css);