Code addition..

[Rosefriend]

I have a marvellous code for photos which Shrike made for me. Is it possible to put a title bar at the bottom as well please and also center the titles?? I would love to use this when we change over...

<div class="container" style="margin: 0 auto 10px; width: 300px;">
<div class="title-bar">
<h2>"TITLE"</h2>
</div>
<div class="content">
<img alt="January 2013" src="http://i46.tinypic.com/2mecw06.jpg." height="300" width="300" />
</div>
</div>

Many thanks

RF

[Rosefriend]

bump...

[pawl]

Aligning the title is easy enough.

Replace;

<div class="title-bar">

with;

<div class="title-bar" style="text-align: center;">


The bottom title bar however isn't so easy. By default it has rounded corners at the top, and a flat edge at the bottom. Leave it with me though, sure it'll be doable without too much trouble. =]


edit; got it working. Maybe not as pretty behind the scenes as somebody else might have made it, but this will work. =]

Add this to the very bottom of your stylesheet (Admin -> Themes -> Colours & Styles -> Style Sheet tab);

.container > .title-bar-bottom { background-color: @title_bar_background_color; background-image: @title_bar_background_image; background-attachment: @title_bar_background_attachment; background-repeat: @title_bar_background_repeat; background-position: @title_bar_background_position; border: @title_bar_border; .rounded-corners(0 0 5px 5px); min-height: 30px; }

You can change the min-height value to however big you want the bottom title bar to display.


Then, replace the above code with this;

<div class="container" style="margin: 0 auto 10px; width: 300px;">
<div class="title-bar" style="text-align: center;">
<h2>"TITLE"</h2>
</div>
<div style="height: 300px;">
<img alt="January 2013" src="http://i46.tinypic.com/2mecw06.jpg." height="300" width="300" />
</div>
<div class="title-bar-bottom"></div>
</div>

I had to add the height style to the div with the image in it, otherwise it kept coming out at 303px for some reason, which left a gap between the image and the title bar. If you use an image any taller than 300px, you'll need to adjust it in the div code.
That aside, it should work fine for you. =]

[Rosefriend]

pawl - that is fantastic - it looks really professional and smart....many thanks!!

One question - I think the size is probably right but some pics are horizontal rather than vertical...when this happens I change:

<div class="container" style="margin: 0 auto 10px; width: 300px;">

and this

<img alt="January 2013" src="http://i46.tinypic.com/2mecw06.jpg." height="300" width="300" />

and I take it that the total has to be the div amount?? What happens if I have a pic that is 320x240 for example??

RF

[pawl]

I know it's not perfect, but yeah - the height and width want to be set to the same proportions as the image. Not sure why the height messes up if you don't, but it really didn't like me before, haha.

You do know you could link the image too though, right?

[Rosefriend]

I am thrilled the way it has worked out pawl - if there are size problems I'll crop the pic instead - hahaha!!!! OK you have made a rod for your own back now - "You do know you could link the image too though, right?"...erm no...can you explain that to me please??

RF

[pawl]

Fair enough, although changing the dimensions of the div would probably be quicker in most cases. =P

Yeah, so that you can link to the member/thread/wherever it came from.
<a href="URL TO LINK TO" target="_blank"><img alt="January 2013" src="http://i46.tinypic.com/2mecw06.jpg." height="300" width="300" border="0" /></a>

That would open whichever url you linked to in a new window. =]

[Rosefriend]

As far as the dimensions are concerned I shall have to play around and see what is better...I am sure (hope) that I can get that sorted!

Thanks for the showing me how to do the link...I feel as though I have learnt something anyway and that can't be wrong...

RF

[pawl]

Let me know if you have any trouble when you're changing stuff. =]

[Rosefriend]

Will do paul and many thanks...

RF

[Rosefriend]

Hi pawl - can you help me please...

I tried to write in the bottom title bar by taking the words title-bar-bottom out and typing a name in....erm.. the bar disappeared totally....I got it back but don't know what to do now. Is it possible to be able to write in that bar ??

<div class="title-bar-bottom"></div>

Thanks
Rf

[pawl]

For that Rose, you want to <div class="title-bar-bottom">Write in this part of the code</div> =]

[Rosefriend]

Thanks pawl - that worked well - apart from the fact that the writing is now in black and it is not centered...??

[pawl]

Oops, missed that myself. Sorry, not thinking ahead.

Find this in your style sheet, about line 432, and add in the bold;

.container > .title-bar h1, .container > .title-bar h2, .container > .title-bar h3, .container > .title-bar-bottom h2 { color: @title_text_color; font: @title_text_font; text-decoration: @title_text_decoration; font-variant: @title_text_variant; text-transform: @title_text_transform; text-align: @title_text_align; text-shadow: @title_text_shadow; }

Make sure you don't miss the comma in bold, too!
Then, when you're adding your text, put it in <h2> tags, like in the other title bar. =]

[Rosefriend]

Jan 9, 2013 18:39:51 GMT -8 pawl said:

Oops, missed that myself. Sorry, not thinking ahead.

Find this in your style sheet, about line 432, and add in the bold;

.container > .title-bar h1, .container > .title-bar h2, .container > .title-bar h3, .container > .title-bar-bottom h2 { color: @title_text_color; font: @title_text_font; text-decoration: @title_text_decoration; font-variant: @title_text_variant; text-transform: @title_text_transform; text-align: @title_text_align; text-shadow: @title_text_shadow; }

Make sure you don't miss the comma in bold, too!
Then, when you're adding your text, put it in <h2> tags, like in the other title bar. =]

Hi pawl - I am in a mess but I am sure it is me that is messing things up...

Line 429 for me - I added the bit in bold as you said.....

.container > .title-bar h1, .container > .title-bar h2, .container > .title-bar h3, .container > .title-bar-bottom h2 { color: @title_text_color; font: @title_text_font; text-decoration: @title_text_decoration; font-variant: @title_text_variant; text-transform: @title_text_transform; text-align: @title_text_align; text-shadow: @title_text_shadow; line-height: 30px !important; display: inline; }

and I put the h2 thingy's in but I don't know if it is right??

<div class="container" style="margin: 0 auto 10px; width: 300px;">
<div class="title-bar" style="text-align: center;">
<h2>"Rose"</h2>
</div>
<div style="height: 300px;">
<img alt="January 2013" src="http://i46.tinypic.com/2mecw06.jpg." height="300" width="300" />
</div>
<div class="title-bar-bottom"><h2>Rosefriend</h2></div>
</div>

This is what I get...



So...what have I messed up...??

RF