Board index PBase HTML and Style Sheets Adjust placement of thumbnail images?

HTML and Style Sheets

Adjust placement of thumbnail images?

Customize your galleries.
bluebirdnut
 
Posts: 8

Adjust placement of thumbnail images?

Post Wed Jul 29, 2009 1:24 pm


I created a style sheet to have a repeating image across the top of the page - http://www.pbase.com/bluebirdnut/galleries

However, the thumbnail images are too high - they're bumping up into the background image. How can I move them further down?

Also, I copied the location of the image from my message board css, and it works from there, but when I uploaded the same image to one of my albums, and tried to use that url in the css, it disappeared, and in its place I'm getting a "Direct Linking Denied" message. I know that hotlinking is disabled on trial accounts, but a couple of weeks ago, I set up a trial account for a client, and followed the instructions in http://form.pbase.com/viewtopic.php?f=8&t=41560 for adding an image from one of the galleries as a banner on the top of gallery pages, and it worked fine. Why not this time? What am I doing differently?

dang
 
Posts: 3780

Re: Adjust placement of thumbnail images?

Post Wed Jul 29, 2009 2:20 pm


I just took a quick look and it's saying direct linking denied. So, you'll need to turn it on.
Go to your profile page, and click "edit settings. Once the page opens, click the "Options" tab, and add a check in the box saying images can be linked to forums (or some such). This will allow it to display.

bluebirdnut
 
Posts: 8

Re: Adjust placement of thumbnail images?

Post Wed Jul 29, 2009 4:26 pm


Well, this is still a trial account, so direct linking isn't even available. But what puzzles me is that when I made the style sheet for the other trial account, the one I was playing with in the other thread, it worked......

Wait - the url on that image is: http://i.pbase.com/o6/82/919882/1/11399 ... _pbase.jpg

What's i.pbase? Is it working because that's not the image from my gallery?

bluebirdnut
 
Posts: 8

Re: Adjust placement of thumbnail images?

Post Thu Jul 30, 2009 12:34 am


Ok, well I've got the banner across the top the way I want it - and on the album pages, the thumbnails are down far enough so it clears the banner. But on the Gallery listing page, the Gallery thumbs are still too high. Where do I change that?

http://www.pbase.com/bluebirdnut

dang
 
Posts: 3780

Re: Adjust placement of thumbnail images?

Post Thu Jul 30, 2009 1:40 am


Okay, think I see whats going on. The style sheet needs to be different for your "Root" or main gallery, than inner galleries since Pbase handles the coding differently. The easiest way would be to add a banner into the gallery description area. Use a clear gif, or clear gif with lettering which is high enough to achieve the look you want.

For an example, try placing this code in the gallery html section, then click the box underneath which says "check here if using html", then click update and look.

Code: Select all
<p>
<center>
<img src="http://www.pbase.com/dang/image/115530463/original.jpg">
</center></p>


Since free accounts aren't allowing direct linking using the browser bar url, then you'll need to use the "property url" as before if you make your own. The "Property url" is the photo & server name which the image is hosted on. The problem with using it is that images are moved to different servers at times, and the url becomes obsolete resulting in a "red x".
:wink:

bluebirdnut
 
Posts: 8

Re: Adjust placement of thumbnail images?

Post Thu Jul 30, 2009 1:23 pm


Thanks Dang. I think I see what you're saying. What I would like is to have my cloud image that's on the other galleries, with maybe some text or an image below or over the top of it. The cloud header is a 467 x 244 image that repeats across the top of the page, but it expands and contracts with the size of the browser window. Have a look at how it's working on my Yuku forum pages at http://bluebirdnutcafe.yuku.com/. The 'skin' folks at Yuku helped me with the css for that one, I just need to tweak it so it will work here. If I need it tweaked differently for the root gallery than for the individual gallery pages, that's ok. Or if I can achieve the same effect with html instead of css, that's fine too. But I really like the effect of the bird and text floating over the top of the expandable/contractable cloud header. Actually, the style sheet I'm using on the other gallery pages has the code for that bird-with-text image floating, but that doesn't seem to be working here, either - not sure why.

