Flexi CSS Layouts for Dreamweaver Forum


box Flexi CSS Layouts for Dreamweaver
Flexi CSS Layouts is a Dreamweaver Extension that helps you create browser compliant table-less web pages with ease. Unlike other products that are limited to templated CSS layouts with 1, 2 or 3 columns, with Flexi CSS Layouts for Dreamweaver you can build your own custom layout structure without coding.

Find out more about Flexi CSS Layouts for Dreamweaver

Thread: joomla template

title left
User Details
message
title right
PAOLO

post date:
2011-03-10 15:12:08
Hello!rn i want create a layout with flexi css for joomla!rn i see this post: rn"http://www.extendstudio.com/forum/28/1553/adding-a-flexi-css-page-section-to-wordpress.html"rnthis post is like for create a joomla template?rnHelp me!rnThanks
Andrei Rinciog [Extend Studio]

post date:
2011-03-11 04:17:42
Hello,

You can use Flexi Layouts to create Joomla templates. You just have to include the Joomla modules in the content areas of the template and make sure you don't break the structure of the layout.

Please tell me what problem you have and where you got stuck.

Regards,
Andrei Rinciog
PAOLO

post date:
2011-03-11 07:25:04
Thanks Andrei!
i'have a question, i include this code in the header of my template:
<?php
/**
*@copyright Copyright (C) 2008 - 2009 . All rights reserved.
* @license
*/
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>miotemplate</title>
<link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo $templateUrl; ?>/css/CSSLayouts.css" media="screen" />
<script type="text/javascript" src="file:miotemplate/js/debug_plus.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $templateUrl; ?>/css/bordato.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $templateUrl; ?>/css/bordato_user.css" media="screen" />
</head>

The code is correct?
when i upload my template the page is blank!
for me joomla does not detect the link of the css in the php page!
thank for your reply
Andrei Rinciog [Extend Studio]

post date:
2011-03-14 05:50:06
Hello,

Could you give me a link to the page so I can take a look?

Check the generated code, is the href generated pointing to the CSS file correctly?

Also, please check if the files were uploaded in the correct location on the server.

Regards,
Andrei Rinciog
PAOLO

post date:
2011-03-14 08:23:48
Hello!

The link is http://www.promostampa.com
i use firebug and the files css not found in the server!
Andrei Rinciog [Extend Studio]

post date:
2011-03-15 11:13:12
Hello,

And the files are on the server and in the correct folder?

I see that the page is looking for the css files here: /templates/colore/css/. I tried following the links but it gave me page not found.

Regards,
Andrei Rinciog
PAOLO

post date:
2011-03-15 11:38:49
Hello! Andrei
Yes the files are in the server and in the correct folder!
www.promostampa.com/templates/colore/css!
I see that it finds the path is to the problem,
i write the path for the searching css in the head:

this is the php page:

<?php
/**
*@copyright Copyright (C) 2008 - 2009 . All rights reserved.
* @license
*/
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>colore</title>
<link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/colore/css/CSSLayouts.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>http://www.promostampa.com/templates/colore/css/colore.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/colore/css/colore_user.css" type="text/css" media="screen" />
</head>

<body class="color_body_design">
<div class="color">
<!-- (CSSLayouts Begin) #color #build_version=1.1.276;pack=Standard;category=Templates;layout=;layoutType=page;scheme=;cssSource=file;assets=;halign=left;minwidth=1200px;maxwidth=9999px;width=100%;bc=Templates;bl=hometemp2-->

<div class='cssLO color_wrapper_layout'>
<div class='wrapper cssLI color_wrapper_design'>
<div class='cssLO color_headerwrapper_layout'>
<div class='headerwrapper cssLI color_headerwrapper_design'>
<div class='cssLO color_header_layout'>
<div class='header cssLI color_header_design'>
<div class='cssLO color_header_xtdalignwrapper_layout'>
<div class='header_xtdalignwrapper cssLI color_header_xtdalignwrapper_design'>
<div class='cssLO color_header_centered_layout'>
<div class='header_centered cssLI color_header_centered_design'>
<div class='cssLO color_column_1_layout'>
<div class='column_1 cssLI color_column_1_design'><!-- column_1 Content Starts Here -->

<img src="http://www.promostampa.com/templates/colore/images/myLogo.gif" width="235" height="95" alt="Logo image" /><br/>

<!-- column_1 Content Ends Here -->
</div>
</div>
<div class='cssLO color_column_2_layout'>
<div class='column_2 cssLI color_column_2_design'><!-- column_2 Content Starts Here -->

<img src="http://www.promostampa.com/templates/colore/images/search.gif" width="177" height="31" alt="Search form" /><br/>

