Moving sidebar to bottom of the screen & custom backgrounds

Gallery version = 2.1.2 core 1.1.0.2
PHP version = 4.4.4 cgi
Webserver = Apache/1.3.37 (Unix) mod_fastcgi/2.4.2 mod_auth_passthrough/1.8 mod_log_bytes/1.2 mod_bwlimited/1.4 FrontPage/5.0.2.2635.SR1.2 mod_ssl/2.8.28 OpenSSL/0.9.7a PHP-CGI/0.1b
Database = mysql 4.1.21-standard-log, lock.system=flock
Toolkits = ArchiveUpload, Exif, Getid3, ImageMagick, NetPBM, SquareThumb, Thumbnail, Gd
Acceleration = none, none
Operating system = Linux host52.hostmonster.com 2.6.19-1_3.BHsmp #1 SMP Mon Jan 15 07:50:58 MST 2007 x86_64
Default theme = PGtheme
Locale = en_GB
Browser = Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.0.9) Gecko/20061206 Firefox/1.5.0.9
------------------------------------------------------------------------------

I have been searching on the site to find out how to do a few things with the sidebar, but to no real avail. Basically instead of the sidebar being static at the side, i want to move the whole sidebar so that it sits at the bottom of the screen (with a centre alignment with the screen). I also then want to be able to put that into its own a box (different colour to the background) and insert a jump to box and the search blocks in there too. I have attached an example to show you what i mean.

If anyone could assist i would be truely grateful as the idea is growing on me but don't know how to put it into practice.

how would i then make them horizontal and the search box & jump to box also, instead of vertical, in its own bordered box with a different colour?

Some things you will be able to float depending on how many blocks you have. For example you could add

div.block-albumselect-AlbumTree {
float: right;
}

to you css and the album select tree will be to the right.
How many items do you want on the bottom?

_____________________________________________
Blog & G2 || floridave - Gallery Team || G2 Theme Contest!

You need to ADD

div.block-imageblock-ImageBlock {
float: left;
padding-top: 50px;
}
div.block-albumselect-AlbumTree {
position: absolute;
padding-top: 75px;
}
div.block-search-SearchBlock {
padding-top:50px;
float: left;
}

to your css.
Then you will be able to add the blocks you want and they will line up horizontal.
You will need to add the image block separate not like in G2.2 where you can select the number of images.
Search block first, then album select, then 2 or 3 image blocks.
Change the order of items as well to see how they shift and wrap.

Use the FF browser and the web dev tool to fine tune, adding width and padding as required.

Dave

_____________________________________________
Blog & G2 || floridave - Gallery Team || G2 Theme Contest!

I just set it up on my test site:
http://langleycom.com/gallery2/main.php?g2_itemId=153
I removed all items from the sidebar like I said.
It needs polishing but it does work.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team || G2 Theme Contest!

How on earth you managed that i do not know. I have been up all night trying to figure out how you did that.
I tried removing all items from the sidebar, entered what you wrote above in the order you said and all that happened is that my text somehow changed font and size. I then played around with their relative positionings - still couldn't get it. Tried at different parts of the theme.css - still nothing. Then i tried adding 2 image blocks from the admin section and the images came up - ontop of each other as before.

Is there anywhere in particular that you put into the theme.css the text:

div.block-search-SearchBlock {
padding-top:50px;
float: left;
}

div.block-albumselect-AlbumTree {
position: absolute;
padding-top: 75px;
}

iv.block-imageblock-ImageBlock {
float: left;
padding-top: 50px;
}

Like Valiant said - if you do have a "how-to" it would be fantastic.

I just wish I had your god-like fingers to work the magic.

Just noticed that the horizontal images are below the search and jump box. How did you get them alongside those features?

I just spent the weekend trying to figure out how to place the sidebar at the bottom but to no avail. I read through your CSS and cannot see what you have entered to place the sidebar at the bottom when static. I can do it when the sidebar is floating but it messes up alot. I also looked at my author.tpl stuff and the sidebar.tpl to see if there was anyway of adding it to those but cannot see how you have done it.

I am sorry to be a pain as this should be simple. Can you see what i am doing wrong?

http://www.pauldancerphotography.com/main.php

I already have FF & got the webdev tool but I am sure i am missing something simply. At the moment the sidebar is set as floating as when static it messes up the screen.

Thank you in advance for any assistance on this.

I know that this must be getting pretty frustrating for you, but i have don as said and played around with webdev but i can get the image blocks aligned vertically, but i cannot get them aligned horizontally.

I removed all the Blocks to show in the sidebar and added the Blocks to show on album pages. I then added
div.block-imageblock-ImageBlock {
float: left;
padding-top: 0px;
padding-left:10px;
}
div.block-albumselect-AlbumTree {
position: relative;
float: left;
padding-top: 50px;
padding-right:20px;
}
div.block-search-SearchBlock {
padding-right:50px;
padding-bottom:20px;
position: absolute;
}

And since have been playing with the paddings etc, positionings etc yet the images are still vertical. I thought maybe the position of where in the theme.css the code goes would make a difference but no. I went back into admin and just added a few image blocks to my sidebar to see what would happen and they came out horizontal with the albums one's beow which were vertical. I don't know what to do????? All i do know is that it is something i REALLY want to do but can't for the life of my figure out 'what' 'why' 'when' & 'how'.

