WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Bakery Shop => Topic started by: apple on January 30, 2013, 06:35:56 PM

Title: Customizing layout [SOLVED]
Post by: apple on January 30, 2013, 06:35:56 PM

Hi, can someone show me how to customise the thumbnail item page. I would like to put rounded corner boxes with background color around each item but can't find where to do it. Thanks in advance

Title: Re: Customizing layout
Post by: apple on January 30, 2013, 10:39:28 PM

Hellooo, is anybody there? :?

Title: Re: Customizing layout
Post by: jacobi22 on January 30, 2013, 10:58:24 PM

if you know something about CSS, its very easy to customize the shop pages. bakery use tables. take a look to the source code of your overview page. the box around one product use the class mod_bakery_main clearfix, the pictures use the class mod_bakery_main_thumb_f and mod_bakery_main_thumb_f.
For this shop (http://www.dekogut-shop.de/pages/produkte/schwingfiguren.php) here i use a min-height for the rows in the table.
this page here use only a small border around the pics -> http://www.lamotoretta.it/pages/webshop.php

Code: [Select]

.mod_bakery_main_thumb_f {
    border: 1px solid gray;
    padding: 5px;
}
change the CSS-Code in the file:  modules / bakery / frontend.css

Title: Re: Customizing layout
Post by: apple on January 30, 2013, 11:05:43 PM

Hi, I do know CSS but cant figure out how to add a box round the item and description not just the product image. Beside that, I see that you can add additional price for option. How do you do that? Thanks for responding. Been waiting for awhile.

Title: Re: Customizing layout
Post by: jacobi22 on February 03, 2013, 02:43:19 AM

did you mean something like that in the added picture or only a rounded border around the pictures / thumbnals?

for a rounded border around the thumb, go to your backend, open the page with the shop, go to shop administration and there to EDIT CSS,

search in this file (bakery / frontend.css) for .mod_bakery_main_thumb_f

in original code is it

Code: [Select]

.mod_bakery_main_thumb_f {
        border: none;
}
change this to

Code: [Select]

.mod_bakery_main_thumb_f {
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px; /* CSS3 */
padding:10px;
background-color:#FEF7EA;
border: 1px solid #551A14;
}
change the values with your favorite color

the same Code works also for the 3 table Cells in the overview.
go to shop administration -> page setting and there to Overview (Header):
and change the code for the table like that

Code: [Select]

<table cellpadding="5" cellspacing="15" border="0" width="98%" class="overview_table">new is the CSS-class overview_table. i use here a cellspacing with 15 Pixel, normaly cellspacing = 0

go back to the frontend.css and build a new class like this

Code: [Select]

.overview_table td {
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari, Chrome */
-khtml-border-radius:10px; /* Konqueror */
border-radius:10px; /* CSS3 */
padding-right:10px;
width:30%;
background-color:#FEF7EA;
border: 1px solid #551A14;
min-height:300px;
customize the colors and min-height (if you need)

Title: Re: Customizing layout
Post by: apple on February 07, 2013, 01:04:30 AM

Thanks, jacobi22. That was really helpful. Thanks for the tips. My problem is that the outer box is not rounded as it should. It is still square box.  :?

Title: Re: Customizing layout
Post by: dbs on February 07, 2013, 05:48:27 PM

Hi, jacobi22 is not available in the next days.
With a link to your problem is help easier possible.

Title: Re: Customizing layout [SOLVED]
Post by: apple on February 07, 2013, 06:01:40 PM

I found out where the problem lies. Doh! Border should "0" in table. Thanks for your quick response :-D