marty.net 1001 Postcards Love Love Love Meep Meep ZenZodiac DailyQuotation

YOU ARE HERE:
Simple Coding Help

HOME

CPSHOP|

|

|

EMAIL MARTY
  marty.net message board
  « Simple Coding Help »
Welcome, Guest. Please Login or Register.
12/16/17 at 09:16:40
Home Help Search Login Register
   marty.net message board
   About cpshop
   Customization Help
   Simple Coding Help
(Moderator: Marty)
Pages: 1 Reply Notify of replies Send the topic Print 
   Author  Topic: Simple Coding Help  (Read 817 times)
xray
Green Dragon
*

Posts: 3



Go Scots!
   

E-Mail
Simple Coding Help
« on: 12/06/06 at 22:11:52 »
Reply with quote Modify message

Could I beg some of the master coders who are making nice stores to post code that we can all use.

I need help with some simple coding. I am coding the Store Thumbnail Grid Layout. I have 3 images (ProductSquare1a.gif, ProductSquare1b.gif, ProductSquare1c.gif). Each will have a tag centered in it (<[thumbnail]> in ProductSquare1a.gif, <[storename]> in ProductSquare1b.gif, <[teaser]> in ProductSquare1c.gif).

The images need to be stacked:
ProductSquare1a.gif
ProductSquare1b.gif
ProductSquare1c.gif

I can get the ProductSquare1a.gif to work by using the following code, but don't know how to add the other 2 images beneath it.

The entire image will look like this when placed together: http://xraygifts.com/pics/ProductSquare1.gif

The individual images can be seen by placing an a, b, or c after the above link.


<td align=center valign=top><table height="251" width="250"> <table border="0" cellspacing="0" cellpadding="0" width="250" style="background-image: url('http://xraygifts.com/pics/ProductSquare1a.gif'); height: 251;">
<td align=center valign=center>
<[linkstarts]><[thumbnail]><[linkends]></td>
</tr>
     </table>
     </td>
Logged
Marty
Administrator Dragon
*****

Gender: male
Posts: a whole lot



That's me. :)
   

WWW E-Mail
Re: Simple Coding Help
« Reply #1 on: 12/06/06 at 23:07:58 »
Reply with quote Modify message


Code:
<td align=center valign=top>
<table border="0" style="width:250px" cellspacing="0" cellpadding="0" width="250">
<tr>
     <td style="text-align:center;vertical-align:center;padding-left:10px;padding-right:10px;
     background-image:url('http://xraygifts.com/pics/ProductSquare1a.gif');height:251px;color:#000000">
     <[linkstarts]> <[thumbnail]> <[linkends]>
     </td>
</tr>
<tr>
     <td style="text-align:center;vertical-align:center;padding-left:10px;padding-right:10px;
     background-image:url('http://xraygifts.com/pics/ProductSquare1b.gif');height:39px">
           <[storename]>
     </td>
</tr>
<tr>
     <td style="text-align:center;vertical-align:center;padding-left:10px;padding-right:10px;
     background-image:url('http://xraygifts.com/pics/ProductSquare1c.gif');height:84px">
           <[teaser]>
     </td>
</tr>
</table>
</td>
Logged

