I'm working with a Joomla website, is not the first time that I use the LESS CSS, but this time I don't know why this is not working.
I've downloaded the last less.js from the website and I insert this before the end of tag HEAD, I call the CSS
before the js, like this:
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/main.css" type="text/css" />
<link rel="stylesheet/less" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/style.less" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/templateskit.css" type="text/css" />
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/less-1.5.0.min.js"></script>
If I check in the code of my website I see that the path is correct and I can see the code correctly, but the browser don't read the less css and I don't know why!
(Solution moved from question to answer)
There was a box-shadow property present in my LESS file; that was what gave me this problem! Removing it fixed it.
Related
I have a situation where i have a view file users.blade.php which extends master. and the master includes another file called header.blade.php, i want to pass some data from users.blade to header.blade.
Here is the simplified version of the files
/****** Users.blade.php *********/
#extends('shared.master')
#section('title', 'Dashboard')
#section('pagecss')
<link rel="stylesheet" href="links to css file" />
#endsection
Here is the master.blade.php
/******Shared/master.blade.php ********/
<html>
<head>
<title>#yield('title')</title>
#include('shared.header')
</head>
<body >
#yield('content')
</body>
</html>
Here is the header file
/******Shared/header.blade.php ********/
<link rel="stylesheet" href="links to bootstrap" />
#yield('pagecss')
<link rel="stylesheet" href="links to other files" />
#yield('pagecss') doesn't work in the header.blade, but it does work in master.blade. Now i cant paste it in master.blade because there are some files which override other files, so it has to be in a specific order. Any ideas how to make the yield work in header.blade?
EDIT:
I do like Bharat Geleda approach, i have modified the code to include some heredocs to make it more convenient. But i think its kind of a hack and still looking for a better solution.
/********** Users.blade.php ***********/
#extends('shared.master')
#section('title', 'Dashboard')
#section('pagecss')
<link rel="stylesheet" href="links to css file" />
#endsection
<?php $pagecss = <<<CSS_FILES
<link rel="stylesheet" href="links to page css" />
CSS_FILES;
?>
/*********** Shared/header.blade.php **********/
#if(isset($pagecss))
{{-- */ echo $pagecss;/* --}}
#endif
A possible solution would be to do this
<?php $pagecss = '<link rel="stylesheet" href="links to css file" />'?>
/****** Users.blade.php *********/
#extends('shared.master')
#section('title', 'Dashboard')
master.blade.php would remain the same
/******Shared/master.blade.php ********/
<html>
<head>
<title>#yield('title')</title>
#include('shared.header')
</head>
<body >
#yield('content')
</body>
</html>
And then in your header file you could do this
/******Shared/header.blade.php ********/
<link rel="stylesheet" href="links to bootstrap" />
#if(isset($pagecss))
{{ $pagecss }}
#endif
<link rel="stylesheet" href="links to other files" />
EDIT: TESTING OUT QUESTION
main.blade.php (master in your case)
<html>
<head>
#include('test.header')
</head>
<body >
#yield('content')
</body>
</html>
header.blade.php
<link rel="stylesheet" href="links to bootstrap" />
#yield('pagecss')
<link rel="stylesheet" href="links to other files" />
users.blade.php
#extends('test.main')
#section('content')
CONTENT
#endsection
#section('pagecss')
<link rel="stylesheet" href="links to css file" />
#endsection
OUTPUT :
<html>
<head>
<link rel="stylesheet" href="links to bootstrap" />
<link rel="stylesheet" href="links to css file" />
<link rel="stylesheet" href="links to other files" />
</head>
<body >
CONTENT
</body>
</html>
I guess this is as expected.
Simple if it's working on homepage and not in inner views, that means you've used it, and Blade will take only the higher level and resolve it (include its content where it should be placed within #yield).
What I'm trying to say that if you got a #yield within your header file and you've used it as #section('pagecss') later you got another view as in your case Users.blade.php with the same statement #section('pagecss') blade won't take the inner one.
Solution
Nice way but foolish:
create another #yield within your shared header blade file and name it as level two or like so. i.e #yield('pagecss-2')
Good way:
using #parent, this directive is going to append (rather than overwriting) content to the layout
as mentioned here within docs of laravel
i use sub folder in controller like admin_panel
in admin_panel / main.php i use this code
public function index()
{
$h_data['title'] = 'admin';
$c_data = array();
$this->parser->parse('admin/head',$h_data);
$this->parser->parse('admin/index',$c_data);
}
and head.php in view/admin contain :
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../assets/css/font.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="../assets/css/bootstrap-theme.min.css" type="text/css" />
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="../assets/css/admin_style.css" />
<script type="text/javascript" src="../assets/js/jquery.min.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap.min.js"></script>
<title> {title} </title>
</head>
asstes folder exist in root project but when refresh page all head tags return 404 and not found ???
You could try
public function index() {
// Load Parser library or autoload it.
$this->load->library('parser');
$data['title'] = "Page Title";
$data['base_url'] = base_url(); // Make sure you add url helper to autoload.
// May need to add true, i.e $this->parser->parse('header', $data, true);
$data['header'] = $this->parser->parse('header', $data);
// May need to add true, i.e $this->parser->parse('footer', NULL, true); Null No Data
$data['footer'] = $this->parser->parse('footer');
$this->parser->parse('content', $data);
}
On Content View Area's
<?php echo $header;?>
Content
<?php echo $footer;?>
Header View Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title><?php echo $title;?></title>
<base href="<?php echo base_url();?>"></base>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/admin/css/bootstrap.css" media="screen">
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/admin/css/custom.css" media="screen">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/admin/js/common.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/admin/js/filemanager.js"></script>
</head>
<body>
Footer View Example
<footer id="footer">
<br />
</footer>
</div>
<script type="text/javascript" src="<?php echo base_url();?>assets/admin/js/bootstrap.min.js"></script>
</body>
</html>
Auto load url helper
$autoload['helper'] = array(
'url',
'file',
'form',
'text',
'html',
'date'
);
i find answer this error occure for .htaccess not suitable code . i use this htaccess and work fine :)
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* index.php/$0 [PT,L]
Recently I was migrating a web page from joomla 1.5 -> joomla 3.2.
The template itself works great.
The content is not displayed because of the tag.
The written code I have in my index is as:
<?php
defined('_JEXEC') or die('Restricted access'); // no direct access
JHtml::_('behavior.framework',true);
require_once dirname(__FILE__) . DIRECTORY_SEPARATOR . 'functions.php';
$document = null;
if (isset($this))
$document = & $this;
$baseUrl = $this->baseurl;
$templateUrl = $baseUrl . '/templates/' . $this->template;
artxComponentWrapper($document);
?>
<!DOCTYPE html>
<html xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>"
xmlns:jdoc="http://www.w3.org/1999/XSL/Transform">
<head>
<jdoc:include type="head" name="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="stylesheet" href="<?php echo $this->baseUrl; ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseUrl; ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo $templateUrl; ?>/css/template.css" media="screen" />
<!--[if IE 7]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" type="text/css" media="screen" /><![endif]-->
<script type="text/javascript" src="<?php echo $templateUrl; ?>/script.js"></script>
</head>
...
</html>
And this renders as:
<html xml:lang="sl-si" lang="sl-si" xmlns:jdoc="http://www.w3.org/1999/XSL/Transform" class="chrome win">
<head>
<style type="text/css"></style>
</head>
<body>
<jdoc:include type="head" name="all">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css">
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css">
<link rel="stylesheet" type="text/css" href="/TKMS/templates/tkms_theme/css/template.css" media="screen">
<!--[if IE 7]><link rel="stylesheet" href="/TKMS/templates/tkms_theme/css/template.ie7.css" type="text/css" media="screen" /><![endif]-->
<script type="text/javascript" src="/TKMS/templates/tkms_theme/script.js"></script>
<!--CONTENT-->..
</jdoc:include>
Why does this happen? How can I fix this? I read that this happens because of BOM, but I could not fix it.
try to move the
<jdoc:include type="head" name="all">
tag into the head-tags, right (You have it in the body). That's at least where it's supposed to be. Not sure if it will actually render, though...
The problem is that the theme is an Artisteer theme. To solve this issue simply open the .artx theme and export for other joomla version.
If you don't have the .artx file then I cannot help you because I deemed the problem unsolvable.
We have a multistore setup in Magento - well, a two-store setup:
English for USD transactions and,
English for CAD transactions
The "en" store goes with the default URL — i.e. domain.com/
The "en-ca" store is setup as a subfolder — i.e. domain.com/ca/
The product/category URLs are all the same, they're merely appended at the end of the above store URLs.
We need to add the following tags:
<link rel="alternate" hreflang="en" href="http://domain.com/" />
<link rel="alternate" hreflang="en-ca" href="http://domain.com/ca/" />
where the product/category urls are appended to the store domains in the href tag.
For a Product URL: domain.com/product-name.html the above tags should become:
<link rel="alternate" hreflang="en" href="http://domain.com/product-name.html" />
<link rel="alternate" hreflang="en-ca" href="http://domain.com/ca/product-name.html" />
For a Category url: domain.com/category1/subcategory2/ the above tags should become:
<link rel="alternate" hreflang="en" href="http://domain.com/category1/subcategory2/" />
<link rel="alternate" hreflang="en-ca" href="http://domain.com/ca/category1/subcategory2/" />
What needs to be added to the template header .phtml files in order to get these output correctly for each product or category page, please?
Try putting this in your header file:
<?php $url = str_replace(".com",".com/ca" , Mage::helper('core/url')->getCurrentUrl()); ?>
<link href="<?php echo $url; ?>" hreflang="en-CA" rel="alternate" />
<?php $url = str_replace(".com/ca",".com" , Mage::helper('core/url')->getCurrentUrl()); ?>
<link href="<?php echo $url; ?>" hreflang="en" rel="alternate" />
It will generate the hreflang URL for you.
I notice Magento uses prototype.js:
<script type="text/javascript\" src="http://www.example.com/js/prototype/prototype.js"></script>
My question is how I can change the URL to a Google hosted version of prototype.js which is minified.
I tried to change the URL in page.xml but it doesn’t work as the URL always starts with http://www.example.com
Any idea how to specify an absolute URL for this?
Thanks a lot!
The addJs, addCSS, etc. action methods are specifically designed for local files. You can't use them to add files at external URLs to the page. Instead, you'll need to add the URLs directly to Magento's head template.
You can do this by copying the base head template at
app/design/frontend/base/default/template/page/html/head.phtml
To your theme's template folder
app/design/frontend/default/your-theme/template/page/html/head.phtml
If you look at that template, you'll see the HTML and PHP template code used to render the head element of all Magento HTML pages.
<meta http-equiv="Content-Type" content="<?php echo $this->getContentType() ?>" />
<title><?php echo $this->getTitle() ?></title>
<meta name="description" content="<?php echo htmlspecialchars($this->getDescription()) ?>" />
<meta name="keywords" content="<?php echo htmlspecialchars($this->getKeywords()) ?>" />
<meta name="robots" content="<?php echo htmlspecialchars($this->getRobots()) ?>" />
<link rel="icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" />
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
//]]>
</script>
<![endif]-->
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>
You can simply add HTML tags to this file to add any additional script tags you need. Don't forget to use the removeItem method to ensure the local prototype.js is NOT rendered.
If you wanted to get really fancy, rather than edit the template you could use Layout XML to add new scripts with something like this
<default>
<reference name="head">
<block type="core/text" name="cdn_prototype">
<action method="setText">
<text><![CDATA[<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>]]></text>
</action>
</block>
</reference>
</default>
(advice here is 1.6.1 specific, but should apply to most, if not all, versions of Magento)
You'll find an extension for this purpose at the ever-helpful Inchoo blog (link).
If you read through the post, it will help understand some of the Block and layout architecture that Magento uses too.
This Magento extension allows to include external JS and CSS files via layout XML files.
After installing the extension, put the following line in page.xml:
<action method="addItem"><type>absolute_js</type><name>http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js</name>
Don't forget to use the removeItem method to ensure the local prototype.js is NOT rendered.
Link to the source directly:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
Or via Google API:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("prototype", "1.6.0.2");</script>
Read the manual, Search online before asking