thumbnails : number, text font and alignment

[sushi02]

Hello all !

Again, thank you for this wonderful Suffusion.

I would like to do three things :

1) Is there any possibility to display more thumbnails on the main page ?
I currently display 10 thumbnails, but I feel I would like to display much more, and the box which contains these thumbnails is too short and should be longer (basically with more thumbnails )

2) I would like to change de font sometimes on the titles of the thumbnails on my main page, is it possible ?
I am a little bit lost in the option as english is not my main language... But anyway I kept searching and I didn't find it... Sometimes I would like to change de color, on but on Bold some titles...

3) The position of the thumbnails change according of the title (and I dont wan't )
For exemple, If my titles is only two lines, the thumbnails gonna be display little bit dowwner than the others which are three lines for exemple...
So the alignement of the thumbnails gonna be ugly. Currently I try to put every titles on 3 lines to make all of thumbnails be on the same position.
But is there any option that the thumbnails gonna be on the same position whatever the length of the title under ?


Thank you in advance for all your time and help !

By the way , the website is : http://www.sajou.eu

[drake]

1. On Dashboard -> Settings -> Reading, change 10 to whatever you wish for "Blog pages show at most:...."

2.For ALL titles on the homepage you can try to add next code at Suffusion Options -> Backend -> Custom Includes -> Custom Styles:

Code: Select all

a.suf-mosaic-post-title {
font-size:1.5em;
font-weight:bold;
color:red;
}


(I can't see any way to set separate properties for different tiles)

3. For aligning tiles to top of images try to add next code at Custom Styles:

Code: Select all

.suf-mosaic-thumb-container.suf-gallery-5c {
width:120px;
float:left;
display:table-cell;
vertical-alignment:top;
}

[Colin]

For #3
try adding the following to Suffusion Options > Back-end > Custom Includes > Custom Styles

Code: Select all

.suf-mosaic-thumb-container {height:173px;)


The font you can change in Typography.

[sushi02]

Thank you guys for your help.

Well about the number of thumbnails, thank you (ive never been on setting, I always go on suffusion option hehe).

About the text, that's fine, at least I can change for all, thank you.

Just about my 3rd question :

Colin, your code gave me the same issue (exactly).
Drake, your code give me what you can see now, I will leave it some minutes to make you see. The tiles are correctly aligned on top, but if the titles is shorter or longer, it mess up some other tiles position...

thank you again guys !

[drake]

Ok, replace vertical-alignment with vertical-align... The first sentence isn't valid

Then add also "min-height:194px;" so your new code will be:

Code: Select all

.suf-mosaic-thumb-container.suf-gallery-5c {
width:120px;
float:left;
display:table-cell;
vertical-align:top;
min-height:194px
}

[sushi02]

sob sob...

It result the same mess up as your previous code (with alignement)

[Colin]

Your ideal solution is to make sure that all your thumbnails are the same size.

You could take each of your thumbnails into an image editing programme and put them on a plain background of 100px by 100px. That way all your images will be the same size and the layout would look better.

As you increased the text size my height of 173px was not enough. If you change it to 200px this is what you would see now. My advice is not to use a min-height but to use a height statement that way all your tiles will be the same size.

2-800.jpg (90.58 KiB) Viewed 640 times

[sushi02]

Hum this is very interesting Colin.

You just gave me a clue, because as I can see your photo, you see it properly.

So the problem now would be from the browser. Im using IE 8 and I see it mixed up (5-1-5-4).

But when I open Google Chrome, I see it corretly same as you...

So basically , Drake your code is correct, now the problem come from the compatibility with the browser...

[sayontan]

Increase your min-height to something like 200px.

[Colin]

Read up on the CSS box model and IE it may give you some clues.

Something worth trying is to put a margin-top of 1 or 2 pixels on .suf-mosaic-thumb-container that may be enough to get IE working and still make it look OK in other browsers.