dang
 
Posts: 3780

Re: Adjust placement of thumbnail images?

Post Thu Jul 30, 2009 4:29 pm


It's the same html code. Change the url to the gif you want to use:
Code: Select all
<p>
<center>>
<img src="http://images.yuku.com/image/png/baa1535d7e184faf3747b4af57397f292f13a6e.png">
</center></p>


If you prefer it to be off center, change it to the appropriate side:
Code: Select all
<p align="right">
don't forget to remove the ending "center" tag.

The cloud image is in the CSS, and is not affected by the spacing of the bluebird gif.

bluebirdnut
 
Posts: 8

Re: Adjust placement of thumbnail images?

Post Fri Jul 31, 2009 11:43 am


Still playing with this - I've gotten the floating bird-with-text to show by using the html in the description box. On the root gallery page, it's floating up in the clouds where it belongs, and the thumbnails are centered below, as I want it to appear.
[url]
http://www.pbase.com/bluebirdnut/root[/url]

2) But on the individual gallery pages, the bird-with-text is is shifted way down, below the cloud banner from the css. How do I get things shifted UP on the gallery pages without messing up the root gallery page?

mardoli
 
Posts: 585

Re: Adjust placement of thumbnail images?

Post Fri Jul 31, 2009 12:08 pm


I have an idea, but I’m not sure it can work the way you would like.
Since you added the floating bird in you gallery description case, it’s placed on the page below the title of the gallery, which occupies an upper place.
So my idea would be that you add in your CSS in the section h2 which commands the title of the gallery this line of code
Display: none;
So your style sheet for that part would be like that
Code: Select all
  h1, h2 {
            border:  #ffffff 0px ridge;
            border-left: 1px none;
            border-right: 1px none;
            border-top: -7px none;
            margin-bottom: 1em;
            margin-left: -10px;
            margin-right: 0px;
            padding: 10px;
            width: 100%;
            display: block;
            background:  #;
            color:  #5A5A6F;
            font-size: 18px;
            font-weight: normal;
            letter-spacing: 0px;
            text-align: center;
            height: 21px;
            position: relative;
            display:none;
    }

Then you copy all this code and past it calling it h4 instead of h2
Code: Select all
h4 {
            border:  #ffffff 0px ridge;
            border-left: 1px none;
            border-right: 1px none;
            border-top: -7px none;
            margin-bottom: 1em;
            margin-left: -10px;
            margin-right: 0px;
            padding: 10px;
            width: 100%;
            display: block;
            background:  #;
            color:  #5A5A6F;
            font-size: 18px;
            font-weight: normal;
            letter-spacing: 0px;
            text-align: center;
            height: 21px;
            position: relative;
            display:none;
    }

And then in your description of the gallery case you write
Code: Select all
<h4> Other Backyard birds </h4>

I think in this case it should work the way you like.
I hope so at least.
Best regards
Marisa
ImageImage
"Arguments are to be avoided; they are always vulgar and often convincing."
~Oscar Wilde~

bluebirdnut
 
Posts: 8

Re: Adjust placement of thumbnail images?

Post Fri Jul 31, 2009 2:13 pm


Thank you Marisa, that worked! I had discovered that it was the "title" that was bumping the bird-with-text down, and had removed it, but couldn't figure out how to get it down to just above the thumbnails.

It worked, but only after I deleted the display:none; from the 2nd bit of code, the one for h4

mardoli
 
Posts: 585

Re: Adjust placement of thumbnail images?

Post Fri Jul 31, 2009 2:36 pm


Ah, yes, you are right...it was my mistake...I copied and pasted all forgetting to delete that line.
Luckily you have realized it by yourself!
I'm happy it works
Best
Marisa
ImageImage
"Arguments are to be avoided; they are always vulgar and often convincing."
~Oscar Wilde~


Board index PBase HTML and Style Sheets Adjust placement of thumbnail images?

Who is online

Users browsing this forum: No registered users and 1 guest