There are multiple elements without any classes or id's making it impossible to select and style without affecting everything else... even worse some have hard coded styling embedded in the html which is really quite unF...... believable in today's CSS world! There should absolutely never ever be ANY empty element anywhere in ANY html code that makes it impossible to select in a unique way! But especially so with hard coded styling!

Furthermore the addressleft and addressright classes have been re-used for the Additional Details and Shipping Method sections when in fact it is necessary to have these with their own classes since the styling requirement is very different from an address line. The use of shared classes is one thing however this is definitely not the way to do it.

There can be a class for "address" then simply a left or right class to pull it in the direction you want e.g. "packingslip address right" or "packingslip address left". This can then be addressed either individually or shared... e.g.

.right{
float: right;
}

.left{
float: left;
}

.packingslip, .invoice, .printbody{
width:210mm;
margin:0px auto;
padding:0px;
}

.shipping-method{
padding:2px;
margin:0 auto;
}

.address{
padding:2px;
margin:2px;
}

.address.left{
width:40%
text-align:left;
}

.address.right{
width:60%
text-align:left;
}

Anything can then still be uniquely selected, if desired, for whatever reason,... e.g.

.packingslip.address.left
font-weight: bold;
padding-right:10px;
text-align:center;
}

However the classes must be properly html coded in the first place... e.g. "packingslip address right" "packingslip shipping-method right" "invoice tracking-number right"

Once this is done nobody every needs to bother Vince again to get the code changed! It can all be done in css and make the code so much simpler! So would appreciate re-visiting how this was implemented and add the proper classes to every element for the orders page... then carry forward a proper best practice and well defined standard for the implementation of CSS classes into all the code.

Many thanks,

John

Hi

Your post would probably be better if posted in the Suggestions forum as there's nothing I can answer here. Shall I move it for you?

Andy

Please feel free to review / rate our software

Hi Andy,

Yes it can be moved however I do think this is an issue that needs to be addressed more urgently than a normal suggestion since the current implementation was not well thought through and has caused all sorts of issues which were all preventable.

John

Yes, please, classes for everything.
This would save me a lot of hacks.

We produce custom nameplates and we have to copy text from the admin as the customer entered it.
We do have a hack to remove the colon and force the text down one line so it's easier to copy out, but not having the option name bold can make it harder to read and I can see errors coming from our graphics department without at least bolding the option name.
With some classes there, I can actually adjust the text the customer entered and make an improvement over what we had in the past, but for now, it feels like a step back.

PRE 6.8.1 VIEW


POST 6.8.1 VIEW


David
ECT Power User

Just to be clear CSS classes that are impossible to uniquely select therefore impossible to style are things like:

<div> Empty element... needs to be:
<div class="orders">

<div style="overflow:auto"> [red]Empty element with hard coding!!! ... needs to be:[/red]
<div class="orderheader button-row">

<div style="width:34%;float:left;text-align:center">[red]Empty element with hard coding!!! needs to be:[/red]
<div class="buttons left">

<div style="width:34%;float:left;text-align:center">[red] Empty element with hard coding!!! needs to be:[/red]
<div class="order-info centre">

<div style="width:33%;float:left;text-align:center"> [red]Empty elementswith hard coding!!! needs to be:[/red]
<div class="buttons right">
Then add the styling to the css file and get rid of the hard coding!

<div class="twocolumn"> [red]Missing hierarchy... needs to be:[/red]
<div class="packingslip billing-details twocolumn">

<div class="multicolcontainer"> [red]Missing hierarchy... needs to be:[/red]
<div class="packingslip billing-details multicolcontainer">

Plus all the empty div elements in the producttable and below need to have classes for every element!

Many thanks,

John

There is a release that has just gone out that should address a lot of these issues. John actually had some good points here even though he chooses to express them in his own inimitable style. The options now have classes, Dave so you should be able to add the bold back if you like. And even the colon is set via CSS so you can remove that now if you like using the custom css file rather than hard coding.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Vince - This is a great improvement however there are still some issues with not being able to select things individually and some updates to the html are required so that a hierarchy is added to each class so we can then style every single individual element
e.g. since the function is right there inside the element it is extremely logical to simply add the function:

<div class="addresses">
<div class="yyBilDet address">
<div class="yyBilDet colheading">
<h2><?php print $yyBilDet?>.</h2>
</div>
<div class="ordextra1 container">
<div class="ordextra1 left"><?php print $extraorderfield1 ?>:</div>
<div class="ordextra1 right" id="ordextra1"><?php print editfunc($alldata['ordExtra1'],'extra1',25)?></div>
</div>
<div class="ordName container">
<div class="ordName left"><?php print $yyName?>:</div>
<div class="ordName right" id="ordname">
<?php if(@$usefirstlastname) print editfunc($alldata['ordName'],'name',11).' '.editfunc($alldata['ordLastName'],'lastname',11); else print editfunc($alldata['ordName'],'name',25)?>
</div>
</div>
<div class="ordAddress container">
<div class="ordAddress left"><?php print $xxAddress?>:</div>
<div class="ordAddress right" id="ordaddress">
<?php print editfunc($alldata['ordAddress'],'address',25)?></div>
</div>
<div class="ordAddress2 container">
<div class="ordAddress2 left"><?php print ($isprinter?' ':$xxAddress2.':')?></div>
<div class="ordAddress2 right" id="ordaddress2"><?php print editfunc($alldata['ordAddress2'],'address2',25)?></div>
</div>
<div class="ordCity container">
<div class="ordCity left"><?php print $xxCity?>:</div>
<div class="ordCity right" id="ordcity"><?php print editfunc($alldata['ordCity'],'city',25)?></div>
</div>
<div class="ordState container">
<div class="ordState left"><?php print $xxAllSta?>:</div>
<div class="ordState right" id="ordstate"><?php print editspecial($alldata['ordState'],'state',25,'onblur="setstatetax()"')?></div>
</div>
<div class="ordZip container">
<div class="ordZip left"><?php print ($isprinter?' ':$xxZip.':')?></div>
<div class="ordZip right" id="ordzip"><?php print editfunc($alldata['ordZip'],'zip',15)?></div>
</div>
<div class="ordcountry container">
<div class="ordcountry left"><?php print ($isprinter?' ':$xxCountry.':')?></div>
<div class="ordcountry right" id="ordcountry">
</div>
</div>
<div class="ordPhone container">
<div class="ordPhone left"><?php print $xxPhone?>:</div>
<div class="ordPhone right"><?php print editfunc($alldata['ordPhone'],'phone',25)?></div>
</div>
<div class="ordExtra2 container">
<div class="ordExtra2 left"><?php print @$extraorderfield2 ?>:</div>
<div class="ordExtra2 right" id="ordextra2"><?php print editfunc($alldata['ordExtra2'],'extra2',25)?></div>
</div>
<div class="Clipboard container">
<div class="Clipboard left"></div>
<div class="Clipboard right"><input type="button" value="Copy to Clipboard" onclick="popupaddress('')" /></div>
</div>
</div>


This does not require any CSS changes to the current adminstyle.css which is already out there but it does allow things to be selected and styled on an individual basis on every element, which is an absolutely essential best practice... e.g. if someone wants to hide the telephone number on the packing slip or wants to make it bold or even to move it somewhere else then this can all be achieved with no more code changes.

It should in fact be standard practice to add the function name to every class for everything moving forward... and I do mean everything... since it will completely eliminate code changes where all display issues or formatting can all be re-solved via css.

John