Jump to content

2 styling questions


Guest Meow Meow

Recommended Posts

Guest Meow Meow

I'd really appreciate if s.o. can guide me to the right direction. I am trying to size up the images in the Featured Product and Latest Product boxes but I am afraid to mess something up (because I have too many times in the past!) - if s.o. can let me know where are the files that control these boxes it would be so fantastic.

The other question - where is the file that controls the font for the entire site? I'd like to replace the font for my entire site.

Please take a look at my site and let me know. Thanks-a-bunch! Happy Holidays, Everyone!!! */*

http://www.rosary-art.net

Danielle

Link to comment
Share on other sites

All in style.css

.txtDefault, a.txtDefault, a.txtLink, a.txtLocation {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #0E51A3;

text-decoration:none;

}

a.txtDefault:hover, a.txtLink:hover, a.txtLocation:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #FF3300;

text-decoration:none;

Link to comment
Share on other sites

"trying to size up the images" - huh? */*

So I will assume you want to make them a larger size then? Well, I can tell you that may be a little problematic. These area use the thumbnails from your store, so you are stuck with thumbnail size if you want the best quality.

Thumbnail size is controlled in ACP > Store General Setting > GD settings

Recommended

You can increase the thumbnail size there, then delete all thumbnails and recreate them; they will be made in the new size you set. There is a free mod floating around that allows for batch creation of thumbnail images.

Not Recommended

On the other hand, you could have the browser determine the image size and resize images on the fly, but this does no create fresh, new images, it just stretches or shrinks the display of exisiting images, so it can mean distortion, loss of quality as well as slightly slower loading time (calculating new image size on each load).

To do this, OPEN skins/xx/styleTemplates/boxes/randomProd.tpl and find this code:

<img src="{IMG_SRC}"




Replace with this:




<img src="{IMG_SRC}" style="width: XXpx"




Put the desired width in pixels in place of XX



Then, open skins/xx/styleTemplates/content/index.tpl and do the same process, replace




<img src="{VAL_IMG_SRC}"




with




<img src="{VAL_IMG_SRC}" style="width: XXpx"

Link to comment
Share on other sites

Guest Meow Meow

Hi -

Thanks, Gentlemen!

Working hard even on and around the Holidays? I will try these out as soon as I get home tonite. I am still in the office unfortunately!

Have a great Christmas and once again, thanks for responding to my post.

You're the Best. */*

Link to comment
Share on other sites

Guest Meow Meow

Hi -

Thanks, Gentlemen!

Working hard even on and around the Holidays? I will try these out as soon as I get home tonite. I am still in the office unfortunately!

Have a great Christmas and once again, thanks for responding to my post.

You're the Best. :)

Hi All -

I thought I was ok with thumbs but when I have another look, they are really pitiful. Does s.o. have a ‘fix thumbs’ mod?

Link to comment
Share on other sites

Guest Meow Meow

All in style.css

.txtDefault, a.txtDefault, a.txtLink, a.txtLocation {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #0E51A3;

text-decoration:none;

}

a.txtDefault:hover, a.txtLink:hover, a.txtLocation:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #FF3300;

text-decoration:none;

Hi Roban -

Thanks for the info. I was able to reduce the fonts for "Category" names by adding "font-size: 70%;" to the 2 sections you indicated above. However, the product description is still in 100% font size and I am unable to locate which code in style.css that controls it. :)

Link to comment
Share on other sites

(Edit: For product details page, )That font size is controlled by the fckeditor - you can set any fonts, colors, sizes, etc. in the editor itself on the add/edit products page.

There is a fix thumbs mod at cubecart.org. What you need to do is delete all thumbs with an ftp program or through your web panel, set the new size in ACP, then use the fixThumbs mod to create all the thumbs anew. The program does mass creation of thumbnails.

Note: Do not delete your product images, just the thumbnail images. Product images are found in images/uploads, thumbnail images are found in images/uploads/thumbs

Another Edit: Well, you have changed the post again and added a picture. The text there is the product description in the product list of viewCat page, not the product details page. You can control that text, but you will have to edit something to improve the stock CubeCart skin code. Here is how it's done:

Look in skins/xx/styleTemplates/content/viewCat.tpl, find this code:

	<td valign="top" class="{CLASS}"><a href="index.php?act=viewProd&amp;productId={PRODUCT_ID}" target="_self" class="txtDefault"><strong>{TXT_TITLE}</strong></a><br />

	{TXT_DESC}<div class="txtOutOfStock">{TXT_OUTOFSTOCK}</div></td>




Replace it with this:




<td valign="top" class="{CLASS}">

<a href="index.php?act=viewProd&amp;productId={PRODUCT_ID}" target="_self" class="txtDefault"> <strong>{TXT_TITLE}</strong></a><br />

<!-- Description Font Control Added, MarksCarts, http://cc3.biz/ -->

<span class="txtDefault">{TXT_DESC}</span>

<div class="txtOutOfStock">{TXT_OUTOFSTOCK}</div>

</td>

Link to comment
Share on other sites

Guest Meow Meow

That font size is controled by the fckeditor - you can set any fonts, colors, sizes, etc. in the editor itself on the add/edit products page.

There is a fix thumbs mod at cubecart.org. What you need to do is delete all thumbs with an ftp program or through your web panel, set the new size in ACP, then use the fixThumbs mod to create all the thumbs anew. The program does mass creation of thumbnails.

Note: Do not delete your product images, just the thmbnail images. Product images are found in images/uploads, thumbnail images are found in images/uploads/thumbs

Hello MC -

Thanks for the quick reply.

In regard to fckeditor, when I add a product, I format the font the way I like. So when I click on the item to go to product page, everything is displayed the way I formatted. The problem is when I click on the subcategory to provide a list of items within that subcat. As you can see in the pic, the "hot buttons" get pushed out of frame because the font is too big - how do I fix this?

