ids generated by Getpaid templates contain dotted names and result in unusable html markup for css styling

12 views
Skip to first unread message

Armin Stroß-Radschinski

unread,
Mar 4, 2012, 5:07:32 PM3/4/12
to getpa...@googlegroups.com
Templates like ../Products.PloneGetPaid/Products/PloneGetPaid/browser/templates/cart-listing.pt create id and class markup in html that results in dotted names for ids.

If you try to adress these ids in css the part behind the first dot is interpreted as a class name. So you can never style objects with such ids. This is a major design mistake an may occur at other places as well.

How do we deal with this during refactoring?

Armin

I am using Products.PloneGetPaid svn checkout Revision: 3919 with Plone 4.1

Armin Stroß-Radschinski

unread,
Mar 5, 2012, 2:57:15 AM3/5/12
to getpa...@googlegroups.com
Addendum:
my words were a little bit hash due you may use unusual CSS selectors
to style these objects as well.

To hide the "Continue Shopping" button in the cart template by CSS you
can e.g. use:

/* this may survive an update, but the later example not */
body.template-getpaid-cart input[value|='Continue Shopping'] {
display: none;
}

To add a currency behind the numbers in the cart you can use:

/* Adds Euro currencies to the cart (not IE7 and Opera 5-6 safe!) */
body.template-getpaid-cart div.cart-listing td+td+td+td:after {
content: " Euro";
}

body.template-getpaid-cart div.getpaid-totals th+td:after {
content: " Euro";
}

For this I tweaked the template and added a class checkout-link to the
template code:

/* Make the checkout link big*/
#portlet-cart dd.checkout-link a {
font-size: 200%;
font-weight: bold;
}


But – if anything in the template changes, your styles are gone.

The current Getpaid CSS class and id markup is not best practise. So
use underscores, hyphens an CamelCase for CSS id and class in the
ususal way and they are your best friends.

Smart combinations of multiple cumulative class names for common
design elements are also welcome in spite of too much individual markup.

Armin

Am 04.03.2012 um 23:07 schrieb Armin Stroß-Radschinski:

> Templates like ../Products.PloneGetPaid/Products/PloneGetPaid/

> browser/templates/cart-listing.pt create id and class markup in html
> that results in dotted names for ids.
>
> If you try to adress these ids in css the part behind the first dot
> is interpreted as a class name. So you can never style objects with
> such ids. This is a major design mistake an may occur at other
> places as well.
>
> How do we deal with this during refactoring?
>
> Armin
>
> I am using Products.PloneGetPaid svn checkout Revision: 3919 with
> Plone 4.1

--
Armin Carl Stroß-Radschinski, Dipl. Designer
acsr industrialdesign, Landgrafenstraße 32, 53842 Troisdorf, Germany

Telefon +49 (0) 22 41 / 94 69 94, FAX +49 (0) 22 41 / 94 69 96
eMail a.stross-r...@acsr.de - http://www.acsr.de
UST. ID Nr: DE154092803 (EU VAT ID)


Reply all
Reply to author
Forward
0 new messages