As you can see in this image above the 3 separate Crosscol areas.
1. To do this tweak you will need to move or remove any and all gadget from the original crosscol area in the Page Elements.
2. Now go to your Edit HTML page and make sure to back up your template.
3. Click Ctrl+F and a text/find bar will open up.
4. In the text/find bar input the word crosscol
5. You should now see something like this below.
(If you see something else then you either did not remove all the gadgets from this area or you have a older/3rd party template )
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
6. Replace the red coding with the code I have below.<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
(If your template does not have the red code, then just paste this code under it.)
<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
It should look like this below when your finished.<b:section id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
7. Now scroll up the page until you find this code.<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
]]></b:skin>
8. Depending on the template you are using you will have to use one of the following codes.(Older Templates)
#crosscol-left {width:40%;display:inline-block;_float:left;}
#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}
body#layout #crosscol-left {width: 50%; float: left;}
body#layout #crosscol-right {width: 50%; float: right;}
(Newer Templates)#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}
body#layout #crosscol-left {width: 50%; float: left;}
body#layout #crosscol-right {width: 50%; float: right;}
#crosscol-left {width:40%;display:inline-block;_float:left;}
#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}
If your using a newer template you will need to add the second part of this code in a different section. Scroll down and fine this code below#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}
]]</b:template-skin>
Just above that place this code below.
#layout #crosscol-left {width: 50%; float: left;}
#layout #crosscol-right {width: 50%; float: right;}
#layout #crosscol-right {width: 50%; float: right;}
6 comments:
I did it as per instructed and I got this :
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:section" must be terminated by the matching end-tag "".
So I add a / at the end of 'yes' on the 1st & 2nd line and it works fine.
I really do appreciate your help! Thanks very much.
I did it but i just got three longs crosscol
If you send me a email with your template attached I will do it for you.
Hey Guy - nice blog! It has helped me a lot. I decided I would like to put a Google Adsense for Search box next to my Page Gadget (3 pages only) across the top. This is perfect for that - I'm assuming that since I won't be using the single long "Ad A Gadget" bar that it won't show. I just want to use the 2 split ones below it. Anyway, I did what you said above and when I tried to save it I got-->Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag. I looked all over for an unclosed div and didn't find one although I am not a programmer so I probably overlooked something. Anyway, my template got so messed up that I had to reload it. This error message happened right after the first step. Do you know where the missing [/div] goes? Thanks for everything, Catherine
Hi Catherine,
Did you make sure to move the Page gadget out of the crosscol area before trying the tweak? Also this is a bit complicated to explain without knowing what went wrong so in most cases I ask that the users email me through the contacts at the top if they are unable to get it to work.
I successfully used this tweak hurry..
I had problem understanding where to put what ..After
]]
I used
#crosscol-left {width:40%;display:inline-block;_float:left;}
#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}
#layout #crosscol-left {width: 50%; float: left;}
#layout #crosscol-right {width: 50%; float: right;}
for simple template and it worked..
Thanks
Post a Comment
Please don't post hyperlinked text within the comment box! It will not be published and you will be marked as spam.