Developing new Skins / Templates

Details of auction skins which people can install
Post Reply
RWAP
Site Admin
Posts: 748
Joined: Fri Jan 08, 2010 2:23 am
Location: Stoke-on-Trent
Contact:

Developing new Skins / Templates

Post by RWAP » Fri Feb 19, 2010 6:08 pm

We have created our own skin (template) for the site http://www.sellmyretro.com

Although we do not want to share this skin as it is for our own use, we thought it would be useful to let you know what we had to change.

We based the skin on the EnuukGreen template.

In themes\...\style.css

Find:

Code: Select all

caption,div#content>h2{
	font:bold 1.4em Arial, Helvetica, Verdana,sans-serif;
	padding:6px 10px 4px;
	margin:0;
    text-align:left;
	border-width:1px;
	border-style:solid;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
}
Change the settings in:

Code: Select all

	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
if you want more rounded borders to tables (captions) in your template. Unfortunately, this only works in Opera and Firefox - IE v8 does not provide an easy way of creating rounded corners (you have to use graphics to do it in Internet Explorer).

We also found we wanted to add rounded corners to the following code:

Code: Select all

.tagList li:last-child,
.tagList li.last{
    float:right;
    margin-right:0;
}
.tagList a {
    float:left;
    padding:5px;
    text-decoration:none;
    border:1px solid;
}
We changed it to:

Code: Select all

.tagList li:last-child,
.tagList li.last{
    float:right;
    margin-right:0;
	border-width:1px;
	border-style:solid;
	-moz-border-radius-topleft:10px;
	-moz-border-radius-topright:10px;
	-webkit-border-top-left-radius:10px;
	-webkit-border-top-right-radius:10px;
}
.tagList a {
    float:left;
    padding:5px;
    text-decoration:none;
    border:1px solid;
	border-width:1px;
	border-style:solid;
	-moz-border-radius-topleft:10px;
	-moz-border-radius-topright:10px;
	-webkit-border-top-left-radius:10px;
	-webkit-border-top-right-radius:10px;
}

The colour scheme then needs consideration - it is found in themes\...\default\color.css

There is the login section (top right of the page) to consider the colour of the background and the text:

Code: Select all

#header-login{
    background:#ebfbad;
	color:#80aa00;
}
There is then the header and footer sections of the sorts in tables (eg. where you have Auction | Auction Type) with arrows to sort the column.

Find:

Code: Select all

.tablesorter thead th,
.tablesorter tfoot th{
    background-color:#ebfbad;
    border-color:#00FFCC;
}
You may also wish to alter the caption at the top of tables:
Find:

Code: Select all

.tablesorter caption, div#content>h2{
	border-color:#00FFCC;
}
We changed this to fit in with some mods as well and to use the colour, so it became:

Code: Select all

.tablesorter caption, div#content>h2
div#content>h2.cLast{
	background:url(../img/bgCaption.gif) 0 100% repeat-x;
	border-color:#00FFCC;
}
We also found a section that relates to the header in tables when it is sorted, so you need to change the background colour here:

Find:
.tablesorter thead .headerSortDown,
.tablesorter thead .headerSortUp{
background-color:#ebfbad;
}


There is also the background colour behind the list of categories

Code: Select all

div.categories {
	background:#EBFBAD;
}
Then the colour of the buttons (eg Bid This) - the background colour and font colour:
Find:

Code: Select all

button,
a.button {
    border-color: #989898;
    background:#EEE;
}
You also need to alter the colour of the text which appears in captions to fit in with your new background image:
Find:

Code: Select all

caption,div#content>h2{
	color:#80AA00;
}

We also decided to use rounded buttons on the small tabs that are at the top of the messages page (inbox / Sent and Compose)
Find:

Code: Select all

/* Message List */
.tagList,
.tagList a {
    color:#444;
}
.tagList a.active{
    background:#ebfbad;
	color:#222;
}
We changed this to:

Code: Select all

/* Message List */
.tagList{
    color:#444;
}
.tagList a {
    background:url(../img/bgNav.gif) repeat-x scroll 0 0 transparent;
    color:#c0c0c0;
}
.tagList a.active,
.tagList a.hover{
    background:url(../img/bgNavOn.gif) repeat-x;
	color:#ffffff;
}
-----------------------------------------------------------------------------------------------------------------------------------------------
We also decided to add a bar to the Location and Shipment section when viewing details of an auction.

To do this, we added to the end of themes\...\css\color.css:

Code: Select all

/*Shipment on Offer Details*/
div#locationShipment>h2{
	background:url(../img/bgCaption.gif) 0 100% repeat-x;
	border-color:#00FFCC;
}
div#locationShipment>h2{
	color:#FFFFFF;
}

Then some code modifications:
In themes\default\offerDetails.php
In themes\default\offerDetailsFixed.php
In themes\default\offerDetailsStandard.php
In themes\default\offerDetailsLot.php

Find:

Code: Select all

            <h2><?=_('Location and shipment')?></h2>
Add below this:

Code: Select all

            <div class="tableLook">

Find:

Code: Select all

			<dt><?=_('Page view')?>:</dt>
                        <dd><?=$views?></dd>
			</dl>
Add below this:

Code: Select all

            </div>
---------------------------------------------------------------------------------------------------

Finally, the images we had to amend to get our new themes were placed into the folder themes\...\img\

They were:
bgMenu.gif
bgNav.gif
bgNavOn.gif
bgCaption.gif
bgCategories.gif

RWAP
Site Admin
Posts: 748
Joined: Fri Jan 08, 2010 2:23 am
Location: Stoke-on-Trent
Contact:

Re: Developing new Skins / Templates

Post by RWAP » Fri Mar 19, 2010 1:33 pm

In v1.8 there is a new section relating to tabs - these are the sections on offer details pages (such as description, payment and shipping details).

To amend these, you need to alter:

in themes\...\css\style.css

Code: Select all

/*** TABS ***/
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    border-bottom: 1px solid;
    border-left: 1px solid ;
    width: 100%;
}
(actually our main change to this was to amend the width to 96% to stop it running off the edge of the screen)

and

Code: Select all

ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    border: 1px solid ;
    border-left: none;
    margin-bottom: -1px;
    overflow: hidden;
    position: relative;
}
and

Code: Select all

ul.tabs li a {
    text-decoration: none;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid ;
    outline: none;
}

Then, in themes\...\default\color.css, you need to look at the following sections:

Code: Select all

ul.tabs li {
	border-color: #ccc;
	background: #e0e0e0;
}
ul.tabs li a {
	color: #000;
	border-color:transparent;		
}
ul.tabs li a:hover {
	background: #ccc;
}	
html ul.tabs li.active, html ul.tabs li.active a:hover  {
	background: #fff;
	border-bottom-color: #fff;
}

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest