Forum Index > FlashYourWeb OS Support > MediaBlock New Topic Post Reply
 Where do I style (CSS) the mediablock?
 |  Printable Version
benno
 November 22 2011 16:10 PM (Read 1979 times)  
Forum Newbie
Newbie

Status: offline

Registered: 11/22/11
Posts: 13

Hi I can display for example 3 thumbs on one row etc.

In my html i have the thumbs centered within a <div>

but if i put showTitle=1

the title displays left aligned and not centered under the thumbs (looks really poor)

------------------------------------------------------
ALSO

if my thumb=40

some thumbs come out with 40 but others display even smaller say 30 or 20

How can i ensure each thumb stays at 40px in height exactly?

-----------------------------
ALSO

If i make 1 column with 10 rows for example

each thumb displays directly under each other with ZERO padding

I prefer the thumbs to spread evenly down the div

on a row this works great but column just stack one after the other

--------------------------------

In general where is the CSS or how do i link CSS to each thumb?

Thanks for any help


 
Profile Email
Quote
suprsidr
 November 22 2011 16:59 PM  
Forum Admin
Admin

Status: offline

Registered: 12/20/06
Posts: 1221

Hi I can display for example 3 thumbs on one row etc.
In my html i have the thumbs centered within a <div>
but if i put showTitle=1
the title displays left aligned and not centered under the thumbs (looks really poor)

1st of all, you can add css via the style tag anywhere in the html to affect elements on the page.
If you include the dropshadow, it adds extra spacing.

But if you want to add classes or inline styles, look to mediaBlock.php line ~500 function getSimpleDisplay

ALSO
if my thumb=40
some thumbs come out with 40 but others display even smaller say 30 or 20
How can i ensure each thumb stays at 40px in height exactly?

Using useMicro to resize the thumbs only makes the largest side of the thumb 40px, and the shorter side maintains aspect.
A better way may to be w/ css:
PHP Formatted Code

.mediaBlock img {
    height: 40px;
    width: auto;
}
 


-s


There will always be...
 
Profile Email Website
Quote
benno
 November 23 2011 17:10 PM  
Forum Newbie
Newbie

Status: offline

Registered: 11/22/11
Posts: 13

hi thanks for reply

in regards to html styling this is how my block looks

---------------------------------------------
<th>
<div style=" margin:auto; text-align:center; vertical-align:bottom">

<?php @readfile('http://www.somesite.com/gallery2/mediaBlock.php?g2_itemId=7&limit=3&column=3&showTitle=1&useThumb=1&shuffle=1&noShadow=1&useMicro=65&noLink=1'Wink; ?>

</div>
</th>
-------------------------------------------------------

the images are aligned center, but the title underneath stays left aligned? cant fix it

i'd really like the thumbs aligned to the bottom of the cell so all look inline but i can find a way to do this either


 
Profile Email
Quote
suprsidr
 November 23 2011 20:29 PM  
Forum Admin
Admin

Status: offline

Registered: 12/20/06
Posts: 1221

PHP Formatted Code

<style>
    .one-image img {
        padding: 0 50px;
        vertical-align:baseline;
    }
    .one-image h4 {
        text-align:center;
    }
</style>
 

example.

I added the padding just to show the separation.

You can style mediaBlock images anyway you like, and differently on each page.
The second set of images are also from mediaBlock.

-s


There will always be...
 
Profile Email Website
Quote
benno
 November 24 2011 05:44 AM  
Forum Newbie
Newbie

Status: offline

Registered: 11/22/11
Posts: 13

mate i checked out your source code thats some might funky mixtures there

we're getting closer and i use some tips from ur code

i can get the image the same height now but their centre alignments are skewed to one side and the titles have a mind of their own too still

A differnce between your code and mine isthat im using the php referennce and yours is just a 'single image'

where im trying to extract 3 images on one row with the one mediablck call

the php call is the only certainty im confident in

im really stuck on how media block can be called in different ways, what are these ways??? here is my new almost working code...

<table border="0" cellpadding="0" class="imagetable" >
<tr>
<td><div class="one-image"><?php @readfile('http://www.dsaggagag.com.au/gallery2/mediaBlock.php?g2_itemId=7&limit=3&column=3&showTitle=1&useThumb=1&shuffle=1&noShadow=1&useMicro=70&noLink=0'Wink; ?></div></td>
</tr>
</table>


.one-image img {
padding: 0px;
vertical-align:baseline;
margin: 0px;
background-color:#0F9;
text-align: justify;
}
.one-image h4 {
padding: 0px;
font-size: 11px;
text-align: justify;
margin: 0px;
}
.mediaBlock img {
height: 70px;
vertical-align:baseline;
padding: 0px;
margin: 0px;
}

.imagetable img{
height: 70px;
width: auto;
vertical-align:baseline;
padding: 0px;
margin: 0px;

}


 
Profile Email
Quote
suprsidr
 November 24 2011 06:53 AM  
Forum Admin
Admin

Status: offline

Registered: 12/20/06
Posts: 1221

The last set in the example

PHP Formatted Code
<style>
.imagetable .one-image h4 {
    padding: 0;
    margin: 0;
    font-size: 11px;
    text-align: center;
}

.imagetable img{
    height: 70px;
    width: auto;
    vertical-align:baseline;
    padding: 0 20px;
    margin: 0 auto;
}
.imagetable td {
    text-align: center;
}
</style>
<div class="imagetable" >
<?php @readfile('http://www.yoursite.com/gallery2/mediaBlock.php?g2_itemId=7&limit=3&column=3&showTitle=1&useThumb=1&shuffle=1&noShadow=1&noLink=0'); ?>
</div>

You don't need useMicro if you are going to visually resize via css.

The second set in the example is using my latest experimental version which makes use of CSS display:table instead of html tables.
If you're interested I'll make it available.

-s


There will always be...
 
Profile Email Website
Quote
Content generated in: 0.22 seconds
New Topic Post Reply



 All times are PST. The time is now 11:29 PM.
Normal Topic Normal Topic
Locked Topic Locked Topic
Sticky Topic Sticky Topic
New Post New Post
Sticky Topic W/ New Post Sticky Topic W/ New Post
Locked Topic W/ New Post Locked Topic W/ New Post
View Anonymous Posts 
Anonymous users can post 
HTML Allowed 
Censored Content