tidying up the css/content file

About the template and stylesheet - and changing the menu
Post Reply
flukey92
Posts: 89
Joined: Thu Aug 11, 2011 9:39 am
Location: Bedford, UK
Contact:

tidying up the css/content file

Post by flukey92 » Thu Feb 09, 2012 11:34 am

Hi all,

Just thought id post it here while i look for the answers on the web :)
in my content file i use a lot of the tables that are used in my template, this amounts to a lot of coding when the table alone takes up say ~500 characters alone and theres going to be a good few thousand of them eventually.
What i am trying to do is just make it so that i still have the same output to the end user, but with less coding in my content file.
Ive already started by giving certain table cells a specific css definition so that all the headers use one style from the stylesheet rather than it being repeated a few thousand times, plus it makes any changes to the style a lot easier :)

here is what ive got soo far,
Can you let me know if theres anything i can remove altogether, or move to the stylesheet :)


THIS IS THE HTML CODE FOR CONTENT

Code: Select all

<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td><img src="img/t/s.gif" alt="" width="7" height="1" border="0"></td>
<td><img src="img/t/s.gif" alt="" width="10" height="1" border="0"></td>
<td><img src="img/t/s.gif" alt="" width="50" height="1" border="0"></td>
<td><img src="img/t/s.gif" alt="" width="70" height="1" border="0"></td>
<td><img src="img/t/s.gif" alt="" width="6" height="1" border="0"></td>
<td><img src="img/t/s.gif" alt="" width="7" height="1" border="0"></td>
<td><img src="img/t/s.gif" alt="" width="1" height="1" border="0"></td>
</tr>
<tr>
<td class="r1c3" colspan="2" align="left"><img id="1" src="img/t/1.jpg" alt="" name="1" width="17" height="10" border="0"></td>
<td class="r1c3" colspan="2"><img id="2" src="img/t/2.jpg" alt="" name="2" width="120" height="10" border="0"></td>
<td class="r1c3" colspan="2" align="right"><img id="3" src="img/t/3.jpg" alt="" name="3" width="13" height="10" border="0"></td>
<td><img src="img/s.gif" alt="" width="1" height="10" border="0"></td>
</tr>
<tr>
<td class="r2c1" align="left"><img id="4" src="img/t/4.jpg" alt="" name="4" width="7" height="15" border="0"></td>
<td class="p1" colspan="4" align="left" valign="top">Heading</td>
<td class="r2c6" align="right"><img id="5" src="img/t/5.jpg" alt="" name="5" width="7" height="15" border="0"></td>
<td><img src="img/s.gif" alt="" width="1" height="15" border="0"></td>
</tr>
<tr>
<td class="r2c1" align="left"> </td>
<td class="p2" colspan="4" align="left" valign="top">Subheading</td>
<td class="r2c6" align="right"> </td>
<td> </td>
</tr>
<tr>
<td class="r2c1" align="left"> </td>
<td class="m" colspan="4" align="left" valign="top">Image</td>
<td class="r2c6" align="right"> </td>
<td> </td>
</tr>
<tr>
<td class="r2c1" align="left"> </td>
<td class="m" colspan="4" align="left" valign="top">Description / Content</td>
<td class="r2c6" align="right"> </td>
<td> </td>
</tr>
<tr>
<td class="r3c3" colspan="2" align="left"><img id="6" src="img/t/6.jpg" alt="" name="6" width="17" height="10" border="0"></td>
<td class="r3c3"><img id="7" src="img/t/7.jpg" alt="" name="7" width="50" height="10" border="0"></td>
<td class="r3c3" colspan="3" align="right"><img id="8" src="img/t/8.jpg" alt="" name="8" width="83" height="10" border="0"></td>
<td><img src="img/s.gif" alt="" width="1" height="10" border="0"></td>
</tr>
</tbody>
</table>  
THIS IS THE CSS CODE THAT IS REFERRED TO

Code: Select all

.r1c3{
background-image: url(/templates/RJS/images/navz_r1_c3.jpg);
}
.r2c1{
background-image: url(/templates/RJS/images/navz_r2_c1.jpg);
}
.r2c6{
background-image: url(/templates/RJS/images/navz_r2_c6.jpg);
}
.r3c3{
background-image: url(/templates/RJS/images/navz_r3_c3.jpg);
}
td.p1{
line-height : 120%;
font-family : "Arial Narrow", Helvetica, sans-serif;
font-size : 36px;
font-weight : normal;
text-align : center;
margin-bottom : 6px;
margin-top : 0;
color : #9dbecf;
cursor: default;
width: 100%;
background-color: #ffffff;
}
td.p2{
line-height : 120%;
font-family : "Arial Narrow", Helvetica, sans-serif;
font-size : 24px;
font-weight : normal;
text-align : center;
margin-bottom : 6px;
margin-top : 0;
color : #9dbecf;
}
td.m{
text-align : center;
width: 100%;
background-color: #ffffff;
}  
ive already shortened all the image references so before it was something like

Code: Select all

<img src="templates/RJS/Images/template_r1c1.jpg">
and now it is just

Code: Select all

<img src="img/t/1.jpg">
This is the output of that particular code which i would like to use
[ external image ]
can be seen here http://test.rjselectronics.com/?PRIVATE:H1

