Matching CafePress To WordPress

[mwdewitt]

‘Allo, everyone! I am trying to use the code from this website and make my CafePress Shop look the same for continuity’s sake. Basically, there is a “Shop” button, and I want to send people to CafePress to buy my merchandise, but I want it to look like you never left my website. So far, it is coming along, but I am having some difficulty.

For example, everything seems to want to stay to the far left, no matter how big your screen is. I have set the width to 960 pixels, which is the width of my own website, but my code does not seem to want to cooperate on CafePress. Now, as my father says, the code only does what you tell it to, so obviously I am telling it to do the wrong thing.

Also, I would like to make the logo a link back to my website. Right now, it has an anchor tag which tells it to link back to my website, but it is not doing it.

And anything else that you guys can help me out with would be greatly appreciated. It is kind of weird to go from a WordPress website into CafePress, but I believe it is possible. Thank you for anything you guys can do!

Edit: So, essentially, any suggestions on how to make my CafePress Shop look more like my own website would be greatly appreciated!

[mwdewitt]

Okay, I finally got around to trying it and it didn’t really do anything. Sorry. The only code that is not mine is the following CSS…

#cpleftnav {

font-family: Georgia, Times New Roman, Times, serif;

font-size: 1em;

width: 128px;

line-height: 1em;

color: #000000;

}



#cpbody {

padding: 0px;

background-color: #ffffff;

}



.navheadline {

font-family: Georgia, Times New Roman, Times, serif;

color: #000000;

size: 11px;

font-weight: bold;

padding: 3px;

text-transform: uppercase;

padding-left: 15px;

margin: 2px 2px 0px 2px;

}



#shopfooter {

clear: both;

display: block;

position: relative;

width: 960px;

height: 0px;

}



#bottomlinks {

font-family: Georgia, Times New Roman, Times, serif;

font-size: 10px;

width: 760px;

vertical-align: bottom;

padding-bottom: 5px;

color: #ffffff;

}



form, select, option, input, button, textarea {

margin: 0px;

font-family: Georgia, Times New Roman, Times, serif;

font-size: 11px;

}



.footer {

color: #ffffff;

}



a.footer:link,a.footer:visited {

color: #ffffff;

text-decoration: underline;

}



#subscribe, #browseproducts, #browsedesigns  {

margin: 2px 5px 10px 15px;

color: #000000;

font-family: Georgia, Times New Roman, Times, serif;

font-size: 11px;

}



a.sidebarlink:link,a.sidebarlink:visited {

color: #000000;

}



.smallsidebartext {

color: #000000;

}

The rest is all mine and that CSS I just posted can be edited to whatever you would like. The HTML is the same way. It can all be changed.

Edit: Okay, to add to the problems thus far, now it is trying to put my footer near the header. You can see the tip of the box-shadows coming from the footer about 14 pixels down from the header. Yeah, and for some reason the footer is not showing up. And I got the logo, description, and menu to push over from the side of the page, but the content still seems determined to stay where it is. Also, at the very bottom there is a horizontal scroll bar. I set the page width to be 960 pixels and it seems to have taken, but instead of spreading the page to 960 pixels, it brought in a horizontal scroll bar. I am not sure why. Help!

Edit: I am so close to getting this thing! Arghhh!

[mwdewitt]

I see “top-bar” in the HTML, but I do not see it being used anywhere in the CSS. It seems to be referring to the reset I have at the beginning of my stylesheet. And I just added it to my CSS for CafePress and it placed all the header elements inside the 960 pixel boundary, but the rest of the website is still not acting right. Oh, well…

All of the problems still apply! I tore the website down and have started rebuilding it again, but I am running into the same problems. If you have any suggestions or would like to help, feel free to give your two cents!

Go here to see my progress.

Edit: Okay, basically, all I need to do now is center the content and figure out some way to modify the footer to have it look like the one on my own website, here. Again, any and all help is greatly appreciated. Thank you!

[mwdewitt]

Thank you, @stevencrader, you have been a great help through this entire process. Everything is now inside 960 pixels, with the “header-bg.png” flowing nicely in the header. Here is what I am looking at for the footer in the HTML…

Where's My Stuff?


Track your recent orders.


View or change your order.




Shipping & Returns


See our shipping rates.


Make a return or exchange.




Need Help?


Satisfaction Guaranteed.


Visit our Customer Service.

And here is a mock-up I did, which if placed into the footer region, does not work, but it gives you a general idea of what I am trying to accomplish…

Where's My Stuff?


Track your recent orders.


View or change your order.







Shipping & Returns


See our shipping rates.


Make a return or exchange.







Need Help?


Satisfaction Guaranteed.


Visit our Customer Service.





 



 

I have never worked with tables because I have only heard bad things about them. Also, most people seem to be of the opinion that “divs” are the way to go. So, any and all help that you can give me concerning tables will be appreciated. I will try and apply what you have given me thus far to the footer region and see how it goes.

Check here, to see my progress.

Edit: Also, how do I get the “intro-paragraph” to flow beside the artificial sidebar and float above “cpbody,” which appears to be what is controlling the content. Right now, “intro-paragraph” spans the entire length of the page, but I want it to act exactly like the “intro-paragraph” here. Thank you, in advance!

Edit: And one final thing (or at least, I believe it is the last thing), I would like for “Store” to stay highlighted while you are in the shop. Here is what I have in my CSS to make things highlighted on certain pages…

ul#mt-main-nav li a:hover, ul#mt-extra-nav li a:hover, body#home ul#mt-main-nav li.home a, body#gloom ul#mt-main-nav li.gloom a,  body#feelgoodcandy ul#mt-main-nav li.feelgoodcandy a, body#contact ul#mt-main-nav li.contact a, body#store ul#mt-main-nav li.store a,body#donations ul#mt-main-nav li.donations a, body#default ul#mt-main-nav li.home a {

background: #000000;

color: #FFFFFF;

}

How would I go about changing the “store” attribute to make it recognize that it is on CafePress? Thank you, once more, in advance!

[mwdewitt]

I just put it into the website. Looks good. Obviously, it needs some tweaking, but it is a hell of a lot better than my broken code. Thank you, once again, @stevencrader! And to all of those just now entering the conversation, visit this website. Basically, I am trying to fix all of the little problems now (making the search bar look like the one on my own website, making the “intro-paragraph” part of the right content, fixing the footer, et cetera). All of the big stuff has been fixed, I believe.

[mwdewitt]

Okay, @31M1K97, I did everything you suggested and this is the outcome. I actually do not think you are allowed to tamper with the “cafepressFooter.” I believe they remove your account if you do that, so that is probably not a good idea, but it does not seem like it moved it off the page anyway. It’s just hiding behind the other footer elements. Okay, so the footer still needs to be fixed and I need to get that search bar looking like the one here.

Edit: Is there a way to put the “cafepressFooter” in a div so that I have four footer divs like on my actual website? It would obviously be the content of the “About” div that I have set-up. Just a thought. Thank you, everyone!

[mwdewitt]

So, @31M1K97, why is your code not doing that? I just ask this in general curiosity, because the “cafepressFooter” is still hiding behind my footer and the “footer-bg.png” is raised above like you say the “cafepressFooter” should be. If anyone knows how to fix this little problem, I would greatly appreciate it. Most likely, I am not doing something right. Haha! Thanks.

[Author]

Posts