Proper Template Syntax for CSS?

[camillep]

Hi,

Sorry for such a simple question, but I am just checking before I implement this in my template.

Is this proper syntax in a template for a content block?

</__body class="{content block="bodyclass" label="bodyclass" oneline="true" size="25"}">

Thank you very much,
Camille

[mcDavid]

I don't think there's anything wrong with it.

Maybe you'd like to take a look at the CGContentUtils module, it adds some content types like dropdowns and stuff, which is probably nice for this situation.

[camillep]

Thank you for that. The CG Content Utilities is a great idea. I can see how useful it can be.

[Dr.CSS]

I use that all the time but you don't need the size= as I don't even think it will work and you need to use ' not " quotes in it...

{content block='bodyclass' label='Body Class' oneline='true'}

[camillep]

I want to thank you again. I think this is a good solution. Our site was set up with 6 different templates for 6 different sections. The only difference is that the body and container have different background images.

I would like to somehow script adding different classes to the body/container, but for lack of time, this is great.

I tried to restrict the content blocks to specific groups:

{content_module module='CGContentUtils' block='cb' name='cb' label='Checkbox' groups='designers,otherdesigners'}

as the help menu said, but that didn't work. I am still pretty happy!

[Dr.CSS]

If the changes are only for certain pages you can also use class='{$page_alias'} then they wont have to or be able to change it, if you need to target just the top menu item for a class you will need to install CGSimpleSmarty and use one of the tags below...


{$cgsimple->get_page_title($cgsimple->get_root_alias())} top level
{$cgsimple->get_page_title($cgsimple->get_parent_alias())} parent level

[camillep]

Thank you. I will have to play around with that. Is there a way to write that if a certain content block is empty, to add a class to certain div tag?

For instance if the sidebar content block is empty, the content area would have a different class.

[Dr.CSS]

You have to assign= the content block at the top of the template right after the </__body> call, then check...

</__body>
{content block='sidebar' label='Left Side' assign='leftblock'}

class='{if empty($leftblock)}wide{else}narrow{/if}'

You don't have to use the {else}narrow part...

This is some of the logic I used for my 8in1 template...

http://themes.multiintech.com/8in1-flex.html

[camillep]

Thank you! I am having a small problem with that.

The template was set-up as below. The smarty does add the full class, but when I add a right sidebar item, it doesn't work. If I move the right content block line above the content line, the smarty will change the class if the sidebar items are added, but the sidebar items don't show up. Is that just a css structure thing? Can I assign a name to the right content block elsewhere without moving the content block within the template?

Thank you very much!

</__body>
<div id="bkgd">
<div id="container">
<div id="window">
<div id="page">
<div id="menu">{menu}</div>
{content block="breadcrumbs" label="Breadcrumbs" oneline="true" size="120"}
<div id="content">
{content block='titlebar'}
<div id="copy" class="{if empty($side)}full{else}narrow{/if}">
{content label='Main Content'}
</div>
{content block="graphics"}
</div>
<div id="right">{content block='right' label='Right Sidebar' assign='side'}</div>
</div>
{global_content name='footer'}
</div>
</div>
</div>

[Dr.CSS]

Sorry, you have to assign= first then use the logic below it...

{content block='right' label='Right Sidebar' assign='side'}
*
<div id="copy" class="{if empty($side)}full{else}narrow{/if}">
*
<div id="right">{$side}</div>

If you want to remove the right div if it is empty...

{if !empty($side)}
<div id="right">{$side}</div>
{/if}

http://www.smarty.net/docsv2/en/languag ... ion.if.tpl

[camillep]

Yes! That was it. Thank you for explaining this in detail. I can apply this to a lot of things. I really appreciate it!!!

[camillep]

I was wondering if you could look at my template. This is very odd. The template was working fine, and calling in the sidebar items, and now it isn't. I'm not sure what is wrong. Below is the template:

{process_pagedata}
<!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="en" >
<head>
<title>{sitename} :: {title}</title>
{metadata}
{cms_stylesheet}
{literal}
<__script__ src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js" type="text/javascript"></__script>
<__script__ src="http://ajax.googleapis.com/ajax/libs/jq ... ery.min.js" type="text/javascript"></__script>
<__script__ src="http://ajax.googleapis.com/ajax/libs/jq ... -ui.min.js" type="text/javascript"></__script>
<!--[if IE 6]><style type="text/css">img { behavior: url(iepngfix.php); }</style><![endif]-->
<__script__ type="text/javascript">
$(document).ready(function() {
$('#page ul#nav li.on').parent().addClass('current-ul');
$('.current-ul').parentsUntil("#nav").each(function(t) {
if (this.nodeName == "LI") {
$(this).removeClass('off').addClass('on'); //
}
});
});
</__script>
{/literal}
</head>
</__body class="{content_module module='CGContentUtils' block='body-css' name='body-css' label='Body CSS'}">
<div id="bkgd" class="{content_module module='CGContentUtils' block='bkgd-css' name='bkgd-css' label='Bkdg CSS'}">
<div id="container" class="{content_module module='CGContentUtils' block='container-css' name='container-css' label='Container CSS'}">
<div id="window">
<div id="page">
<div id="menu">
<a href="/index.php"><img src="GRAPHICS/logo.png" alt="UNM logo" width="170" height="232" id="logo" border="0" /></a>
{if {page_attr key="extra3"} == 'exclude'}{menu template="main" number_of_levels="2"}{else}{menu template="main" number_of_levels="3" collapse="1"}{/if}
</div>
{content block='right' label='Right Sidebar' assign='$side'}
{content_module module='CGContentUtils' block='logo' name='logo' label='Right Column Logo' assign='logo'}
{content block='breadcrumbs' label='Breadcrumbs' oneline="true" size="120"}
<div id="content">
{content block="titlebar" label="Title" oneline="true" size="120"}
<div id="copy" class="{if empty($side)}full{else}narrow{/if}">
{content label="Main Content"}
</div>
<div>
<a href="http://www.unm.edu" target="_blank"><img id="right-logo" src="GRAPHICS/logos/{$logo}.gif" /></a>
</div>
</div>
{if !empty($side)}<div id="right">{$side}</div> {/if}
</div>
{global_content name='footer'}
</div>
</div>
</div>
{content block='javascript' label='Javascript'}
<__body>
</__html>

[Jo Morg]

Code: Select all

{content block='right' label='Right Sidebar' assign='$side'}

shouldn't it be

Code: Select all

{content block='right' label='Right Sidebar' assign='side'}

[camillep]

Sometimes the problems are so simple to fix. Thanks!