<!-- column_2 Content Ends Here -->
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLO color_navigation_layout'>
<div class='navigation cssLI color_navigation_design'>
<div class='cssLO color_navigation_xtdalignwrapper_layout'>
<div class='navigation_xtdalignwrapper cssLI color_navigation_xtdalignwrapper_design'>
<div class='cssLO color_nav_centered_layout'>
<div class='nav_centered cssLI color_nav_centered_design'><!-- nav_centered Content Starts Here -->

<div class="horizontalNav"><a href="#firsthmlink">Overview</a><a href="#secondhmlink">Services</a><a href="#thirdhmlink">Products</a><a href="#fourthhmlink">About</a><a href="#fifthhmlink" style="margin-right:-3px;">Contact</a></div>

<!-- nav_centered Content Ends Here -->
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLO color_showcase_layout'>
<div class='showcase cssLI color_showcase_design'>
<div class='cssLO color_slideshow_xtdalignwrapper_layout'>
<div class='slideshow_xtdalignwrapper cssLI color_slideshow_xtdalignwrapper_design'>
<div class='cssLO color_showcase_centered_layout'>
<div class='showcase_centered cssLI color_showcase_centered_design'>
<div class='cssLO color_slideshow_centered_xtdalignwrapper_layout'>
<div class='slideshow_centered_xtdalignwrapper cssLI color_slideshow_centered_xtdalignwrapper_design'>
<div class='cssLO color_showcase_image_layout'>
<div class='showcase_image cssLI color_showcase_image_design'>
<div class='cssLO color_column_4_xtdalignwrapper_layout'>
<div class='column_4_xtdalignwrapper cssLI color_column_4_xtdalignwrapper_design'>
<div class='cssLO color_placeholder_layout'>
<div class='placeholder cssLI color_placeholder_design'><!-- placeholder Content Starts Here -->

<img src="http://www.promostampa.com/templates/colore/images/showcase image.jpg" width="575" height="287" alt="Showcase image" /><br/>

<!-- placeholder Content Ends Here -->
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLO color_showcase_text_layout'><?php if($this->countModules('right')) : ?>
<jdoc:include type="modules" name="right" style="" />
<?php endif; ?>

<div class='showcase_text cssLI color_showcase_text_design'><?php if($this->countModules('right')) : ?>
<jdoc:include type="modules" name="right" style="" />
<?php endif; ?>
<!-- showcase_text Content Starts Here -->


<!-- showcase_text Content Ends Here -->
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLO color_middlewrapper_layout'>
<div class='middlewrapper cssLI color_middlewrapper_design'>
<div class='cssLO color_contentwrapper_layout'>
<div class='contentwrapper cssLI color_contentwrapper_design'>
<div class='cssLO color_contentwrapper_xtdalignwrapper_layout'>
<div class='contentwrapper_xtdalignwrapper cssLI color_contentwrapper_xtdalignwrapper_design'>
<div class='cssLO color_content_centered_layout'>
<div class='content_centered cssLI color_content_centered_design'>
<div class='cssLO color_contenttitle_layout'>
<div class='contenttitle cssLI color_contenttitle_design'><!-- contenttitle Content Starts Here -->

<h1>Welcome to our company website</h1>

<!-- contenttitle Content Ends Here -->
</div>
</div>
<div class='cssLO color_maincontent_layout'>
<div class='maincontent cssLI color_maincontent_design'>
<div class='cssLO color_row_1_layout'>
<div class='row_1 cssLI color_row_1_design'>
<div class='cssLO color_column_5_layout'>
<div class='column_5 cssLI color_column_5_design'><!-- column_5 Content Starts Here -->

<img src="http://www.promostampa.com/templates/colore/images/sample_image.png" width="200" height="87" alt="Sample image" />
<h2>who we are</h2>
<p>Curabitur iaculis commodo aliquet. Vestibulum est quam, aliquam at varius in, blandit eget nibh. Morbi vehicula, purus sed gravida consectetur, mauris tellus varius diam, at pretium nisi magna quis nulla.</p>
<br />
<p>Vivamus ultrices mauris eu risus pulvinar porttitor. Vestibulum et nisl augue.</p>
<br />
<a href="#readmore1">read more</a>

<!-- column_5 Content Ends Here -->
</div>
</div>
<div class='cssLO color_column_6_layout'>
<div class='column_6 cssLI color_column_6_design'><!-- column_6 Content Starts Here -->

