Multiple center blocks in Xanthia home page -- step-by-step

Topic:	Multiple center blocks in Xanthia home page -- step-by-step
tcochran Softmore Posts: 89 Posted: 3.Oct 2006 - 22:17	After struggling with block control in a tableless Xanthia theme for the past few days, I finally got it to work. I wrote the following notes to help me remember how to do it again in the future and post them here in case they might help others, too. Here is a step-by-step guide to adding a row of 3 blocks in the center of a Xanthia home page in PostNuke 0.762: 1. NEW BLOCKS: a. Start by adding new blocks in Administration > Blocks b. In my case I added Center Left, Center Middle, and Center Right blocks, each in the Center position c. Note: Be sure to add a title for each block, so that it will show up in the Xanthia content wrapper and block control listings 2. BLOCK POSITION TAGS: a. Go to Administration > Xanthia > MyTheme > Edit theme > Block Position Tags b. Add new block position tags for each of the new blocks c. My unique tags (in the center of the HTML comment code structure) are $CTRLEFT, $CTRMID, and $CTRRT 3. TEMPLATES a. If you need a new template for the new blocks, then skip the Content Wrappers tab for a moment and . . . b. Go to Administration > Xanthia > MyTheme > Edit theme > Templates c. Add a new Block template, such as center.htm 4. CONTENT WRAPPER a. Go to Administration > Xanthia > MyTheme > Edit theme > Content Wrappers b. Add new content wrappers for each of the new blocks c. My new wrappers are Center Left, Center Middle, and Center Right d. For each one: d1) Select the proper block under "New skin for block" and commit d2) Select the template you wish to use for it, such as center.htm, and d3) Activate the wrapper 5. BLOCK CONTROL a. Go to Administration > Xanthia > MyTheme > Edit theme > Block control b. This section might make more sense if you could setup block control by template -- but that is not a choice here -- so select the module that applies to you. c. In my case, the News module controls my home page, so I select News from the Module drop-down list d. In the Block selection area, highlight "Block Control" AND each of the blocks which you wish to control for the module in question: d1) For me, that's Center Left, Center Middle, and Center Right for the new blocks, along with d2) Main Menu, Login, and any other blocks that I want to show up on that page d3) Note: Xanthia block control will override the regular PostNuke blocks admin for the module I've selected, so any block I want to show on the home page MUST be selected here e. Click Update and a listing of relevant blocks will appear under the News module line in the module table at the bottom of the page f. Original blocks will show their current Left or Right postions, with a "Default template" -- leave as is, if appropriate g. For new blocks created in step 1, assign them to the positons created in step 2 and the template(s) created in step 3 6. HOME.HTM a. My theme has a home.htm template for the home page, so that must now be edited to add the new blocks. b. For a traditional theme, place the tags created in step 2 in a table in the center of the home page and then adjust for width and other characteristics, as needed c. For a tableless theme, place the tags created in step 2 in a content div at the appropriate spot, inside the content wrappers created in step 4 7. CSS STYLING a. Edit the related CSS files to style each of the new divs, as needed b. Note: If one or more blocks are to be floated, then place them in home.htm ABOVE the non-floated block(s) in the content div -- otherwise, some browsers may not render properly 8. FLOAT DROP a. After adding the new blocks in the center of the home page, your old right column blocks may suddenly drop down below the center ones (instead of next to them) in IE 6 -- this is a Microsoft bug leading to what is known as "float drop" b. In my case, I added "overflow: hidden;" to the styling for #rightColumn and it made IE 6 play nice c. Other solutions to cure float drop are available at http://nemesis1.f2o.org/aarchive?id=11 9. REWARD a. You have now spent an unfortunate amount of time slogging through this process, but you are rewarded by a "non-Nukish" home page which you can modify to your heart's content b. In my case, I also went and drank a beer. Cheers! -- Terry Cochran Boomernet - WashtenawWeb
AmmoDump Team Member Posts: 3024 Posted: 6.Oct 2006 - 18:15	Very nice. Hopefully people with the search function can find your post! -- David Pahl Zikula Support Team
chrisg0619 Freshman Posts: 28 Posted: 26.Jan 2007 - 07:39	I'm having some issues with this. I added the new block position tags, but I don't know what to do with the template creation stage. Should I create a "center.htm"? If so, what do I put in it?
Teb Professional Posts: 501 Posted: 26.Jan 2007 - 18:16	Well, if you would like to use already existing content wrapper files for your blocks, you don't have to create a new one. You could just set to use lsblocks.htm or rsblocks.htm (or whatever is present in your theme). If the already present files are not sufficient, then you would have to create a new one. Take lsblocks.htm or rsblocks.htm as an example (copy the content) and save it under a new name (center.htm for exmple). Edit them to suit your needs. -- -- Teb -- Dutch Zikula Community Support questions in a Personal Message will be ignored. Use the forums at all times!
pnDev Helper Posts: 448 Posted: 19.Mar 2007 - 14:03	Thank you very much for the step by step instructions. I'm trying this out and got stuck on the last step. Quote 6c. For a tableless theme, place the tags created in step 2 in a content div at the appropriate spot, inside the content wrappers created in step 4 I'm confused by the exact difference between the block tags and content wrappers. Here is what I attempted but it didn't work. Code < iv id="wrap"> <div id="leftcol"> <!--[$leftblocks]--> </div> <div id="rightcol"> <!--[$rightblocks]--> </div> <div id="content"> <!--[$_CTRLEFT]--> <!--[$_CTRMID]--> <!--[$_CTRRT]--> <!--[$centerblocks]--> <!--[$maincontent]--> < /div> < div class="clearingdiv"></div> < /div> This is from the xBlue theme from http://www.dynawerx.com/ PS. Whats the best way to display code in this forum ? edited by: pnDev, Mar 20, 2007 - 03:01 AM -- pnDev.com ~ featuring the PostNuke paid services forum
tcochran Softmore Posts: 89 Posted: 19.Mar 2007 - 18:22	xBlue is a fine theme -- that's the one I was using, when I wrote the step-by-step instructions. Anyhow, the key here is that the code needs to flow from content wrapper to content div to content (and then close the div and wrapper). For example, here's a segment from my home.htm template on that site: Code <div id="topleft"> <div id="topl_content"> <!--[$TOPLEFT]--> </div> </div> BTW, to display the code in the forum, just use the code and /code tags, inside square brackets. -- Terry Cochran Boomernet - WashtenawWeb
pnDev Helper Posts: 448 Posted: 20.Mar 2007 - 10:53	Terry, thanks again for the help. I've repeated my steps and found out where I went wrong and now have it working as a prototype. I had completely missed this step. Quote 5g. For new blocks created in step 1, assign them to the positons created in step 2 and the template(s) created in step 3 Also in step. Quote 5.d3) Note: Xanthia block control will override the regular PostNuke blocks admin for the module I've selected, so any block I want to show on the home page MUST be selected here I had not selected almost all my blocks so that explained why my some of them had disappeared. I thought I must have messed up the template somehow and re-installed it several times. So I am only left with one major question. Its in the wrappers the options for New master for module: I set it to home but really had no idea. Also your suggestion where the block control could be set by module would be nice to. Thanks again for the help. -- pnDev.com ~ featuring the PostNuke paid services forum
tcochran Softmore Posts: 89 Posted: 20.Mar 2007 - 18:49	Yes, the home.htm template (or something similar) will be the one most likely used for multiple block theming -- although, in theory, you could use the same techniques to style the output of any module. -- Terry Cochran Boomernet - WashtenawWeb
vworld Software Foundation Posts: 968 Posted: 20.Mar 2007 - 22:16	You can always post this to the documentation Wiki so it doesn't get lost and it is easy to find in the future. -- iThinkMedia.com Follow me on Twitter
tcochran Softmore Posts: 89 Posted: 22.Mar 2007 - 01:07	Hi Vanessa, yes, the documentation Wiki would be a good idea, but how do I do that? When I look at the UserDocs section, it looks like this topic would fit well under "Xanthia and Themes", but I see no way to add a new topic there. What am I overlooking? -- Terry Cochran Boomernet - WashtenawWeb
Wendell Professional Posts: 1042 Posted: 12.Apr 2007 - 05:36	tcochran xBlue is a fine theme -- that's the one I was using, when I wrote the step-by-step instructions. I just happened upon this thread and wanted to thank you for the kind comments. :) --
tcochran Softmore Posts: 89 Posted: 12.Apr 2007 - 19:12	You're welcome -- great theme! -- Terry Cochran Boomernet - WashtenawWeb

