Author Topic: Customizing layout [SOLVED]  (Read 2960 times)

Offline applepie

  • Posts: 432
Customizing layout [SOLVED]
« 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
« Last Edit: February 07, 2013, 06:03:29 PM by applepie »

Offline applepie

  • Posts: 432
Re: Customizing layout
« Reply #1 on: January 30, 2013, 10:39:28 PM »
Hellooo, is anybody there? :?

jacobi22

  • Guest
Re: Customizing layout
« Reply #2 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 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

Offline applepie

  • Posts: 432
Re: Customizing layout
« Reply #3 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.

jacobi22

  • Guest
Re: Customizing layout
« Reply #4 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)

« Last Edit: February 03, 2013, 02:52:30 AM by jacobi22 »

Offline applepie

  • Posts: 432
Re: Customizing layout
« Reply #5 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.  :?

Offline dbs

  • Betatester
  • **
  • Posts: 8668
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Customizing layout
« Reply #6 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.

Offline applepie

  • Posts: 432
Re: Customizing layout [SOLVED]
« Reply #7 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

 

postern-length