I need help utilizing the grid function in the forum.

PacifierCity
Valued Contributor II

I have a few questions about using the grid function.

1. When I create a 1 x 3 grid, the product images show up in the center of the squares.  I just created a 2 x 3 grid and the images are aligned to the left edge of the square.  I want them to show up in the center like the 1 x 3 grid.  Any one know how to do that? (Reference: https://community.zazzle.com/t5/testing-forum/test-grid-images/m-p/8739)

2. Is it possible to add a background color to the grid?  If so, how?

3. Is it possible to merge to squares in the grid to form one wide rectangle instead of 2 squares side by side.

4. How can I upload an image from my PC to the grid?

5. Can I change the boarder style or color of the grid?  If so, how?

Many thanks for your help.

PC

...................

-Thoughts from Pacifier City a JB Designs brand. Follow/join us on Pinterest. Visit Pacifier City Cards for Amazing Kids Birthday & Holiday Cards. It's Elementary is for K-5 kids, parents & programs. Please promote and share our goods. Thanks! #pacifiercity
12 REPLIES 12

PenguinPower
Valued Contributor III

The simple answer is yes... you can do all of those things BUT (now for the complicated part) To do them you'll need to learn how to program CSS (cascading style sheets). And I couldn't guarantee that adding your own code just to a post here would even work.... as these pages likely have their own CSS already. 

The only easy one on your list is adding your own PC images to the table. That's simple.  Just make your table - place your cursor within the cells and hit the "insert images" button (the camera). Here's some random stuff from my desktop. You can either upload new images or choose from those you've already uploaded. 

bottle opener.jpgScreen Shot 2022-03-03 at 2.36.50 PM.png

 

GAAAAAAGAAAAAA

 

f01-01.jpg

 

shellifitz
Valued Contributor
so I was just trying to figure out what in the world you were talking about. and this happened.  😂

shellifitz
Valued Contributor
    
not impossible.jpg

This is only a test...  just trying to see how this works 
So what would I use this for anyway? I will be watching to see what you do with it. 

to add the image I just clicked into the table and then hit the camera icon.  I then chose a random image from my PC (probably works better with thumbnails.)

PacifierCity
Valued Contributor II

I played around a bit and after I made my grid and inserted the html code from products, I highlighted the whole bunch and was able to change background and frame color by selecting the grid, and then grid options... but it reverted back to black and white...  the grid frame did change though...

I'll play more with it today and see if I first make the grid and all the changes and then add my images, if that changes things...

@PenguinPowerThanks for the bit about uploading images from PC.  It is too bad that they don't show up centered in the grid box...

PC

.........................................

-Thoughts from Pacifier City a JB Designs brand. Follow/join us on Pinterest. Visit Pacifier City Cards for Amazing Kids Birthday & Holiday Cards. It's Elementary is for K-5 kids, parents & programs. Please promote and share our goods. Thanks! #pacifiercity

PenguinPower
Valued Contributor III

Ah - I suspect that the "advanced" features do the CSS for you - But there's a style sheet already set for the page that overrides it....  few of the changes made stick. Merging cells and centering items is also available there, but the changes don't stay.

PacifierCity
Valued Contributor II

@Scott- Any chance you can chime in here when you get the chance.  Not in a big rush, but curious to see if something is stopping grid changes from sticking.

Thanks,

PC

.........................

-Thoughts from Pacifier City a JB Designs brand. Follow/join us on Pinterest. Visit Pacifier City Cards for Amazing Kids Birthday & Holiday Cards. It's Elementary is for K-5 kids, parents & programs. Please promote and share our goods. Thanks! #pacifiercity

ColsCreations
Honored Contributor II

Test 1 - 2x2 grid
- Notes to self: 50% = 380 + 380 = 760 total

 

circles.jpgcircles.jpg
circles.jpgcircles.jpg

 

<table border="0" width="100%">
<tbody>
<tr>
<td width="50%"><li-image width="380" height="380" alt="circles.jpg" align="center" id="1004i1D4B2F3FC7D2A921" size="large" resized="false" sourceType="new"></li-image></td>
<td width="50%"><li-image width="380" height="380" alt="circles.jpg" align="center" id="1005i161E640F686F0000" size="large" resized="false" sourceType="new"></li-image></td>
</tr>
<tr>
<td width="50%"><li-image width="380" height="380" alt="circles.jpg" align="center" id="1008iE67031ED89DA4E69" size="large" resized="false" sourceType="new"></li-image></td>
<td width="50%"><li-image width="380" height="380" alt="circles.jpg" align="center" id="1011i87F09FECEE6F7CAE" size="large" resized="false" sourceType="new"></li-image></td>
</tr>
</tbody>
</table>

 

 

Store IconStore IconWebsite IconFacebook IconPinterest IconInstagram IconBenable IconNight Cafe IconDiscord IconBuy Me a CoffeeOut of Stock List

ColsCreations
Honored Contributor II

Test 2 - 1x3 grid
- Notes to self: - 33% =  249 + 249 + 249 = 747 total

 

circles.jpgcircles.jpgcircles.jpg

 

<table border="0" width="100%">
<tbody>
<tr>
<td width="33%"><li-image width="249" height="249" alt="circles.jpg" align="center" id="1004i1D4B2F3FC7D2A921" size="large" resized="false" sourceType="new"></li-image></td>
<td width="33%"><li-image width="249" height="249" alt="circles.jpg" align="center" id="1005i161E640F686F0000" size="large" resized="false" sourceType="new"></li-image></td>
<td width="33%"><li-image width="249" height="249" alt="circles.jpg" align="center" id="1008iE67031ED89DA4E69" size="large" resized="false" sourceType="new"></li-image></td>
</tr>
</tbody>
</table>

 

Store IconStore IconWebsite IconFacebook IconPinterest IconInstagram IconBenable IconNight Cafe IconDiscord IconBuy Me a CoffeeOut of Stock List

PacifierCity
Valued Contributor II

@ColsCreationsThanks.  I'll have to try and figure out how you got things centered a bit later but your grids look good.  I was excited for a moment when I thought you added a background color to, but that was part of your image...  It's OK though cuz I should be 1 step closer to what I want to do with grids.  Just having everything centered will work good enough to get me started.

PC

.................................

-Thoughts from Pacifier City a JB Designs brand. Follow/join us on Pinterest. Visit Pacifier City Cards for Amazing Kids Birthday & Holiday Cards. It's Elementary is for K-5 kids, parents & programs. Please promote and share our goods. Thanks! #pacifiercity

@PacifierCity 

Sorry, I was going to explain after some more testing but haven't had a chance to do either yet.

 

Store IconStore IconWebsite IconFacebook IconPinterest IconInstagram IconBenable IconNight Cafe IconDiscord IconBuy Me a CoffeeOut of Stock List

@ColsCreationsNo worries.  I haven't had a chance to do more testing myself.  And I won't have time tonight either... maybe tomorrow...  Thanks for your efforts.  They are appreciated!

PC

...............................

-Thoughts from Pacifier City a JB Designs brand. Follow/join us on Pinterest. Visit Pacifier City Cards for Amazing Kids Birthday & Holiday Cards. It's Elementary is for K-5 kids, parents & programs. Please promote and share our goods. Thanks! #pacifiercity