--
Regards,
Marty·.¸¸.·´¯`·.¸¸.-> marty@marty.net
xray
Green Dragon
*

Posts: 3



Go Scots!
   

E-Mail
Re: Simple Coding Help
« Reply #2 on: 12/07/06 at 09:42:01 »
Reply with quote Modify message

Thanks Marty. You be the man!!!!!!!!!!!

I am tweaking the code to add font styles and changing the image sizes. What do you think about posting the new code and images in a STICKy so everyone can use the code and modify the images for their stores? Maybe others could also post their modified images so there would be pseudo templates available for everyone.
Logged
xray
Green Dragon
*

Posts: 3



Go Scots!
   

E-Mail
Re: Simple Coding Help
« Reply #3 on: 12/08/06 at 14:25:29 »
Reply with quote Modify message

Below is the modified code with comments to help those who are less familiar with html. The code will add a 3 box image around all thumbnails. A sample of the 3 combined images can be found at http://xraygifts.com/samples/samples.html

You can right click the images and save them to your hard drive, alter them in a paint program, then upload them to your server.


<!--This code was written and modified by Marty and XRayGifts.com to help everyone improve the look of their sites.  -->

<!-- ..........DIRECTIONS......... -->

<!--Comments and directions are placed between tags like these to help you. -->

<!--Upload the 3 images (example: ProductSquare1a.gif, ProductSquare1b.gif, ProductSquare1c.gif) to a folder on your server (example: http://mywebsite.com/pics).

The correct image path can be verified by pointing your browser to 'http://mywebsite.com/pics/ProductSquare1a.gif' -->

<!--A color chart can be found here: http://www.christiansitehosting.com/Hexadecimal%20Color%20Coding%20Chart.gif -->

<!--Copy this entire code into Notepad. Make changes and paste the entire code into "product thumbnail page options:Store Thumbnail Grid Layout -->

<!--The below code is divided into 3 sections: thumbnail, storename and teaser. Each section has its own background image and font style. Store names and teasers can be added/modified at the cafepress website.-->

<!-- ......SECTION 1 DIRECTIONS............. -->

<!--Section1 - Thumbnail -->

<!--The image used is 190 pixels wide and 190 pixels tall. If a different size image is used, the code below will need to be changed to the correct size -->

<!--Change url location of background-image:url('http://mywebsite.com/pics/ProductSquare1a.gif')-->

<!-- .....SECTION 1 CODE TO CHANGE IS BELOW.... -->

<td align=center valign=top>
<table border="0" style="width:190px" cellspacing="0" cellpadding="0" width="190">
<tr>
    <td style="text-align:center;vertical-align:center;padding-left:10px;padding-right:10px;
    background-image:url('http://mywebsite.com.com/pics/ProductSquare1a.gif');height:190px;color:#000000">
    <[linkstarts]> <[thumbnail]> <[linkends]>
    </td>
</tr>

<!-- .....SECTION 2 DIRECTIONS........ -->

<!--Section2 - storename -->

<!--The image used is 190 pixels wide and 30 pixels tall. If a different size image is used, the code below will need to be changed to the correct size -->

<!--Change url location of background-image:url('http://mywebsite.com.com/pics/ProductSquare1b.gif')-->

<!--font weight 400 is normal, 500 is medium, 700 is bold, 800 is heavy, 900 is extra bold-->

<!-- ....SECTION 2 CODE TO CHANGE IS BELOW..... -->

<tr>
    <td style="text-align:center;vertical-align:center;padding-left:10px;padding-right:10px;
    background-image:url('http://mywebsite.com/pics/ProductSquare1b.gif');height:30px">
          <font size=1 face="ms sans serif,arial,helvetica" color="FFFFFF" font-weight="700"><[storename]></font>
    </td>
</tr>


<!-- .....SECTION 3 DIRECTIONS....... -->

<!--Section3 - teaser -->

<!--The image used is 190 pixels wide and 70 pixels tall. If a different size image is used, the code below will need to be changed to the correct size -->

<!--Change url location of background-image:url('http://mywebsite.com/pics/ProductSquare1c.gif')-->

<!--font weight 400 is normal, 500 is medium, 700 is bold, 800 is heavy, 900 is extra bold-->

<!-- ....SECTION 3 CODE TO CHANGE IS BELOW..... -->

<tr>
    <td style="text-align:center;vertical-align:center;padding-left:10px;padding-right:10px;
    background-image:url('http://mywebsite.com/pics/ProductSquare1c.gif');height:70px">
          <font size=1 face="ms sans serif,arial,helvetica" color="3399FF" font-weight="400"><[teaser]></font>
    </td>
</tr>
</table>
</td>
Logged
Pages: 1 Reply Notify of replies Send the topic Print 
Jump to:


marty.net message board (http://www.marty.net/cgi/marty/board/messageboard)

Powered by YaBB 1 Gold - Release (Yet Another Bulletin Board)
Copyright © 2000-2001, X-Null. All Rights Reserved.