Reply New Topic
2008/2/15 7:41:34
#1
Offline
Just popping in

Code for hiding block titles

Hi everyone,

Hiding the titles of various blocks in my sites is important to me, as it allows to further customise the look and feel of the site away from a typical "boxy" design. In Xoops, I was replacing the right and left block code in the theme with this new code snippet:

<{foreach item=block from=$xoops_lblocks}>
<{if $block.title|regex_replace:"/.*none*/":"none" ne "none"}>
<div class="<{cycle values="blockTitle"}>">
<{$block.title}></div><{/if}><div class="blockContent">
<{$block.content}></div>
<{/foreach}>

When I entered the word "none" in the block title, the title for that block would not appear.

The theme code for the default ICMS theme is slightly different though...as seen below:

<!-- Start Left Column -->
<{if $xoBlocks.canvas_left}>
<div id="xo-canvas-leftcolumn">
<{foreach item=block from=$xoBlocks.canvas_left}><{includeq file="$theme_name/theme_blockleft.html"}>
<br />
<{/foreach}>
<!-- more content here for example -->
</div>
<{/if}><!-- End Left Column -->


How can I tweak the side column code in ICMS, so that it hides the block titles, as does the above example does in a Xoops theme?

Thanks for your thoughts!

jeffgr


2008/2/15 7:47:24
#2
Offline
Home away from home

Re: Code for hiding block titles

change:
<{foreach item=block from=$xoBlocks.canvas_left}><{includeq file="$theme_name/theme_blockleft.html"}> <br /> <{/foreach}>


To:
<{foreach item=block from=$xoBlocks.canvas_left}> <{if $block.title|regex_replace:"/.*none*/":"none" ne "none"}> <div class="<{cycle values="blockTitle"}>"> <{$block.title}></div><{/if}><div class="blockContent"> <{$block.content}></div> <{/foreach}>

clear templates, should work the same.


2008/2/15 8:26:56
#3
Offline
Home away from home

Re: Code for hiding block titles

In my sites I use the same principle but with a different code.

<{if preg_match("/^\./", $block.title) == 0 }> <div class="blockTitle"> <{$block.title}> </div> <{/if}> <div class="blockContent"><{$block.content}></div>


Using this code you just have to put one . at the beginning of the title of the blocks that you don't want the title to appear.

_________________


If you like my work you can Donate

2008/2/21 9:04:24
#4
Offline
Just popping in

Re: Code for hiding block titles

MrTheme, TheRplima:

Thank you for your code examples! I tried both, both worked, but ended up using the second example, provided by TheRplima.

However, while this achieves my desired function (selectively hiding block titles), it does remove the css styling from the remaining block titles...just the block titles remain, but not css styling.

Have you gotten this code example to work on your sites, while keeking the css styles for the remaining block titles? Any idea why it is not working on my site? I am using the impresscms light theme.

The site is www.aroundtheneighbourhood.com, still under construction, if you want to see for yourself.

Thanks,

Jeffgr


2008/2/21 9:15:49
#5
Offline
Home away from home

Re: Code for hiding block titles

I can see the problem.

The theme before the hack uses:

"<{includeq file="$theme_name/theme_blockleft.html"}>"

to include the style, which is not used in Rodrigo's version.

Try replacing:
<div class="blockTitle">
<{$block.title}>
</div>

with:

<{includeq file="$theme_name/theme_blockleft.html"}>