Topic:

Multiple center blocks in Xanthia home page -- step-by-step

tcochran

Softmore

Posts: 89

Posted:
3.Oct 2006 - 22:17

After struggling with block control in a tableless Xanthia theme for the past few days, I finally got it to work. I wrote the following notes to help me remember how to do it again in the future and post them here in case they might help others, too.

Here is a step-by-step guide to adding a row of 3 blocks in the center of a Xanthia home page in PostNuke 0.762:

1. NEW BLOCKS:
a. Start by adding new blocks in Administration > Blocks
b. In my case I added Center Left, Center Middle, and Center Right blocks, each in the Center position
c. Note: Be sure to add a title for each block, so that it will show up in the Xanthia content wrapper and block control listings

2. BLOCK POSITION TAGS:
a. Go to Administration > Xanthia > MyTheme > Edit theme > Block Position Tags
b. Add new block position tags for each of the new blocks
c. My unique tags (in the center of the HTML comment code structure) are $CTRLEFT, $CTRMID, and $CTRRT

3. TEMPLATES
a. If you need a new template for the new blocks, then skip the Content Wrappers tab for a moment and . . .
b. Go to Administration > Xanthia > MyTheme > Edit theme > Templates
c. Add a new Block template, such as center.htm

4. CONTENT WRAPPER
a. Go to Administration > Xanthia > MyTheme > Edit theme > Content Wrappers
b. Add new content wrappers for each of the new blocks
c. My new wrappers are Center Left, Center Middle, and Center Right
d. For each one:
d1) Select the proper block under "New skin for block" and commit
d2) Select the template you wish to use for it, such as center.htm, and
d3) Activate the wrapper