In regard to the thumbnails, I like the way you "gently" broke me the 'bad news' of having to delete all existing thumbnails and recreating them - that was what I ended up doing... and that was how I spent my Christmas. However, the end result is rewarding. Thanks!

Link to comment
Share on other sites

Danielle, you had edited your post and added that image while I was typing. I have since edited my post with a corrected answer to your font problem :D

But, it is not the text that makes the buttons look that way - it is a cubecart bug that mozilla browsers display it that way. I have written a fix for this, it's very simple. Look at CubeCart.org for Buy & More Button Alignment in Mozilla fix :)

Link to comment
Share on other sites

Guest Meow Meow

Danielle, you had edited your post and added that image while I was typing. I have since edited my post with a corrected answer to your font problem :P

But, it is not the text that makes the buttons look that way - it is a cubecart bug that mozilla browsers display it that way. I have written a fix for this, it's very simple. Look at CubeCart.org for Buy & More Button Alignment in Mozilla fix ;)

Hello MC -

Thanks for the free mod on the button alignment. :sourcerer: They look beautiful :wub: .

Link to comment
Share on other sites

Guest Meow Meow

(Edit: For product details page, )That font size is controlled by the fckeditor - you can set any fonts, colors, sizes, etc. in the editor itself on the add/edit products page.

There is a fix thumbs mod at cubecart.org. What you need to do is delete all thumbs with an ftp program or through your web panel, set the new size in ACP, then use the fixThumbs mod to create all the thumbs anew. The program does mass creation of thumbnails.

Note: Do not delete your product images, just the thumbnail images. Product images are found in images/uploads, thumbnail images are found in images/uploads/thumbs

Another Edit: Well, you have changed the post again and added a picture. The text there is the product description in the product list of viewCat page, not the product details page. You can control that text, but you will have to edit something to improve the stock CubeCart skin code. Here is how it's done:

Look in skins/xx/styleTemplates/content/viewCat.tpl, find this code:

	<td valign="top" class="{CLASS}"><a href="index.php?act=viewProd&amp;productId={PRODUCT_ID}" target="_self" class="txtDefault"><strong>{TXT_TITLE}</strong></a><br />

	{TXT_DESC}<div class="txtOutOfStock">{TXT_OUTOFSTOCK}</div></td>




Replace it with this:




<td valign="top" class="{CLASS}">

<a href="index.php?act=viewProd&amp;productId={PRODUCT_ID}" target="_self" class="txtDefault"> <strong>{TXT_TITLE}</strong></a><br />

<!-- Description Font Control Added, MarksCarts, http://cc3.biz/ -->

<span class="txtDefault">{TXT_DESC}</span>

<div class="txtOutOfStock">{TXT_OUTOFSTOCK}</div>

</td>

Hi MC -

Thanks for the codes. I applied it and I wasn't sure if I understood what it did (all the underlines confused me). Pls. see pic. I think I am happy with the buttons being aligned properly (see the post above) - you're fanstastic! :sourcerer:

I'll try not to edit my post while you're typing your responses! :wub:

Link to comment
Share on other sites

Well, sorry :sourcerer:

I used the txtDefault class there, but now that I see your stylesheet, you have underline set for that class

.txtDefault, a.txtDefault, a.txtLink, a.txtLocation {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #18252F;

text-decoration: underline;

}

There are several ways to do this if you ever decide again to change the font. You can separate these classes, do a .txtDefault by itself with no underline, while leaving all the anchor txtDefault classes as they are . . . which is probably the way you should have it coded anyway, so only links are underlined. Alternatively, you could make a whole new class like .prodListDesc and use it there.

Several ways to accomplish what you want. Stock cubecart code has no styles applies to that bit of text at all, so it is really better to go ahead and add some styles there - this makes it easier to edit in the future in your stylesheet.

Right now, that text is probably inheriting its styles from you have set in the .boxContent division:

.boxContent {

padding: 14px;

border-bottom: 1px solid #ffffff;

border-right: 1px solid #ffffff;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 75%;

background-image: url(../styleImages/backgrounds/paper.jpg);

margin-bottom: 5px;

background-color: #C7C9B0;

}

But I'm really not sure without experimenting hands-on. Anyway, glad some of the pointers have been helpful :wub:

Link to comment
Share on other sites

Guest Meow Meow

Well, sorry :sourcerer:

I used the txtDefault class there, but now that I see your stylesheet, you have underline set for that class

.txtDefault, a.txtDefault, a.txtLink, a.txtLocation {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #18252F;

text-decoration: underline;

}

There are several ways to do this if you ever decide again to change the font. You can separate these classes, do a .txtDefault by itself with no underline, while leaving all the anchor txtDefault classes as they are . . . which is probably the way you should have it coded anyway, so only links are underlined. Alternatively, you could make a whole new class like .prodListDesc and use it there.

Several ways to accomplish what you want. Stock cubecart code has no styles applies to that bit of text at all, so it is really better to go ahead and add some styles there - this makes it easier to edit in the future in your stylesheet.

Right now, that text is probably inheriting its styles from you have set in the .boxContent division:

.boxContent {

padding: 14px;

border-bottom: 1px solid #ffffff;

border-right: 1px solid #ffffff;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 75%;

background-image: url(../styleImages/backgrounds/paper.jpg);

margin-bottom: 5px;

background-color: #C7C9B0;

}

But I'm really not sure without experimenting hands-on. Anyway, glad some of the pointers have been helpful :wub:

Hello Mark -

Thanks again for the codes. I will definitely play with it in my other project to see how it works.

Your helps have been tremendous - I honestly couldn't have gone this far without your help! Thanks.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...