WebsiteBaker Support (2.8.x) > Bakery Shop

Customizing layout [SOLVED]

(1/2) > >>

apple:
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

apple:
Hellooo, is anybody there? :?

jacobi22:
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 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: ---.mod_bakery_main_thumb_f {
    border: 1px solid gray;
    padding: 5px;
}
--- End code ---

change the CSS-Code in the file:  modules / bakery / frontend.css

apple:
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.

jacobi22:
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: ---.mod_bakery_main_thumb_f {
        border: none;
}
--- End code ---

change this to

--- Code: ---.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;
}
--- End code ---

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: ---<table cellpadding="5" cellspacing="15" border="0" width="98%" class="overview_table">
--- End code ---
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: ---.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;
--- End code ---

customize the colors and min-height (if you need)

Navigation

[0] Message Index

[#] Next page