5. BLOCK CONTROL
a. Go to Administration > Xanthia > MyTheme > Edit theme > Block control
b. This section might make more sense if you could setup block control by template -- but that is not a choice here -- so select the module that applies to you.
c. In my case, the News module controls my home page, so I select News from the Module drop-down list
d. In the Block selection area, highlight "Block Control" AND each of the blocks which you wish to control for the module in question:
d1) For me, that's Center Left, Center Middle, and Center Right for the new blocks, along with
d2) Main Menu, Login, and any other blocks that I want to show up on that page
d3) Note: Xanthia block control will override the regular PostNuke blocks admin for the module I've selected, so any block I want to show on the home page MUST be selected here
e. Click Update and a listing of relevant blocks will appear under the News module line in the module table at the bottom of the page
f. Original blocks will show their current Left or Right postions, with a "Default template" -- leave as is, if appropriate
g. For new blocks created in step 1, assign them to the positons created in step 2 and the template(s) created in step 3

6. HOME.HTM
a. My theme has a home.htm template for the home page, so that must now be edited to add the new blocks.
b. For a traditional theme, place the tags created in step 2 in a table in the center of the home page and then adjust for width and other characteristics, as needed
c. For a tableless theme, place the tags created in step 2 in a content div at the appropriate spot, inside the content wrappers created in step 4

7. CSS STYLING
a. Edit the related CSS files to style each of the new divs, as needed
b. Note: If one or more blocks are to be floated, then place them in home.htm ABOVE the non-floated block(s) in the content div -- otherwise, some browsers may not render properly

8. FLOAT DROP
a. After adding the new blocks in the center of the home page, your old right column blocks may suddenly drop down below the center ones (instead of next to them) in IE 6 -- this is a Microsoft bug leading to what is known as "float drop"
b. In my case, I added "overflow: hidden;" to the styling for #rightColumn and it made IE 6 play nice
c. Other solutions to cure float drop are available at http://nemesis1.f2o.org/aarchive?id=11

9. REWARD
a. You have now spent an unfortunate amount of time slogging through this process, but you are rewarded by a "non-Nukish" home page which you can modify to your heart's content
b. In my case, I also went and drank a beer. Cheers!

--
Terry Cochran

Boomernet - WashtenawWeb

AmmoDump

Team Member

Posts: 3024

Posted:
6.Oct 2006 - 18:15

Very nice. Hopefully people with the search function can find your post! icon_cool

--
David Pahl
Zikula Support Team

chrisg0619
avatar

Freshman

Posts: 28

Posted:
26.Jan 2007 - 07:39

I'm having some issues with this. I added the new block position tags, but I don't know what to do with the template creation stage. Should I create a "center.htm"? If so, what do I put in it?

Teb

Professional

Posts: 501

Posted:
26.Jan 2007 - 18:16

Well, if you would like to use already existing content wrapper files for your blocks, you don't have to create a new one. You could just set to use lsblocks.htm or rsblocks.htm (or whatever is present in your theme).

