I am New to CakePhp and want to learn more about it because of it's flexibility.But am having a bit of a prob already.
I have this project of mine where iam using font awesome in CakePhp.
When i extracted the zip file of Font-Awesome i found "font-awesome.css " and a Folder name "fonts".
Well i have included the "font-awesome.css " in my default.ctp and copy the css file in "app/webroot/css folder".
Like this
<?php echo $this->Html->css('font-awesome');?>
<body>
<i class="fa fa-calendar fa-3x"> MyAttendence</i>
</body>
but i don't know where to put the "fonts" folder, i have tried placing this folder inside webroot/files/ but still no luck .
Any help is appreciated.
FontAwesome is including font files like ../fonts/fontawesome-webfont.eot?v=4.0.3, so you should try to put them in webroot/fonts (like webroot/fonts/fontawesome-webfont.eot)
Related
I am using Lokesh Dhakar's Lightbox on my page. I renamed the css and js folders to be _css and _js on my server and all works except I also renamed the "img" folder to be "_img", and the image icons (close, loading, prev and next) don't work. Are you not able to have this folder be named something other than "image" or "img"? Thanks.
I did exactly that, changed the name. Just make sure in CSS and JS and you have the correct links to the new folder.
I have a Drupal 7 site with a custom sub theme based on Zen. I have a custom logo that I placed in the page.tpl.php header div. The problem I'm having is that the logo only shows up on the first "main" pages, but not "subpages". Excuse my terminology here trying to explain this. What I mean by subpages is any page that is further down the chain or occurring after the first forward slash. Below is an example of what I mean by "main" pages and "subpages". All these "main" pages are directly after the first slash after the website name. The logo doesn't show up on any pages that occur after these main pages (subpages). All my pages are made using the Pages module, however, the subpages have a path using %term, for example /support/%term or products/%term.
What am I missing and what do I need to do to make my logo in page.tpl.php show up on all pages of my site? Am I supposed to create a new page.tpl.php file for the pages using /%term?
Main pages - logo shows up:
mysite.com/about
mysite.com/products
mysite.com/support
mysite.com/contact
Sub pages - logo doesn't show up:
mysite.com/products/product1
mysite.com/support/product1-support
If I understand you correctly, the quick fix for that is to make sure your logo's path starts with '/', like so:
<img src="/sites/all/themes/customZen/images/logo.png" />
But then if path of the theme changes everything will break, so don't do this.
If you place the logo using CSS as a background, use relative URL (it is relative to the path of .css file)
Or you can do something like this in your page.tpl.php:
<img src="<?php url($directory . '/images/logo.png'); ?>" />
$directory is the directory the template is located in, e.g. sites/all/themes/customZen.
Full list of page.tpl.php variables can be found here: https://api.drupal.org/api/drupal/modules%21system%21page.tpl.php/7.x
Did you solve this?..Well, if you didn't, try with this in your page.tpl.php paste this:
<img alt="" src="<?php echo drupal_get_path('theme', 'customZen');?>/images/logo.png">
Good luck!
Speaking of lightbox2 version 2.8? downloaded march 2016...
How set maxwidth?
Here mi setup:
Under mi website folder i've, created a folder 'lightbox2' and put into the contain of the 'dist' folder of lightbox: css, images and js folders.
Then into de 'head'`section of html page, enter this code:
<link rel="stylesheet" href="lightbox2/css/lightbox.min.css">
<script>
lightbox.option({
'maxWidth' : 400,
})
<script>
and
<script src="lightbox2/js/lightbox-plus-jquery.min.js"></script>
at end of page
Now display the image with:
<img src=image-sample.jpg width=120 border=0>
The image always show at original size!
Help, please
well ... after searching and testing, I discovered that options should go under the line that invokes the js, not the css :)
After this, the image limit size work ok.
How do you link css files and javascript/jquery files to a controller/view??
I am using CakePHP_1.3 and have located the following code online, but I cant seem to figure out where to put this, and secondly, where to place the css file named css_file.
<?php $this->Html->css("css_file", null, array("inline"=>false)); ?>
Any help appreciated guys...
You would put the CSS file in:
app/
webroot/
css/ <-- here
You would put the line of code in your default.ctp layout. This is located in (1.3):
cake/
libs/
view/
layouts/
default.ctp <-- copy this to app/views/layouts/
Then open that up app/views/layouts/default.ctp and look at the HTML. You'll see where Cake is already using this command. Simply replace the filename with the file you added. Do not add the .css to the end when you add the line of code.
you use echo $this->Html->css('css_file_name_without_the_extension'); and echo $this->Html->script('same') in the view
Based on your question, it sounds like you were asking how to do this on a view-by-view basis.
This is where $scripts_for_layout comes in useful.
You just need to make sure that it's in your <head> tag in /app/views/layouts/default.ctp as <?php echo $scripts_for_layout; ?>
Then, you can literally add the code you included in your question into any of your views, at literally any point you like. Because you have 'inline' => false it won't actually appear at that position in the view:
<?php $this->Html->css("css_file", null, array("inline"=>false)); ?>
...and you'll find that css_file.css is automatically linked in your <head> whenever that particular view is loaded. This is a great way to only load specific CSS files on a per-view basis when they're needed, yet make sure they appear in the <head> tag where they should be.
This also works for JavaScript as follows:
<?php $this->Html->script("js_file", null, array("inline"=>false)); ?>
If you want to have one or more CSS files loaded in all views, just put a shortened version your code in the <head> of default.ctp as follows:
<?php echo $html->css(array('each','one','of','your','css','files'));
Or, again, for JavaScript:
<?php echo $html->script(array('each','one','of','your','js','files'));
Don't include the .css or .js extension in the array.
im using themes in an app im doing, and need a global css/img/js folder
i have tried using app/webroot as this folder, but cant get any css from a theme to show the images.
I have a setup like :: /app/views/themed/my_theme/webroot/css/file.css
With some css that looks like:
...
body{
background-image: url('../img/file.jpg');
}
...
if i have the image in /app/views/themed/my_theme/webroot/img/file.jpg everything works 100% but when i put the image in /app/webroot/img/file.jpg it will not show. i have tried all sorts of combinations for the
i have also tried using a plugin dir like app/plugins/my_plugin/webroot/img/file.jpg but the various paths ive tried will not show the image either.
any ideas how i can get the image to show? i dont mind if its for webroot/ or in plugins/xyz/, just as long as i can use the same image in many different themes with out having to duplicate the images
when the image is in /webroot/img i can use the full path like url(http://locahost/my_app/img/file.jpg) and it works.
things that dont work
url("img/file.jpg")
url("/img/file.jpg")
url("../img/file.jpg")
url("/../img/file.jpg")
url("../../img/file.jpg")
thanks.
In your CSS file
body{
background-image: url('/img/file.jpg');
}
This will use the root area to find the image in /app/webroot/img/file.jpg
CSS has urls for images relative to the path it is placed in.
CSS files from my_theme are linked like site.com/theme/my_theme/css/style.css in the browser. So if you want to use an image from app/webroot/img in your theme's CSS, use url(../../../img/image.png)
I have not tried that but the cookbook says:
If you want to keep your theme assets
inside app/webroot it is recommended
that you rename app/webroot/themed to
app/webroot/theme.