How to change font inside the latest products preview home?

I would like to isolate and change the font size and style in the latest products preview in the homepage but cannot isolate the element on CSS?

I do not want to change the body font as it changes everything i just want to isolate the element and change only what is in that table, I already tried adding a font style to the list element but no joy it only changes the price - i want to change the title of the product to a different font style.....

Any ideas?? thank a lot....

In template/module/latest_home.tpl Inside the list table , add te style directly to the link and/or price and manufacturer.

Thanks a million i am on an exponential learning curve for css... Can i just ask what the logic is behind styling outside the default css file aswell is?

Would it not be simpler to have all styling properties in one file?

Thanks again

Well , in my opinion is very good as it is.
The stylesheet.css is not very stuffed as it is , and allows to easyly edit global styles and not only, and if you want to digg deeper, you go in the tpl's , and if you want , you can create your own classes and add them in css.
The developers are very smart people. Cheers to them.

OK I'm sure it's my lack of understanding that makes it appear overcomplicated...! What would you define as a global style? If the product title - the underlined link is not a global style...?

OK i'm in the file - I tried adding some styling in a couple of places but it only changes the price... Where can I isolate the link?


This is what I see...


<?php if ($products) { ?>
<div class="top">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1><?php echo $heading_title; ?></h1>
</div>
</div>

<div class="middle">
<table class="list">
<?php for ($i = 0; $i < sizeof($products); $i = $i + 4) { ?>
<tr>
<?php for ($j = $i; $j < ($i + 4); $j++) { ?>
<td style="width: 25%;"><?php if (isset($products[$j])) { ?>
<a href="<?php echo str_replace('&', '&', $products[$j]['href']); ?>"><img src="<?php echo $products[$j]['thumb']; ?>" title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" /></a><br />
<a href="<?php echo str_replace('&', '&', $products[$j]['href']); ?>"><?php echo $products[$j]['name']; ?></a><br />
<span style="color: #999; font-size: 11px;"><?php echo $products[$j]['model']; ?></span><br />
<?php if ($display_price) { ?>
<?php if (!$products[$j]['special']) { ?>
<span style="color: #900; font-weight: bold;"><?php echo $products[$j]['price']; ?></span>
<?php } else { ?>
<span style="color: #900; font-weight: bold; text-decoration: line-through;"><?php echo $products[$j]['price']; ?></span> <span style="color: #F00;"><?php echo $products[$j]['special']; ?></span>
<?php } ?>
<?php } ?>
<a class="button_add_small" href="<?php echo $products[$j]['add']; ?>" title="<?php echo $button_add_to_cart; ?>" >&nbsp;</a>
<br />
<?php if ($products[$j]['rating']) { ?>
<img src="catalog/view/theme/default/image/stars_<?php echo $products[$j]['rating'] . '.png'; ?>" alt="<?php echo $products[$j]['stars']; ?>" />
<?php } ?>
<?php } ?></td>
<?php } ?>
</tr>
<?php } ?>
</table>
</div>

<div class="bottom">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
<?php } ?>

Specifically this line:

<td style="width: 25%;"><?php if (isset($products[$j])) { ?>
<a href="<?php echo str_replace('&', '&', $products[$j]['href']); ?>"><img src="<?php echo $products[$j]['thumb']; ?>" title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" /></a><br />
<a href="<?php echo str_replace('&', '&', $products[$j]['href']); ?>"><?php echo $products[$j]['name']; ?></a><br />

Try adding some styling and view the results.

Phil.

philipjterry wrote:OK I'm sure it's my lack of understanding that makes it appear overcomplicated...! What would you define as a global style? If the product title - the underlined link is not a global style...?

Global styles are like these:

a{}
body{}
*{}
table{}
h1,h2,h3{}

These could be considered global styles and yes unless you tag another class name to them they will dominate.

For example if I had an h2 tag that I wanted LARGER than all of the rest I would first make sure that the <h2></h2> is wrapped in a div like this <div class="newsize"><h2>My Text</h2></div>

Then in the CSS I could style it like this:
.newsize h2 {font-size:30px;}

There are four lines of code corresponding to one target I am interested in...? The name of product which is currently a blue link I would like to style... I see one line related to image and I assume that the 4th line below specifically is the one I need to add styling to? -

<a href="<?php echo str_replace('&', '&', $products[$j]['href']); ?>"><?php echo $products[$j]['name']; ?></a><br />

I tried this, which seems to change it to bold successfully but makes no difference to the colour?: -

<span style="color: #0033ab; font-weight: bold;"><a href="<?php echo str_replace('&', '&', $products[$j]['href']); ?>"><?php echo $products[$j]['name']; ?></a><br />

I also tried experimenting with the font size (not reflected above) but instead of changing the title of product it enlarged the price??!! Even though the bold in that tag only boldens the title?

I find it incredibly difficult to apply logic to the situation! Surely if you add a styling to one line it should not affect some other random line - ie the price??!

Original line Try this Phil.

phpuk wrote:Original line

Code: Select all

<a href="<?php echo str_replace('&', '&', $products[$j]['href']); ?>"><?php echo $products[$j]['name']; ?></a><br />

Try this

Code: Select all

<a href="<?php echo str_replace('&', '&', $products[$j]['href']); ?>" style="color:#ff0000;"><?php echo $products[$j]['name']; ?></a><br />

Phil.

Actauly that's not quite correct. It would look more like this: <<Doges rocks thrown by phil>

Picky

phpuk wrote:Picky

Well...you know.

Thanks guys... I am a right brainer unfortunately not well adapted for coding... How should I be thinking when assembling code? I can't see logical order in it yet.

For example why embed styling in the middle of this line instead of the start or end like I did? What was wrong with the way I did it? Nevertheless I will of course use your method.

OK I am making a few triumphant baby steps - the code you presented above works well....

How can i add some padding or seperation between the product title, price, model and image? I tried padding in their but output was nadder.....

philipjterry wrote:OK I am making a few triumphant baby steps - the code you presented above works well....

How can i add some padding or seperation between the product title, price, model and image? I tried padding in their but output was nadder.....

If it's vertical spacing that you want then just add another line break after each element like this <br />
That will give you more vertical spacing.

thanks a lot - tried it - just a bit too dramatic though (now I am being picky

Any way I can calibrate one third of that spacing?

Then you turn to css.
Create a div between each element and style it with a height to your choosing. So it will look like this
Simple change the height to whatever you want.

Fantastic! It's starting to look really sharp now.... How about some mouseover colour on the product link (amazon style!) ?

Thanks a lot

add in your css , somewhere around .list class