X-Cart forums

[jdkerr]

Have started the process of migrating products over to my new store, and really enjoy the ease of getting them in and customized. The one item that I still need to customize is the default home page for the site.

On the home.php page (the default page that opens when you visit the store), is it best to edit the home.php file directly and put the HTML in there that we want, or does it belong in an attached file that is referenced by it?

Are there examples of the types of things that can be done with the default opening page? Want to make sure I am using all the features that might be there to show-off the new store!

Thanks..John

[DezineJunkie]

Have u figured out how to take the padding out of the product image on this template?

html > body .welcome-page uo-container > div #page-container > div #page-container2 > div #content-container > div #content-container2 > div #center > div #center-main > div .dialog products-dialog dialog-featured-list list-dialog > div .content > div .products products-list > div .item > div .image > div .image-border

table, img (line 56)
{
border-top-width: 0px;
border-right-width-value: 0px;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-bottom-width: 0px;
border-left-width-value: 0px;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-top-style: none;
border-right-style-value: none;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-bottom-style: none;
border-left-style-value: none;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-top-color: -moz-use-text-color;
border-right-color-value: -moz-use-text-color;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-bottom-color: -moz-use-text-color;
border-left-color-value: -moz-use-text-color;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
}
.products .image a.image-link:link img, .products .image a.image-link:visited img, .products .image a.image-link:hover img, .products .image a.image-link:active img (line 1246)
{
background-color: #ffffff;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
}
.products .image a.image-link:link img, .products .image a.image-link:visited img, .products .image a.image-link:hover img, .products .image a.image-link:active img (line 1246)
{
background-color: #ffffff;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
}

Originally Posted by jdkerr

Have started the process of migrating products over to my new store, and really enjoy the ease of getting them in and customized. The one item that I still need to customize is the default home page for the site.

On the home.php page (the default page that opens when you visit the store), is it best to edit the home.php file directly and put the HTML in there that we want, or does it belong in an attached file that is referenced by it?

Are there examples of the types of things that can be done with the default opening page? Want to make sure I am using all the features that might be there to show-off the new store!

Thanks..John

[jdkerr]

I have not looked at that "feature" yet, but it is one of the very next clean-up issues that I will undertake. I will post my results, as I get there!

John

[DezineJunkie]

Im not sure if what this means exactly but wondered if changing to
absolute intstead of physical?

border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;

border-right-width-ltr-source: absolute;
border-right-width-rtl-source: absolute;

[DezineJunkie]

I think the answer lies in this code:
Images preview- ill bold the possiblites
it could also be that the grey is an png image and the white box is over it

