Welcome to the Advanced Store Customization Beta! 3 pages: 1 [2] 3
ArmyMomCreations
Posted: Thursday, May 07, 2009 10:08:32 PM
 Zazzle Proseller
Groups: ProSeller

Joined: 3/31/2008
Posts: 552
I love the idea of having control over what your store looks like. My problem is I have no clue what to do with CSS. I know a lil HTML and can usually tweak my store layout to fit my needs but have no idea how to start one from scratch Crying

Think I'll wait on mine till I know what Im doing Smile
BlockQuoteProducts
Posted: Thursday, May 07, 2009 10:13:30 PM

Groups: Member

Joined: 6/11/2008
Posts: 634

Changing the background is a pretty straight forward process.

I would like information (coding) on how to change (add image) to the sidepod - involving a top image, background column image and a bottom image.






ThreadPuppy
Posted: Thursday, May 07, 2009 10:25:59 PM
Groups:

Joined: 1/13/2009
Posts: 851
For a footer, you could use this CSS:

Code:
#myfooter {
width:900px;
height:100px;
margin-left: auto;
margin-right:auto;
background-image: url(yourimageurlhere);
}


Then up in the layout section, put:

Code:
<div id="myfooter"></div>


right AFTER the line that says

Code:
<!--end main -->


Obviously change the height to whatever you need, but it should be 900px wide.




You can do the same thing for a header, and that would go in the layout section ABOVE the line that starts:

Code:
<div id="main" class="clearfix">


BlockQuoteProducts
Posted: Thursday, May 07, 2009 10:35:34 PM

Groups: Member

Joined: 6/11/2008
Posts: 634
ThreadPuppy wrote:
For a footer, you could use this CSS:

[code]#myfooter {
width:900px;
height:100px;
margin-left: auto;
margin-right:auto;
background-image: url(yourimageurlhere);


Hey thanks ThreadPuppy.

There is a way to customize just the pod elements themselves as in the http://www.zazzle.com/retropolis_travel example given on the Zazzle Blog.


ThreadPuppy
Posted: Thursday, May 07, 2009 10:44:17 PM
Groups:

Joined: 1/13/2009
Posts: 851
That sidepod is a little too involved to explain with just a quick bit of code. I wouldn't recommend trying that unless you know what you're doing.
BlockQuoteProducts
Posted: Thursday, May 07, 2009 11:04:27 PM

Groups: Member

Joined: 6/11/2008
Posts: 634

I couldn't have designed an ecommerce website without getting involved - I'm not afraid of involved. Happy


ThreadPuppy
Posted: Thursday, May 07, 2009 11:19:37 PM
Groups:

Joined: 1/13/2009
Posts: 851
It's too involved for me to give some quick bit of code to copy and paste. It's certainly not too involved to accomplish.
The menu sidepod is id="group_1" class="sidePod".
You would have to set a background for that in the CSS section.
If you want an image above the menu it would go above the navpane placeholder.
An image below the menu would go below the navpane placeholder.
mingtees
Posted: Friday, May 08, 2009 5:10:36 AM

Groups:

Joined: 6/9/2008
Posts: 222
Big fat thank you. Thank You.
Ars_Celtica
Posted: Friday, May 08, 2009 5:35:38 AM
 Zazzle Proseller
Groups: ProSeller

Joined: 5/3/2009
Posts: 101
ThreadPuppy wrote:
It's too involved for me to give some quick bit of code to copy and paste. It's certainly not too involved to accomplish.
The menu sidepod is id="group_1" class="sidePod".
You would have to set a background for that in the CSS section.
If you want an image above the menu it would go above the navpane placeholder.
An image below the menu would go below the navpane placeholder.


It's even a little more complicated than that. I had to create a div of my own to change the width of the module content - just making it slightly narrower - and then reset it before the navpanel finished itself off.

You can change the order of the modules in the sidebar (which I did) but you can't affect the content of the modules, and I don't think you can insert anything new between them. Though I'm not as smart as I look.

You can change the appearance of the horizontal bar that's used in the sidebar, but this will also affect (at least) the horizontal bar in comments sections. Something that looks great in the sidebar make look silly elsewhere.

Also, another thing I did was to make this version of the sidebar appear on every page. By default, pages like your Fan Club and About page get a shorter version of the sidebar. That's possible by putting a single version of the sidebar in every template in the "Layout" box.
TheCrewDesigns
Posted: Friday, May 08, 2009 7:08:14 AM

Groups: Member

Joined: 1/15/2009
Posts: 151
This is GREAT thanks a lot, I will have to have a play (but backup my code first)
BlockQuoteProducts
Posted: Friday, May 08, 2009 10:10:23 AM

Groups: Member

Joined: 6/11/2008
Posts: 634
Quote:
It's even a little more complicated than that. I had to create a div of my own to change the width of the module content - just making it slightly narrower - and then reset it before the navpanel finished itself off...


WOW - your gallery is so pretty.

BlockQuote Products Resume Kit
SPLAT BlacK
in the Public Domain
Images Magical on Zazzle



MilitaryDesigns
Posted: Saturday, May 09, 2009 3:49:46 AM

Groups: Member

Joined: 4/23/2009
Posts: 76
ThreadPuppy wrote:
For a footer, you could use this CSS:

Code:
#myfooter {
width:900px;
height:100px;
margin-left: auto;
margin-right:auto;
background-image: url(yourimageurlhere);
}


ThreadPuppy, can you give me an idea where to place this lil gem of a code? I've tried to place it everywhere I thought it might go but I cant get it to work for me. So frustrating.
Im...Plug...Plug...Plugin' along.