<img src="http://www.promostampa.com/templates/colore/images/sample_image.png" width="200" height="87" alt="Sample image" />
<h2>what we do</h2>
<p>Cras sodales, nulla id iaculis dapibus, leo nisl porttitor massa, ac feugiat ligula neque a justo. In ac arcu odio, et ullamcorper lacus.</p>
<br />
<p><strong>In non sem quis magna congue fringilla</strong>. Nam tempus, quam vel cursus bibendum, nibh nisi scelerisque sem, vitae consectetur risus urna quis odio.</p>
<br />
<a href="#readmore2">read more</a>

<!-- column_6 Content Ends Here -->
</div>
</div>
<div class='cssLO color_column_7_layout'>
<div class='column_7 cssLI color_column_7_design'><!-- column_7 Content Starts Here -->

<img src="http://www.promostampa.com/templates/colore/images/sample_image.png" width="200" height="87" alt="Sample image" />
<h2>customer quotes</h2>
<blockquote>Donec non ante quis elit tincidunt mollis. Proin feugiat venenatis arcu in pretium. Mauris non turpis eget magna dapibus varius quis condimentum nunc. <strong>Client Name</strong></blockquote>
<br />
<blockquote>Mauris non turpis eget magna dapibus varius quis condimentum nunc. <strong>Client Name</strong></blockquote>

<!-- column_7 Content Ends Here -->
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLO color_row_2_layout'>
<div class='row_2 cssLI color_row_2_design'>
<div class='cssLO color_column_8_layout'>
<div class='column_8 cssLI color_column_8_design'><!-- column_8 Content Starts Here -->

<a href="#" style="float:left;"><img src="http://www.promostampa.com/templates/colore/images/facebook.png" width="32" height="32" alt=" " /><br /></a>
<a href="#" style="float:left; margin-left:2px;"><img src="http://www.promostampa.com/templates/colore/images/blogger.png" width="32" height="32" alt=" " /><br /></a>
<a href="#" style="float:left; margin-left:2px;"><img src="http://www.promostampa.com/templates/colore/images/rss.png" width="32" height="32" alt=" " /><br /></a>
<a href="#" style="float:left; margin-left:2px;"><img src="http://www.promostampa.com/templates/colore/images/twitter.png" width="32" height="32" alt=" " /><br /></a>
<a href="#" style="float:left; margin-left:2px;"><img src="http://www.promostampa.com/templates/colore/images/flickr.png" width="32" height="32" alt=" " /><br /></a>

<!-- column_8 Content Ends Here -->
</div>
</div>
<div class='cssLO color_column_9_layout'><?php if($this->countModules('user2')) : ?>
<jdoc:include type="modules" name="user2" style="" />
<?php endif; ?>

<div class='column_9 cssLI color_column_9_design'><?php if($this->countModules('user1')) : ?>
<jdoc:include type="modules" name="user1" style="" />
<?php endif; ?>
<!-- column_9 Content Starts Here -->



<!-- column_9 Content Ends Here -->
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLO color_screenshotswrapper_layout'>
<div class='screenshotswrapper cssLI color_screenshotswrapper_design'>
<div class='cssLO color_screenshotswrapper_xtdalignwrapper_layout'>
<div class='screenshotswrapper_xtdalignwrapper cssLI color_screenshotswrapper_xtdalignwrapper_design'>
<div class='cssLO color_screens_centered_layout'>
<div class='screens_centered cssLI color_screens_centered_design'>
<div class='cssLO color_screenstitle_layout'>
<div class='screenstitle cssLI color_screenstitle_design'><!-- screenstitle Content Starts Here -->

<h2>Our clients</h2>

<!-- screenstitle Content Ends Here -->
</div>
</div>
<div class='cssLO color_screens_layout'>
<div class='screens cssLI color_screens_design'>
<div class='cssLO color_screen1_layout'>
<div class='screen1 cssLI color_screen1_design'><!-- screen1 Content Starts Here -->

<div align="center"> <img src="http://www.promostampa.com/templates/colore/images/sample_image.png" width="200" height="87" alt="Sample image"/><br/>
</div>
<p>Image Caption 1</p>

<!-- screen1 Content Ends Here -->
</div>
</div>
<div class='cssLO color_screen2_layout'>
<div class='screen2 cssLI color_screen2_design'><!-- screen2 Content Starts Here -->

<div align="center"> <img src="http://www.promostampa.com/templates/colore/images/sample_image.png" width="200" height="87" alt="Sample image" /><br/>
</div>
<p>Image Caption 2</p>

<!-- screen2 Content Ends Here -->
</div>
</div>
<div class='cssLO color_screen3_layout'>
<div class='screen3 cssLI color_screen3_design'><!-- screen3 Content Starts Here -->

<div align="center"> <img src="http://www.promostampa.com/templates/colore/images/sample_image.png" width="200" height="87" alt="Sample image" /><br/>
</div>
<p>Image Caption 3</p>

