WebsiteBaker Logo
  • *
  • Templates
  • Help
  • Add-ons
  • Download
  • Home
*
Welcome, Guest. Please login or register.

Login with username, password and session length
 

News


WebsiteBaker 2.13.8 is now available!


R.I.P Dietmar (luisehahne) and thank you for all your valuable work for WB
https://forum.websitebaker.org/index.php/topic,32355.0.html


* Support WebsiteBaker

Your donations will help to:

  • Pay for our dedicated server
  • Pay for domain registration
  • and much more!

You can donate by clicking on the button below.


  • Home
  • Help
  • Search
  • Login
  • Register

  • WebsiteBaker Community Forum »
  • WebsiteBaker Support (2.8.x) »
  • Bakery Shop »
  • Customizing layout [SOLVED]
  • Print
Pages: [1]   Go Down

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

apple

  • Guest
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 »
Logged

apple

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

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
Logged

apple

  • Guest
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.
Logged

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 »
Logged

apple

  • Guest
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.  :?
Logged

Offline dbs

  • Betatester
  • **
  • Posts: 8920
  • 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.
Logged
https://onkel-franky.de

apple

  • Guest
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
Logged

  • Print
Pages: [1]   Go Up
  • WebsiteBaker Community Forum »
  • WebsiteBaker Support (2.8.x) »
  • Bakery Shop »
  • Customizing layout [SOLVED]
 

  • SMF 2.0.19 | SMF © 2017, Simple Machines
  • XHTML
  • RSS
  • WAP2