Could it be that it is because i am using the PGTheme? You tested it out on the matrix theme.

If poss, would you be able to have a look at my theme.css via http://www.pauldancerphotography.com/main.php and see if you can see anything wrong?

Paul

You have a JS error as well.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team || G2 Theme Contest!

I noticed that you had a gallery.css on your site which i do not seem to have. What is that and could that be a reason?

I also tried changing to matrix - nothing changed and i also tried copying and pasting your theme.css into mine to see if that would work but alas it did not.

I have removed the extra z - probably from when i had to 'ctrl' 'z'.
Where is this JS Error you mentioned?

I just find it strange that something so simple to do in DW could be so difficult to do. I am probably missing something really simple.

Will keep trying. Any further ideas you have would be great.

If you scroll down to the bottom of the screen, you'll find it there.

I had earlier been playing with trying to get the sidebar static at the bottom of the page.
Whilst i'm trying to figure all of the above out I decided to put it down there while i'm away from my pc in case anyone is looking at it (but it is moved whilst i am working on it).

At a funeral today but i will create a test album for you and send you a login when i get back.

Cheers Dave

Create an album. and create a user and make that user the owner of the album, or give that user full permissions to administrate that album.
Send me the URL to the album with the username and password you created.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

Works in Matrix. Does not in PG.
Do you have a link to a G2.2 version of the PG theme, so I can install it on my test install and see if I can get it to work.

_____________________________________________
Blog & G2 || floridave - Gallery Team

Oh Dave,
The G2.1 PGtheme does work with G2.2
You can download it from the User Conytibuted themes
http://codex.gallery2.org/Gallery2:User_Contributions#Themes

Gaynor

PG theme puts all the blocks in a table and each block in a cell. Then loops through the blocks.
I am not going to recode this theme just for this but if you want or other would like to here is where to start:
in album.tpl find

{if $theme.params.albumBlocks}

{* Show any other album blocks (comments, exif etc) *}
<br/>
<table border="0" width="98%"><tr><td>

          <table width="400" align="{if $theme.params.BlocksAlign}{$theme.params.BlocksAlign}{else}center{/if}">
            <tr><td></td></tr>

              {foreach from=$theme.params.albumBlocks item=block}
            <tr>
              <td>
                <table align="{if $theme.params.BlocksInAlign}{$theme.params.BlocksInAlign}{else}center{/if}">
                  <tr>
                    <td>
{assign var=item value=$theme.item} 



       {if empty($theme.parents)}

                    {if ($block.0 != "rating.Rating") || ($theme.params.showGalleryRating == 'none')}
                      {if ($block.0 != "comment.ViewComments") || empty($theme.params.AuthorComments)}
                        {if ($block.0 != "cart.ShowCart") || empty($theme.params.AuthorCart)}
                          {if ($block.0 != "checkout.ShowCart") || empty($theme.params.AuthorCart)}
                            {g->block type=$block.0 params=$block.1}
                          {/if}
                        {/if}
                      {/if}
                    {/if}
{else}


                    {if ($block.0 != "rating.Rating") || ($theme.params.showAlbumRating == 'none')}
                      {if ($block.0 != "comment.ViewComments") || empty($theme.params.AlbumComments)}
                        {if ($block.0 != "cart.ShowCart") || empty($theme.params.AlbumCart)}
                          {if ($block.0 != "checkout.ShowCart") || empty($theme.params.ALbumCart)}
                            {g->block type=$block.0 params=$block.1}
                          {/if}
                        {/if}
                      {/if}
                    {/if}
{/if}

                    </td>
                  </tr>
                </table>
              </td>
            </tr>
              {/foreach}

          </table>
</td></tr></table>
{/if}

and remove all the table stuff.
in matrix it is done like

        {foreach from=$theme.params.albumBlocks item=block}
          {g->block type=$block.0 params=$block.1}
        {/foreach}

The theme is nice but some of the options never get used and adds code blote.
People ask for more options but then they wonder why it takes time for the browser to render the page.
Tables are used to display tabular data not position items.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

Will also try and find out from Pedro himself if he has any luck with this sort of thing. Will keep you posted.

Whoops messed that up a bit.

I have succeeded in one thing which might be on the right track. I added & edditted the bit at the bottom to show in the album tpl

{g->block type="core.GuestPreview" class="gbBlockBottom"}

{* Our emergency edit link, if the user all blocks containing edit links *}
{g->block type="core.EmergencyEditItemLink" class="gbBlockBottom"
checkSidebarBlocks=true
checkAlbumBlocks=true}

WITH

{g->block type="core.GuestPreview" class="gbBlock"}

{* Our emergency edit link, if the user all blocks containing edit links *}
{g->block type="core.EmergencyEditItemLink" class="gbBlock"
checkSidebarBlocks=true
checkAlbumBlocks=true}

{* Show any other album blocks (comments, etc) *}
{foreach from=$theme.params.albumBlocks item=block}
{g->block type=$block.0 params=$block.1}
{/foreach}

And i now get an image on the right but I also get an image on the left.
If you look at my gallery you will see what i mean.

Is this a start?

Ended up having to remove it in PGTheme as although i have been playing with code etc, i haven't been able to get the same effect as with matrix, yet i have been editting PG for a while so decided that until i can figure it out completely (including implementing a border into it as well), i will be leaving it off.

When i figure it out i will post to let everyone know.