<!-- screen3 Content Ends Here -->
</div>
</div>
<div class='cssLO color_screen4_layout'>
<div class='screen4 cssLI color_screen4_design'><!-- screen4 Content Starts Here -->

<div align="center"> <img src="http://www.promostampa.com/templates/colore/images/sample_image.png" width="200" height="87" alt="Sample image" /><br/>
</div>
<p>Image Caption 4</p>

<!-- screen4 Content Ends Here -->
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLO color_newswrapper_layout'>
<div class='newswrapper cssLI color_newswrapper_design'>
<div class='cssLO color_newswrapper_xtdalignwrapper_layout'>
<div class='newswrapper_xtdalignwrapper cssLI color_newswrapper_xtdalignwrapper_design'>
<div class='cssLO color_news_centered_layout'>
<div class='news_centered cssLI color_news_centered_design'>
<div class='cssLO color_newstitle_layout'>
<div class='newstitle cssLI color_newstitle_design'>
<div class='cssLO color_column_3_layout'>
<div class='column_3 cssLI color_column_3_design'><!-- column_3 Content Starts Here -->

<h2>Latest news</h2>

<!-- column_3 Content Ends Here -->
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLO color_news_layout'>
<div class='news cssLI color_news_design'>
<div class='cssLO color_news_left_layout'>
<div class='news_left cssLI color_news_left_design'><!-- news_left Content Starts Here -->

<div>
<div class="newsImage"> <img src="http://www.promostampa.com/templates/colore/images/news_sample_image.png" width="75" height="64" alt="Sample image"/><br/>
</div>
<div class="newsArticle">
<p><strong>6th July 2010</strong></p>
<p>Suspendisse adipiscing rhoncus massa, sit amet sollicitudin quam vulputate non. In non turpis nisl. Curabitur purus mi, pharetra vitae viverra et, mattis sit amet nunc.</p>
<a href="#"><img src="http://www.promostampa.com/templates/colore/images/read_more_btn.png" width="67" height="23" align="right" style="padding-bottom:5px" alt="Read more button" /><br/>
</a></div>
</div>

<!-- news_left Content Ends Here -->
</div>
</div>
<div class='cssLO color_news_right_layout'>
<div class='news_right cssLI color_news_right_design'><!-- news_right Content Starts Here -->

<div>
<div class="newsImage"> <img src="http://www.promostampa.com/templates/colore/images/news_sample_image.png" width="75" height="64" alt="Sample image"/><br/>
</div>
<div class="newsArticle">
<p class="newsDate"><strong>3rd July 2010</strong></p>
<p>Suspendisse adipiscing rhoncus massa, sit amet sollicitudin quam vulputate non. In non turpis nisl. Curabitur purus mi, pharetra vitae viverra et, mattis sit amet nunc.</p>
<a href="#"><img src="http://www.promostampa.com/templates/colore/images/read_more_btn.png" width="67" height="23" align="right" style="padding-bottom:5px" alt="Read more button"/><br/>
</a></div>
</div>

<!-- news_right Content Ends Here -->
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLO color_footerwrapper_layout'>
<div class='footerwrapper cssLI color_footerwrapper_design'>
<div class='cssLO color_footerwrapper_xtdalignwrapper_layout'>
<div class='footerwrapper_xtdalignwrapper cssLI color_footerwrapper_xtdalignwrapper_design'>
<div class='cssLO color_footer_centered_layout'>
<div class='footer_centered cssLI color_footer_centered_design'>
<div class='cssLO color_footerleft_layout'>
<div class='footerleft cssLI color_footerleft_design'><!-- footerleft Content Starts Here -->

<img src="http://www.promostampa.com/templates/colore/images/mylogo_4.png" width="108" height="43" alt="Logo image" /><br/>

<!-- footerleft Content Ends Here -->
</div>
</div>
<div class='cssLO color_footerright_layout'>
<div class='footerright cssLI color_footerright_design'><!-- footerright Content Starts Here -->

&copy; Copyright MySite.Com . All Rights Reserved.

<!-- footerright Content Ends Here -->
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLO color_bottomcolor_layout'>
<div class='bottomcolor cssLI color_bottomcolor_design'><!-- bottomcolor Content Starts Here -->&nbsp;<!-- bottomcolor Content Ends Here -->
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class="cssLClearL"></div>
<!-- #color (CSSLayouts End) -->
</div>

</body>
</html>

the path for CSSLayouts is correct, in fact in the center align, but the other css no!
What is the correct path for the other css?
help me! thank
PAOLO

post date:
2011-03-19 15:21:57
no reply?