Announcement

**Duncan Rounding** · 08-Feb-2013, 11:29 AM

Where/what file did you add the styling to?

**mash** · 08-Feb-2013, 11:41 AM

I have try a couple of places,

Design tab > Current style sheet
Design libruary > Web page outer layout > Main stylesheet at the end before themes
external reference

I am left with the external file, added the file to 'Additional Files..' I also load it to the root and put a full link just in case SD13 wasn't taking it up during upload (still seen at trayshop.css

Looking at it I did wonder if I should have id the table instead of a class and need to format the few cells when I want to remain blank (they have no date) so want them to be transparent if you like.

Thanks M

**mash** · 08-Feb-2013, 01:11 PM

It is not as styled as I intended (Ideally the style result.

Also if you are using a separate CSS file it should not have:
Code:

<style type="text/css">
and
Code:
</style>

These are HTML tags and should only be used if the CSS styles are directly inside the header of the HTML layout.

I did spot this, I had been testing the layout in an html file with the style placed in the header, using note pad to write the html.

I thought that if I used classes or id and define that in a CSS, it would stop the default settings. Should i wrap it in a <div>?

I appreciate that styles can be overwritten, last style being applied.

Thanks M

**NormanRouxel** · 08-Feb-2013, 01:33 PM

There are many Gotcha's when using tables within Products and Fragments in 2013. Consider this trivial table that you can paste into a Fragment or Product Details:

Code:

!!<
<table border=1>
	<tr><td>One</td><td>Two</td></tr>
	<tr><td>Three</td><td>Four</td></tr>
</table>
>!!

Here's how it looks (pretty much what was expected) in a Product in the Elegance Theme:

Click image for larger version

Name: Image1.jpg
Views: 1
Size: 11.2 KB
ID: 544648

And here's it being munged in a Fragment:

Click image for larger version

Name: Image2.jpg
Views: 1
Size: 14.5 KB
ID: 544649

You may need to read up on tag specific CSS resets to make sure that code you add only uses the styles you want.

**mash** · 08-Feb-2013, 01:36 PM

Looking in to the id and class and applying them to a table, i have just found this Why CSS styling is for tables too.

Interestingly, the path taken from the stylistic formatting embedded in structural markup to CSS style was what I did. I hadn't thought about the styling hiding the content of the table but CSS table is clearer.

I still haven't tried id on the table to see if I get the control I want but have to do other work first!

**mash** · 08-Feb-2013, 01:43 PM

Thanks Norman, your reply happened as I was writing my reply to my last post, those images are just what is happening to my table.

I was researching id and class hence my last post with link to that article, I will research CSS resets and see if I can get the table to jump through the style hoop I want.

I was very chuffed developing the table, code is driven through spreadsheet, just need to sort the styling.

M

**mash** · 08-Feb-2013, 01:58 PM

It may not affect your custom styles but if it does you can adjust the font or margin in your styles.

I may be at an impasse on styling as I want to change more than font or margins, the whole point of the table was to show the info of dispatch in a simple but easy way.

At the moment it looks like a bingo card not a useful calendar!

CSS is the way forward, will try again later.

Thanks M

**mash** · 09-Feb-2013, 12:29 AM

Right, I have forged on and made progress, formatting is now working pretty much as planned: Formatted tables.

Changing from a class to an id worked so a typical code for the table is:

Code:

<table id="trayshopcalendar" summary="Calendar for Delfand's trayshop showing dates, week numbers and any dispatch days for April 2013">
<caption>April 2013</caption>


<thead>

<tr>
<th>WK</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tr>
<thead/>

<tbody>

<tr>
<td  class="wkcell"><a  href="http://www.delfland.co.uk/store/Tray-Shop-Week-14.html">14</a></td>
<td class="std-day">1</td>
<td class="std-day">2</td>
<td class="disp-day">3</td>
<td class="std-day">4</td>
<td class="std-day">5</td>
<td class="we-plain">6</td>
<td class="we-plain">7</td>
</tr>

<tr>
<td class="wkcell"><a  href="http://www.delfland.co.uk/store/Tray-Shop-Week-15.html">15</a></td>
<td class="std-day">8</td>
<td class="std-day">9</td>
<td class="disp-day">10</td>
<td class="std-day">11</td>
<td class="std-day">12</td>
<td class="we-plain">13</td>
<td class="we-plain">14</td>
</tr>

<tr>
<td class="wkcell"><a  href="http://www.delfland.co.uk/store/Tray-Shop-Week-16.html">16</a></td>
<td class="std-day">15</td>
<td class="std-day">16</td>
<td class="disp-day">17</td>
<td class="std-day">18</td>
<td class="std-day">19</td>
<td class="we-plain">20</td>
<td class="we-plain">21</td>
</tr>

<tr>
<td class="wkcell"><a  href="http://www.delfland.co.uk/store/Tray-Shop-Week-17.html">17</a></td>
<td class="std-day">22</td>
<td class="std-day">23</td>
<td class="disp-day">24</td>
<td class="std-day">25</td>
<td class="std-day">26</td>
<td class="we-plain">27</td>
<td class="we-plain">28</td>
</tr>

<tr>
<td class="wkcell"><a  href="http://www.delfland.co.uk/store/Tray-Shop-Week-18.html">18</a></td>
<td class="std-day">29</td>
<td class="std-day">30</td>
<td class="disp-day">31</td>
<td class="std-day"></td>
<td class="std-day"></td>
<td class="we-plain"></td>
<td class="we-plain"></td>
</tr>

<tbody/>
<table/>

And the style sheet is:

Code:

/* CSS calendar style */

table#trayshopcalendar {
	/* declarations for Monthly Calendar showing dispatch days and week numbers */
	width: 320px;
	padding: 2px;
	text-align: center;
	border-spacing: 1px;


}

table#trayshopcalendar th {
	background: #35836F;
	font-weight: bold;
}

table#trayshopcalendar caption {
	color: #35836F;
	font-size: x-large;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 5px;
	font-weight: bolder;

}
td.wkcell {
	background: #35836F;
	font-weight: bold;
}


td.std-day {
	background: #CCDCDC;
	font-weight: normal;
}

td.disp-day  {
	background: #35836F;
	font-weight: bold;
}
td.we-plain {
	background: ;
	font-weight: normal;
}
td.we-coloured {
	background: #CCDCDC;
	font-weight: normal;
}


/* CSS calendar style */

All working.

I wanted to move the table off the left side, thought to use

Code:

position:relative;
left:20px;

In the table#trayshopcalendar but it does not work, I must being doing some thing wrong with that.

Also the cells are slightly different size but minor issues compared the original problems this morning.

Thanks M

**mash** · 09-Feb-2013, 11:27 PM

I didn't have any luck with margin, so I used the div to move it and that worked.

Thanks for pointing out the mistakes, late nights and coding don't quite match!

Changed the link colour to white so makes it easier to see.

M

**jont** · 28-Mar-2013, 05:02 PM

You may wish to change the background green colour on the "wk" column as it is very similar to the delivery days colour .. maybe a grey colour to differentiate it as a "system colour"... remember ... people are stupid and will easily confuse no matter how obvious it seems to you!!

Announcement

CSS styling, I am confused

CSS styling, I am confused

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment