![]() |
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 |
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:
|
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 |
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; |
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; } /* |
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 |
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; |
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 |
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 |
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? |
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:
|
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} |
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} |
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.