X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)
-   -   Customizing Default Home Page in Fashion Mosaic Template? (https://forum.x-cart.com/showthread.php?t=50830)

jdkerr 11-18-2009 05:48 PM

Customizing Default Home Page in Fashion Mosaic Template?
 
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 11-22-2009 05:59 PM

Re: Customizing Default Home Page in Fashion Mosaic Template?
 
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%;
}



Quote:

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 11-23-2009 08:14 AM

Re: Customizing Default Home Page in Fashion Mosaic Template?
 
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 11-23-2009 08:59 AM

Re: Customizing Default Home Page in Fashion Mosaic Template?
 
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 11-23-2009 09:19 AM

Re: Customizing Default Home Page in Fashion Mosaic Template?
 
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 11-23-2009 09:51 AM

Re: Customizing Default Home Page in Fashion Mosaic Template?
 
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 11-23-2009 10:05 AM

Re: Customizing Default Home Page in Fashion Mosaic Template?
 
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:D/

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 11-23-2009 10:08 AM

Re: Customizing Default Home Page in Fashion Mosaic Template?
 
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 11-23-2009 10:15 AM

Re: Customizing Default Home Page in Fashion Mosaic Template?
 
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 11-23-2009 12:26 PM

Re: Customizing Default Home Page in Fashion Mosaic Template?
 
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?

DezineJunkie 11-23-2009 12:29 PM

Re: Customizing Default Home Page in Fashion Mosaic Template?
 
ok mine are coming up in 4 across-the 125x125 puts them at 4 across
these are SUB CATS tho not featured product-
but it would be nice to have featured products 4 across



Quote:

Originally Posted by 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 11-23-2009 01:27 PM

Re: Customizing Default Home Page in Fashion Mosaic Template?
 
How to make Featured products larger ?
What should the code say?

{*
$Id: featured.tpl,v 1.23 2009/06/22 07:16:43 max Exp $
vim: set ts=2 sw=2 sts=2 et:
*}
{if $f_products ne ""}
{capture name=dialog}
{include file="customer/main/products.tpl" products=$f_products featured="Y"}
{/capture}
{include file="customer/dialog.tpl" title=$lng.lbl_featured_products content=$smarty.capture.dialog sort=true additional_class="products-dialog dialog-featured-list"}
{/if}

DezineJunkie 11-23-2009 01:53 PM

Re: Customizing Default Home Page in Fashion Mosaic Template?
 
I found this mod check out this link to page

http://forum.x-cart.com/showthread.php?t=15579&highlight=first+detailed+im age

First detailed image instead of thumbnail
Ever wanted to replace the thumbnail on the product page with the first image from your detailed images and then have your detailed images section start with the second detailed image?

Well here is how to do it

This code is for the 4.0 branch (the version for 3.4 and 3.5 is very similar)

You need to modify two files:
customer/product.tpl
modules/detailed_product_images/product_images.tpl

You will also need to make a new file:
modules/detailed_product_images/product_images_one.tpl

In product.tpl
find this:
Code:

<TD valign="top" align="left" rowspan="2" width="100"> {include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail"} </TD>


replace with this:
Code:

{***----ORIGINAL THUMBNAIL---- <TD valign="top" align="left" rowspan="2" width="100"> {include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail"} </TD> ----ORIGINAL THUMBNAIL----***} {***--FIRST DETAILED IMAGE--***} <td valign="top" align="left" rowspan="2" width="100"> {if $active_modules.Detailed_Product_Images ne ""} {include file="modules/Detailed_Product_Images/product_images_one.tpl" } {/if} </td> {***--FIRST DETAILED IMAGE--***}



Then in product_images.tpl
find this:
Code:

<img src="{$images[image].tmbn_url}">


Replace with this:
Code:

{***----ORIGINAL CODE------- <img src="{$images[image].tmbn_url}" alt="{$images[image].alt|escape}"> --------ORIGINAL CODE***} {***--Startwithsecondimage---***} {if $images[image].tmbn_url ne $images[0].tmbn_url } <img src="{$images[image].tmbn_url}" alt="{$images[image].alt|escape}"> {/if} {***--Startwithsecondimage---***}



Make a new file in modules/detailed_product_images called product_images_one.tpl

Put this code in it:
Code:

{* $Id: product_images_one.tpl,v 1.7.2.2 2005/07/29 10:43:25 CCS Exp $ *} {if $images ne ""} <div align=left> {section name=image} {if $images[image].avail eq "Y"} {if $images[image].tmbn_url} <img src="{$images[image].tmbn_url}" alt="{$images[image].alt|escape}"> {else} <img src="{$xcart_web_dir}/product_image.php?imageid={$images[image].imageid}" alt="{$images[image].alt|escape}"> {/if} {/if} {/section} </div> {/if}


That's it
















Love it!
Works great! Does anyone know how this could be modified so the "detailed images" box only shows up if there are more than one detailed image? I have lots of products with only one image, and I now have one detailed image on top (nice) but a big old empty dialog box at the bottom. Looks like there is something missing.

Thanks again for the great mod!
__________________
x-cart 4.0.14
Thanks Reply With Quote Quick reply to this message
mortickles
View Public Profile
Send a private message to mortickles
Find all posts by mortickles
Add mortickles to Your Buddy List
#10 Report Bad Post
Old 08-18-2005, 02:40 AM

Light Speed Light Speed is offline

[X-Adept]
X-Adept

Join Date: Mar 2003
Posts: 919

Default Re: Love it!
Quote:
Originally Posted by mortickles
Works great! Does anyone know how this could be modified so the "detailed images" box only shows up if there are more than one detailed image? I have lots of products with only one image, and I now have one detailed image on top (nice) but a big old empty dialog box at the bottom. Looks like there is something missing.

Thanks again for the great mod!

There is probably a way to set an if statement at the detail dialog insert but I am too swamped to look into it. Maybe somebody else can take a stab at it?






wrap it with

Code:

{if $images[1].image} detailed include code {/if}

shimmy 12-21-2009 11:56 PM

Re: Customizing Default Home Page in Fashion Mosaic Template?
 
I was wondering if anybody knew how to make the welcome logo on Fashion mosaic into a Link. On my home page www.hatsandheadscarves.com I want the big welcome.jpeg image to link to either a static page or category page
Thanks


All times are GMT -8. The time now is 06:33 AM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.