If the already present files are not sufficient, then you would have to create a new one. Take lsblocks.htm or rsblocks.htm as an example (copy the content) and save it under a new name (center.htm for exmple). Edit them to suit your needs.

--
-- Teb
-- Dutch Zikula Community

Support questions in a Personal Message will be ignored. Use the forums at all times!

pnDev

Helper
Helper

Posts: 448

Posted:
19.Mar 2007 - 14:03

Thank you very much for the step by step instructions. I'm trying this out and got stuck on the last step.

Quote

6c. For a tableless theme, place the tags created in step 2 in a content div at the appropriate spot, inside the content wrappers created in step 4

I'm confused by the exact difference between the block tags and content wrappers.

Here is what I attempted but it didn't work.

Code

< iv id="wrap">
        <div id="leftcol">
            <!--[$leftblocks]-->
        </div>

        <div id="rightcol">
            <!--[$rightblocks]-->
        </div>

        <div id="content">
            <!--[$_CTRLEFT]-->
            <!--[$_CTRMID]--> 
            <!--[$_CTRRT]-->

            <!--[$centerblocks]-->
            <!--[$maincontent]-->
        < /div>

        < div class="clearingdiv"></div>
    <  /div>

This is from the xBlue theme from http://www.dynawerx.com/

PS. Whats the best way to display code in this forum ?

edited by: pnDev, Mar 20, 2007 - 03:01 AM

--
pnDev.com ~ featuring the PostNuke paid services forum

tcochran

Softmore

Posts: 89

Posted:
19.Mar 2007 - 18:22

xBlue is a fine theme -- that's the one I was using, when I wrote the step-by-step instructions.

Anyhow, the key here is that the code needs to flow from content wrapper to content div to content (and then close the div and wrapper). For example, here's a segment from my home.htm template on that site:

Code

<div id="topleft">
  <div id="topl_content">
    <!--[$TOPLEFT]-->
  </div>
</div>

BTW, to display the code in the forum, just use the code and /code tags, inside square brackets.

--
Terry Cochran

Boomernet - WashtenawWeb

pnDev

Helper
Helper

Posts: 448

Posted:
20.Mar 2007 - 10:53

Terry, thanks again for the help. I've repeated my steps and found out where I went wrong and now have it working as a prototype. I had completely missed this step.

Quote

5g. For new blocks created in step 1, assign them to the positons created in step 2 and the template(s) created in step 3

Also in step.

Quote

5.d3) Note: Xanthia block control will override the regular PostNuke blocks admin for the module I've selected, so any block I want to show on the home page MUST be selected here

I had not selected almost all my blocks so that explained why my some of them had disappeared. I thought I must have messed up the template somehow and re-installed it several times.

So I am only left with one major question. Its in the wrappers the options for

New master for module: I set it to home but really had no idea. Also your suggestion where the block control could be set by module would be nice to. Thanks again for the help.

--
pnDev.com ~ featuring the PostNuke paid services forum

tcochran

Softmore

Posts: 89

Posted:
20.Mar 2007 - 18:49

Yes, the home.htm template (or something similar) will be the one most likely used for multiple block theming -- although, in theory, you could use the same techniques to style the output of any module.

--
Terry Cochran

Boomernet - WashtenawWeb

vworld

Software Foundation

Posts: 968

Posted:
20.Mar 2007 - 22:16

You can always post this to the documentation Wiki so it doesn't get lost and it is easy to find in the future.

--

iThinkMedia.com

Follow me on Twitter

tcochran

Softmore

Posts: 89

Posted:
22.Mar 2007 - 01:07

Hi Vanessa, yes, the documentation Wiki would be a good idea, but how do I do that?

When I look at the UserDocs section, it looks like this topic would fit well under "Xanthia and Themes", but I see no way to add a new topic there.

What am I overlooking?

--
Terry Cochran

Boomernet - WashtenawWeb

Wendell

Professional

Posts: 1042

Posted:
12.Apr 2007 - 05:36

tcochran

xBlue is a fine theme -- that's the one I was using, when I wrote the step-by-step instructions.

I just happened upon this thread and wanted to thank you for the kind comments. :)

--

tcochran

Softmore

Posts: 89

Posted:
12.Apr 2007 - 19:12

You're welcome -- great theme!

--
Terry Cochran

Boomernet - WashtenawWeb