Just seen since ive checked through the css and referred to it that there are 4 more images which i could shorten the url, however would this make much of a difference seeing as it is already in the css (1file) and not repeated hundreds of times in the content file?

P.S. Will check wiki / instructions for the editor now, but anyone know if theres a way to add a custom button which will add this to my page. ie. click to insert "table1", and it outputs that content shown above automaticcally on my page?
Currently for templates such as that one i just have a "test/template" website, where i copy and paste any of my frequently used codes/content


Many thanks in advance

Flukey / Rob
RJS Electronics Ltd - LED Push Switches, LCD Programmable Keys, Anti Vandal Push Buttons, Relays, Custom Cable Assemblies
Visit my Web Hosting / Design website here - www.flukedesigns.co.uk

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: tidying up the css/content file

Post by cmb » Thu Feb 09, 2012 12:32 pm

Hi flukey,
flukey92 wrote:but anyone know if theres a way to add a custom button which will add this to my page. ie. click to insert "table1", and it outputs that content shown above automaticcally on my page?
That's basically possible with tinyMCE and CKeditor throught the use of templates, see http://www.tinymce.com/wiki.php/Plugin:template resp. http://docs.cksource.com/CKEditor_3.x/H ... _Templates.

But you might consider using a simple <div> instead of the <table>. In your case the table's only purpose is to display the rounded border, which is possible with the CSS 3 property border-radius (see http://www.css3.info/preview/rounded-border/). The only drawback of this approach: it doesn't work on IE < 8, where the border-radius will be ignored.

Christoph
Christoph M. Becker – Plugins for CMSimple_XH

flukey92
Posts: 89
Joined: Thu Aug 11, 2011 9:39 am
Location: Bedford, UK
Contact:

Re: tidying up the css/content file

Post by flukey92 » Thu Feb 09, 2012 3:30 pm

yeah thats correct the only purpose is for the rounded border.
If i were to use a DIV for the content i think i will wait a while but bear this in mind,
The reason is that the tables being used in the content are an exact mimic of the tables in the template.
So if i change one i have to change both and ill wait a week or so before i start playing around too much :)
PLUS if it wont work pre: IE8 then this may not be good enough for me afterall as the website is aimed at customers worldwide and i have no idea who uses what browser :(

KR

flukey

o.s. ill check that plugin template :) sounds good
RJS Electronics Ltd - LED Push Switches, LCD Programmable Keys, Anti Vandal Push Buttons, Relays, Custom Cable Assemblies
Visit my Web Hosting / Design website here - www.flukedesigns.co.uk

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: tidying up the css/content file

Post by cmb » Thu Feb 09, 2012 4:17 pm

Hi flukey,
flukey92 wrote:PLUS if it wont work pre: IE8
It doesn't even work in IE8 (I should have written IE <= 8 :oops:)! MS is sometimes somewhat "slow" when it comes to adapting web standards. ;) Browsers that doesn't recognize border-radius will display cornered borders. But it's possible to have rounded borders (and even more fancy ones) with some JS. For CMSimple that's easy to have with the Corners_XH plugin.

About the market share of browsers: see e.g. http://www.netmarketshare.com/browser-m ... pcustomd=0
flukey92 wrote:ill check that plugin template :) sounds good
You can see a demo on http://www.tinymce.com/tryit/full.php. Click the 4th button from right in the 4th row.

Christoph
Christoph M. Becker – Plugins for CMSimple_XH

flukey92
Posts: 89
Joined: Thu Aug 11, 2011 9:39 am
Location: Bedford, UK
Contact:

Re: tidying up the css/content file

Post by flukey92 » Fri Feb 10, 2012 2:15 pm

WTH!!

Firefox only covers 9% of the market share!

Looks like im going to have to send out a survey to all my customers.

from what i can see here i need to start thinking more when it comes to my website working on the majority of platforms

Microsoft Internet Explorer 8.0 27.45%
Chrome 16.0 15.90%
Microsoft Internet Explorer 9.0 11.64%
Firefox 9.0 8.51%
Microsoft Internet Explorer 6.0 7.93%
Microsoft Internet Explorer 7.0 4.90%
Firefox 8.0 4.73%

So as a standard, to cover worldwide market share my website needs to be compatible for the following browsers and their succesors
IE 6+
FF 8+
Chrome 16+

This will be fun -.-

kr

flukey
RJS Electronics Ltd - LED Push Switches, LCD Programmable Keys, Anti Vandal Push Buttons, Relays, Custom Cable Assemblies
Visit my Web Hosting / Design website here - www.flukedesigns.co.uk

flukey92
Posts: 89
Joined: Thu Aug 11, 2011 9:39 am
Location: Bedford, UK
Contact:

Re: tidying up the css/content file

Post by flukey92 » Fri Feb 10, 2012 2:33 pm

back to the original topic, maybe i will still try using border radius/cornered borders,

and re: the template plugin i had a scout around for how to install it on the tinymce website, and came across questions similar to mine, and the answers provided were to read through the "tinymce guide for dummies" so i think i better look through that :)

Thanks Guys

Flukey
RJS Electronics Ltd - LED Push Switches, LCD Programmable Keys, Anti Vandal Push Buttons, Relays, Custom Cable Assemblies
Visit my Web Hosting / Design website here - www.flukedesigns.co.uk

Post Reply