*/
.images-preview-bg {
background: transparent url(images/grey.png) repeat left top;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 3000;
}
.images-preview {
position: absolute;
top: 50px;
right: 50px;
bottom: 50px;
left: 50px;
background: #ffffff none;
border: 5px solid #e3e3e3;
overflow: hidden;
min-width: 700px;
min-height: 500px;
z-index: 4000;
}
.images-preview .wait {
position: absolute;
top: 30px;
right: 0px;
bottom: 30px;
left: 0px;
background: #ffffff url(images/loading.gif) no-repeat center center;
z-index: 1500;
}
.images-preview a.close:link,
.images-preview a.close:visited,
.images-preview a.close:hover,
.images-preview a.close:active
{
position: absolute;
top: 9px;
right: 11px;
background: transparent url(images/close_images_preview.gif) no-repeat left center;
padding-left: 12px;
padding-bottom: 2px;
font-size: 11px;
color: #4e4e4e;
text-decoration: none;
outline-style: none;
text-transform: lowercase;
}
.images-preview .list-box {
margin: 50px 50px 0px 50px;
padding: 0px;
text-align: center;
position: relative;
border: 1px solid #ffffff;
}
.images-preview a.arrow,
.images-preview a.arrow:link,
.images-preview a.arrow:visited,
.images-preview a.arrow:hover,
.images-preview a.arrow:active
{
position: absolute;
display: block;
width: 13px;
height: 13px;
outline-style: none;
cursor: pointer;
}
.images-preview a.hidden,
.images-preview a.hidden:link,
.images-preview a.hidden:visited,
.images-preview a.hidden:hover,
.images-preview a.hidden:active
{
display: none;
}
.images-preview a.left,
.images-preview a.left:link,
.images-preview a.left:visited,
.images-preview a.left:hover,
.images-preview a.left:active
{
left: 0px;
background: transparent url(images/arrow_left.gif) no-repeat left center;
}
.images-preview a.right,
.images-preview a.right:link,
.images-preview a.right:visited,
.images-preview a.right:hover,
.images-preview a.right:active
{
right: 0px;
background: transparent url(images/arrow_right.gif) no-repeat right center;
}
.images-preview a.left-disabled,
.images-preview a.left-disabled:link,
.images-preview a.left-disabled:visited,
.images-preview a.left-disabled:hover,
.images-preview a.left-disabled:active
{
background: transparent url(images/arrow_left_disabled.gif) no-repeat left center;
cursor: auto;
}
.images-preview a.right-disabled,
.images-preview a.right-disabled:link,
.images-preview a.right-disabled:visited,
.images-preview a.right-disabled:hover,
.images-preview a.right-disabled:active
{
background: transparent url(images/arrow_right_disabled.gif) no-repeat 6px center;
cursor: auto;
}
.images-preview div.list-subbox {
margin: 0px;
padding: 0px;
overflow: hidden;
position: relative;
text-align: center;
}
.images-preview ul {
list-style: none;
margin: 0px;
padding: 0px;
text-align: center;
vertical-align: middle;
position: absolute;
}
.images-preview ul li {
display: block;
padding: 0px;
margin: 0px 12px;
border: 1px solid #ffffff;
background: transparent none;
text-align: center;
vertical-align: middle;
float: left;
cursor: pointer;
}
.images-preview ul li.over,
.images-preview ul li:hover
{
border: 1px solid #cccccc;
}
.images-preview ul li.selected {
border: 1px solid #215485;
}
.images-preview ul li img {
display: inline;
text-align: center;
vertical-align: middle;
}
.images-preview ul li.loading {
background-image: url(images/loading.gif);
background-repeat: no-repeat;
background-position: center center;
}
.images-preview ul li.loading img {
display: none;
}
.images-preview .box {
position: relative;
margin: 50px;
vertical-align: middle;
text-align: center;
background: transparent none;
}
.images-preview .box.loading {
background-image: url(images/loading.gif);
background-repeat: no-repeat;
background-position: center center;
}
.images-preview .box img {
cursor: pointer;
vertical-align: middle;
text-align: center;
}
/*

[jdkerr]

OKay. Found the section in the CSS file which changes the attributes of the thumb nail border.

In the CSS file called altskin.css in your \skin1\ folder, find around line 1219:

It should look like:
.product-details .image .image-box img {
border-style: solid;
border-width: 9px 7px;
border-color: #d6f2cc;
}
.products .image .image-border {
width: auto;
border-top: 1px solid #abcd9b;
background: #d6f2cc none;
padding: 9px 9px 9px 7px;
text-align: center;
}


To give you a white border and no top horizontal line, change the two sections to:
.product-details .image .image-box img {
border-style: solid;
border-width: 0;
border-color: #ffffff;
}
.products .image .image-border {
width: auto;
background: #ffffff none;
padding: 0px;
text-align: center;
}


Give it a try - I think this is what we were looking for.

John

[DezineJunkie]

thank u for that- i had seen that altskin but for some reason did not see it in the files-
you have to change this for the padding- from 9 to 0

now if i could just get 4 products across-



}
.products .image .image-border {
width: auto;
border-top: 0px solid #bcc4c9;
background: #eaeef0 none;
padding: 0px 0px 0px 0px;
text-align: center;

[DezineJunkie]

im trying to get the product image LARGER-
when changing in Settings, Appearance, Displaying products, Maximum thumbnail width, Maximum product image width does not change that product size-
it seems to only affect the Sub Cat images

[jdkerr]

Are you trying to get four across from the Categories menu? If so, I have it working, but don't think I did anything special.

What I am doing, is keeping all my thumb nailes to a size of 125x125.

This is how the categories look on my site:

http://www.pcboard.ca/4-across.jpg

[DezineJunkie]

are these showing under FEATURED PRODUCTS or Categories then as subs?

my Featured Products are in one row- or one under one
i would like my featured products to be larger about
250x 250 or so cant seem to get them any bigger?