Grin
ThreadPuppy
Posted: Saturday, May 09, 2009 11:57:43 AM
Groups:

Joined: 1/13/2009
Posts: 851
MilitaryDesigns wrote:
ThreadPuppy wrote:
For a footer, you could use this CSS:

Code:
#myfooter {
width:900px;
height:100px;
margin-left: auto;
margin-right:auto;
background-image: url(yourimageurlhere);
}


ThreadPuppy, can you give me an idea where to place this lil gem of a code? I've tried to place it everywhere I thought it might go but I cant get it to work for me. So frustrating.
Im...Plug...Plug...Plugin' along.

Grin


That part would go in the CSS section with the other CSS definitions.

Then, to call it, in the layout section you would add <div id="myfooter"></div> in the layout section after <!--end main -->
MilitaryDesigns
Posted: Saturday, May 09, 2009 5:27:16 PM

Groups: Member

Joined: 4/23/2009
Posts: 76
ThreadPuppy wrote:
MilitaryDesigns wrote:
ThreadPuppy wrote:
For a footer, you could use this CSS:

Code:
#myfooter {
width:900px;
height:100px;
margin-left: auto;
margin-right:auto;
background-image: url(yourimageurlhere);
}


ThreadPuppy, can you give me an idea where to place this lil gem of a code? I've tried to place it everywhere I thought it might go but I cant get it to work for me. So frustrating.
Im...Plug...Plug...Plugin' along.

Grin


That part would go in the CSS section with the other CSS definitions.

Then, to call it, in the layout section you would add <div id="myfooter"></div> in the layout section after <!--end main -->



Thank you but I still have no idea where exactly to place the top code in my CSS section. I keep getting an error msg when I place it where I think it should go. Now the key word is..."Where I think it should go" Laughing

ThaliaTook
Posted: Sunday, May 10, 2009 8:12:15 PM

Groups: Member

Joined: 4/23/2009
Posts: 13
I hope this is the right place to ask a general newbie-type question. How is this ability to customize one's store different from the Zazzle store builder? Is it along the lines of the ZSB being a template while this is coding from scratch?

I'm trying to get a general idea so I can figure out which way to proceed; if it's better for me to start with the ZSB or with this. I mean, I'm going to have to learn CSS anyway, and I will probably want a very customized store as the end result.

(Just thinking out loud. There's been a lot of THAT the last couple of weeks.)

ecaggiani
Posted: Monday, May 11, 2009 1:39:26 PM
 Zazzle Proseller
Groups: ProSeller, Zazzle Employee

Joined: 5/29/2006
Posts: 226
Location: San Jose
Zazzle Store Builder allows you to build a website outside of Zazzle.com (for example, if you own your own domain, you can build a site that showcases your Zazzle products using Store Builder).

Advanced Store Customization, on the other hand, is a tool to let you customize the store that's hosted on Zazzle.com (the term "store" is new. It used to be "gallery").

Using both tools, you can create a more seamless experience by making your outside website look just like your Zazzle hosted store.

Hope this helps!
gleems
Posted: Monday, May 11, 2009 7:45:14 PM

Groups: Member

Joined: 2/5/2009
Posts: 416
Location: Lake Norman Area
I finally toyed with this tonight, and thought of keeping things the way they ended up, but now want to make changes... Can anyone explain to me how to give the storefront products (the boxes) a transparent background? While I was playing around I managed to get everything else transparent, but the white behind the products wouldn't go away, so I took the transparency off the other stuff. If this should have been asked elsewhere, please move it to the correct place. Thanks!
ThaliaTook
Posted: Monday, May 11, 2009 7:49:36 PM

Groups: Member

Joined: 4/23/2009
Posts: 13
ecaggiani wrote:
Zazzle Store Builder allows you to build a website outside of Zazzle.com (for example, if you own your own domain, you can build a site that showcases your Zazzle products using Store Builder).

Advanced Store Customization, on the other hand, is a tool to let you customize the store that's hosted on Zazzle.com (the term "store" is new. It used to be "gallery").

Using both tools, you can create a more seamless experience by making your outside website look just like your Zazzle hosted store.

Hope this helps!


Or, for me, make my Zazzle store look like my site. But, yes that does help, thank you! (And I feel kind of duh now, like I shoulda known that, but, I am new here.)
gleems
Posted: Tuesday, May 12, 2009 4:35:23 AM

Groups: Member

Joined: 2/5/2009
Posts: 416
Location: Lake Norman Area
ecaggiani wrote:
Zazzle Store Builder allows you to build a website outside of Zazzle.com (for example, if you own your own domain, you can build a site that showcases your Zazzle products using Store Builder).

Advanced Store Customization, on the other hand, is a tool to let you customize the store that's hosted on Zazzle.com (the term "store" is new. It used to be "gallery").

Using both tools, you can create a more seamless experience by making your outside website look just like your Zazzle hosted store.

Hope this helps!


I'd like to make at least one of my stores look like my offsite, but I seem to be doing it wrong. Could someone walk me through it (using layman terms, please) or post a step by step tutorial here in the forums to show how it is done. I can't pay anyone to do my store(s), plus I like doing things myself... I just think I am missing something here and, with my luck, it is probably the simplest of all things! lol
shabbychicgraphics
Posted: Friday, July 24, 2009 8:39:23 PM

Groups: Member

Joined: 7/24/2009
Posts: 6
This should be fun. I have seen some creative sites on Zazzle.
Users browsing this topic
Guest


Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.
Print this topic
RSS Feed
Normal
Threaded