Customize CSS HTML Elements

[Zain]

Hi,

I’m trying to customize the Compact Shopping Cart and looking at the code. While I’ve managed to change the text in the “languages/eng.php” file, I’ve noticed in the output that there’s
tags in the coding (as well as an H3 tag).

Please could the
‘s be replaced by something a little more useful? For example, if the custom text encased in <span> or <div> tags would be really helpful (especially if they had either IDs/classes applied). This way, each individual element can be perfectly pixel positioned.

Alternatively, could you let me know where I can change the appropriate code? Ideally, I’d rather not and would prefer to use CSS to control the HTML elements.

Cheers,

Zain

[Peter]

Hi Zain,

Might be easier if you can include a link to the page of the item you are trying to customise and what exactly you are trying to change?

[Zain]

Hi Peter,

I’m trying to customise the Compact Cart. You can see it here: http://www.themaverickshop.com/ (demo site, top right… Yes, this is the Compact Cart with some major tweaks! CSS Zen… ).

At the moment, I’ve encased the entire cart with an extra <div id="cart"> to gain a little more control of elements inside. This also means that if I add the cart to a sidebar widget, then the CSS only affects the top cart display. I’m also using a “display:none” to strip out all <br /> tags (and the <h3>… that contains nothing).

Ideally, if these were in a <span> (or <div>) then I could use a “display:block” and position each element (text, icon, link) exactly. It would be nice to have complete control over styling and layout – this is possible if the code is changed slightly to ensure text and images have either classes or ids added to them.

The issue isn’t so much about what’s possible or not (you can see what can be done) – it’s more about how easy it is to manipulate HTML elements with minimal CSS and ensuring pixel precision. Using <span/div> tags appropriately really does help… As for <br /> tags…? Well, I’ve never really been a fan of them as they don’t do much to help with controlling the layout! :$

Cheers,

Zain

[Zain]

…Additional thought:

Having a look at the “language/eng.php” file, could it be possible to provide some additional control here?

Consider, for example, the following:

define("ESTORE_ITEMS_IN_THE_CART", " Items");

This will usually display something like “3 Items”, when it’s rendered.

Taking the idea from WordPress, if it was tweaked to also provide additional “pre” and “post” tags, then it would be possible to use something like:

define("ESTORE_ITEMS_IN_THE_CART", " Items", "<span>", "</span>");

This would then display <span>3 items</span>. The element now has an appropriate <span> tag, and this would provide a greater degree of control for Developers looking for that level of precision.

Anyway… just a thought. The WP eStore plugin is great, superb… awesome, and I recommend it all the time! The reason I make suggestions is really to help make it even more powerful than it is.

Cheers,

Zain

[admin]

You can do this right now just by doing the following:

define("ESTORE_ITEMS_IN_THE_CART", "<span>Items</span>");

or

define("ESTORE_ITEMS_IN_THE_CART", "<span class='item_span'>Items</span>");

Now, you can customize it from the CSS file.

[Zain]

Hi Admin,

Thanks for the reply… although I’m just wondering:

Where the number that is generated before the text go?

Will it also be inside the <span> tag? (i.e. will it appear "3 <span>Items</span>" or "<span>3 Items</span>"?

If it does a regex match and adds it inside, then that’s okay. Somehow, I have a feeling that it might not… :$

Cheers,

Zain

[Author]

Posts