(but backup the html first... as I can't test this remotely...)


2008/2/21 11:39:55
#6
Offline
Home away from home

Re: Code for hiding block titles

Well, if you do not plan on changing it to much there is a way to set it using only the cycle values.

IE.

<div class="<{cycle values="blockTitle,blockTitle2,blockTitle3,blockTitle,blockTitle,blockTitle"}>"><{$block.title}></div> <div class="blockContent"><{$block.content}></div>


Basically what this will do is cycle the css class. So you can style them based on where they are.

css example
#leftcolumn { width: 220px; font-size: 12px; padding-top: 5px; padding-left: 5px; padding-right: 5px; } #leftcolumn div.blockTitle { color: #FFF; text-align:left; font-weight: bold; font-size: 12px; } #leftcolumn div.blockTitle2 { display: none; } #leftcolumn div.blockTitle3 { color: #000; text-align:left; font-weight: bold; font-size: 12px; background-image: url(images/blah.jpg) no-repeat; } #leftcolumn div.blockContent { color: #FFF; padding: 4px; background-color: #000; }


Only issue with doing it this way is that each tome you add a block to that column you will need to add a new cycle value to account for it. Which like I said wouldn't be that big of a deal if you weren't planning on changing it that often.


2008/2/21 12:47:31
#7
Offline
Home away from home

Re: Code for hiding block titles

I am not sure why you don't use the first one. I am using it on a few sites right now.

Are you making sure that the block title is "none"?


2008/5/4 23:59:57
#8
Offline
Not too shy to talk

Re: Code for hiding block titles

Hi,

I am developing a icms site for my school, and I am using the brighthost theme from Mr.Theme, MultiMenu and pico. The brighthost puts 5 buttons across the top of the page and I want to link these to 5 MultiMenu blocks 01 to 05, one block for each button. The thing is I want all the blocks to be in the same position on the topleft and I want to hide or show them depending on which brighthost button is pressed. This is going a step further from just hiding or showing a title, I am interested in the whole block. I have written a basic php function called function.show_hide_block.php which I put into the smarty/plugins folder. This file contains the function below:-

function smarty_function_show_hide_blocks () {

if (is_array($xoops_lblocks)) {
foreach $xoops_lblocks as $block {
if ($block.title !== 'Elementary') {
include file="$xoops_theme/blocks/theme_blockleft.html"
}
}
}


}


Into the theme I put the following line

<td id="button2"><a {show_hide_blocks}>Elementary</a></td>

I am trying to keep everything simple at this stage(no parameters passed to the function yet) just to get something basic working. I was hoping that the line above would call the function and hide the Elementary multiMenu block. However, it did not and hence this post. I cannot use an onclick in the above line. It doesn't like it I guess because it is a javascript construct. i.e. <td id="button2"><a onclick="{show_hide_blocks}">Elementary</a></td> doesn't work. I haven't been able so far to find a theme or a template that already does what I am attempting. There has to be a simple smarty variable that hides or shows an entire block and a way for the blocks to be located in the same position.

Any help would be appreciated.


2008/5/5 6:20:02
#9
Offline
Home away from home

Re: Code for hiding block titles

You may consider using ajax to do this.

you can assign a handler based on the blocktitle, and when your button is clicked it would hide/show them. As far as position, you could quite easily use the same block for all of this, or code the whole series right into the theme.


2008/5/5 9:04:42
#10
Offline
Home away from home

Re: Code for hiding block titles

This is not really AJAX, just javascript.

Pity my company's site is not finished yet, as I'm considering to do something like this using jQuery. You could copy the code.

_________________
If you can't understand what I'm saying, you're not geek enough
ISegura.es

2008/5/5 13:32:00
#11
Offline
Not too shy to talk

Re: Code for hiding block titles

thanks for the tip. I started another topic and nanchenko suggests exactly why you have said. I was going down the wrong track trying to use smarty functions for something that really is dynamic and needing javascript and css. For example the html for the left blocks contains this line

<td width="98%" style="background-image: url(<{$xoops_imageurl}>images/lb_tc.gif);"><div class="blockTitle"><{$block.title}></div></td>

If javascript can recognise smarty variables like {$block.title} then it will be relatively easy to write a script that either hides or shows a block depending on this smarty variable.

This is what you were suggesting right?


2008/5/5 13:37:27
#12
Offline
Home away from home

Re: Code for hiding block titles

You can add an id to the the div and get it with javascript.
Something like this:
Quote:


<td width="98%" style="background-image: url(<{$xoops_imageurl}>images/lb_tc.gif);"><div class="blockTitle" id="block_<{$block.id}>"><{$block.title}></div></td>


_________________


If you like my work you can Donate

2008/5/6 4:38:02
#13
Offline
Home away from home

Re: Code for hiding block titles

My apologies, Nachenko is always having to correct me on whether its ajax or js, or whatever.

anywho...

http://www.webmasterworld.com/forum91/441.htm

There are tons of scripts already fabbed up out there. Generally you can just google "Javascript show/hide" and get 1000's of results.

BOL


2008/5/7 12:17:30
#14
Offline
Not too shy to talk

Re: Code for hiding block titles

thanks to both of you for your help. It was easy to find a show_hide javascript and the foreach xoops-block code was easily modified. I can now click my top buttons and bring up the appropriate multiMenu block on the left. The only small problem I had was persistence. For example when I press my top Elementary button the multimenu block containing the Elementary submenus appears but when I select a submenu from this block the page refreshes and the Elementary block disappears(reverts back to the default which is to show the home button block). We have overcome this by putting an init() function in the start.js script in multiMenu/scripts

function addToStart(fnc){
if(!window.listStart) window.listStart = new Array();
window.listStart.push(fnc)
}

function start(){
var ls = window.listStart;
if(ls){
for(i=0; i<ls.length; i++){
ls[i]();
}
}
init(); <------this has been added.
}

window.onload = start;

This init() function will be in the scripts section of the theme.html and will keep the relevant menu in place when the page is refreshed.

Actually if you have any thoughts on other ways for establishing persistence I would be interested. For example this is my left block loop


<{foreach item=block from=$xoops_lblocks}>
<{if ($block.title == 'Elementary' || $block.title == 'Home')}>
<div id="_<{$block.title}>" style="display: none; visibility: hidden;"><{$block.content}></div>
<{/if}>
<{if ($block.title !== 'Elementary' && $block.title !== 'Home')}>
<{include file="$xoops_theme/blocks/theme_blockleft.html"}>
<{/if}> <{/foreach}>

This is working okay, but could I link a smarty variable to help the page remember which block is current. The only way I have been able to link the smarty with the javascript is via the id set in the smarty code above. The page is operating under two masters, smarty and javascript and I wonder are there other ways where they can connect.


Reply New Topic extras
 Previous Topic   Next Topic
You can view topic.
You can start a new topic.
You can reply to posts.
You cannot edit your posts.
You cannot delete your posts.
You cannot add new polls.
You cannot vote in polls.
You cannot attach files to posts.
You can post without approval.