CSS – mccormicky

LightSpeed Webstore Customization Tip: change default button value, CSS class

Hey there customizers,

here’s a small trick I figured out about changing button values ( the text of a button, e.g., “Submit” ). A trick I turned up when I was stressing about having to edit a core file in order to deliver the same copy as was indicated in the mockup.

If you’re working as much as me, you can’t possibly keep track of every line you edited in core of every site you hand off when prepping for webstore version upgrades ( for every site you maintain). Not that you should ever edit core – but, unfortunately there’s a lot of plain text in LightSpeed Webstore that’s sequestered in core files and sometimes you have to.

Most clients have no idea that most of this stuff is in core – they see “Shipping is the same as Billing address” and they want it to read “My Billing & Shipping Address are the Same for This Order”. While I can go into /where-webstore-is-installed/xlsws_includes, find the file that contains the line “Shipping is the same as Billing address” and edit it, I’m not supposed to. Not that it will break stuff (editing plain text rarely breaks anything) but imminent upgrades will possibly overwrite the edit and I might not remember to add it back.

Because of this issue I’m always looking for ways to edit stuff without touching core so when I saw this line in /templates/deluxe/promo_code.tpl.php which renders the submit button for the Promo Code input field:

[php]<?php $this->btnPromoVerify->Render(‘Text=’._sp("Apply Promo Code")) ?>[/php]

I tried it out on other render hooks and found out I could use it practically anywhere I wanted to. I could also use this other handy line I’d seen sprinkled about in template files which generates the CSS class for a HTML element such as for the Login/Register buttons in
/templates/deluxe/checkout_login_register.tpl.php:

[php]
<?php $this->butLogin->Render(‘CssClass=button rounded’) ?>
<?php $this->butRegister->Render(‘CssClass=button rounded’) ?>
[/php]

I combined the lines in one render hook and was real (stupidly pleased) with myself. Example:

[php]
<?php $this->whatEver->Render(‘CssClass=awesome’,
‘Text=’._sp("Awesome")) ?>
[/php]

Keep your eyes peeled for $this->something->Render() in your templates and try it out for yourself.

Importing Google Web Fonts, LightSpeed Web Store & SSL

As I am sure you know, SSL is very sensitive. Every link href, script src and img src in the document must be HTTPS for the page to be delivered completely secure.

If not, the encryption is partial and you may receive warnings about it. Worse, your customers will see warnings about it and might leave your site before buying or registering. So it’s better to never to let this happen, if possible. Especially in a production site (live). Goes without saying, I guess.

Anyway my latest thing is using Google Web Fonts because although I worship, love and adore WP-Cufon and Cufon and usually use them whenever I can I can’t use Cufon site-wide. Well, I could but not in good conscience if I care about how long the page takes to load and all of that.

Most of my clients choose 1 Universally available font for their main Body font and a couple of Specialty fonts for titles,headings and menus, to dress things up a bit. But my latest client wanted a Specialty font for their main Body font and so I found 3 compatible fonts in Google Web Font’s library. I used the @import in my main stylesheet and thought everything was going rather well.
Until we had to start checking SSL and wouldn’t you know it it wasn’t kicking in all the way.
Something was not getting encrypted and I could not figure out what it was.

Like I do whenever this kind of thing happens I reverted the template back to a default Web store Template and SSL kicked in all the way. After I looked through my customized files I still couldn’t find anything off…

Then I checked my main stylesheet and at the top was:

@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700);
@import url(http://fonts.googleapis.com/css?family=Alice);
@import url(http://fonts.googleapis.com/css?family=Kameron:400,700);

AHA! I switched it to:

@import url(https://fonts.googleapis.com/css?family=Rokkitt:400,700);
@import url(https://fonts.googleapis.com/css?family=Alice);
@import url(https://fonts.googleapis.com/css?family=Kameron:400,700);

And SSL kicked in all the way. JOY.

So don’t be silly like me. If you import fonts like this make sure the url is https. Good thing Google has SSL up the wazoo so this is not a problem. Awesome.

Internet Explorer and Z-Index and me

I’m sure you’re already aware of this but IE is a pain in the butt. I just spent more time than I like to admit trying to figure out why my dropdown menu would not stay open (on mouse hover) over my stupid slideshow. At first I thought it was because my stupid slideshow had a z-index value that was too high. So I spent time messing that up. But then I noticed a very curious thing: when I added a background color to the ul, the menu stayed open over the slideshow.

Hmmm.

I had added a background color to the ul but I’d used rgba for a transparent-ish background.Lower versions of IE(less than IE9) ignore rgba and I knew this. What I didn’t know, shockingly enough was that lower versions of IE will create a bug when they have an element with z-index and no background color. So if you want your drop down menus to stay open on hover over another element (no matter if it has z-index or not) you better add a background image or a color or both.

IE is so EVIL!!!!!!!!!!!!!!!!!

How to TIP: Customizing Xsilva Lightspeed Web Store

If you’re given the assignment to customize Web Store you might start out with the feeling that you are limited in what you can do as far as Web Store’s templating system goes.
We all know by now that each tpl.php in each template package – Deluxe or Framework – is included by one main file: index.tpl.php. That means that this file runs the whole show for every section of the online store. This means that if you add a block to index.tpl.php and you don’t know how to use PHP to hide it and you don’t want it to show on every section, it will.

Luckily, we can use the unique form ID that Web Store creates for Categories, Products, Cart and Checkout and more.
Because the form element that generates a unique ID is listed in the document right after the body element we can use it like we would use a unique id or class in the body element.

List of XLSWS Form IDs:
#xlsws_product = a single product details page
#xlsws_category = a single category page
#xlsws_cart = the edit cart page
#xlsws_checkout = the checkout page
#xlsws_gregistry = a single wishlist page
#xlsws_myaccount = an account page
#xlsws_custom_page = a single custom page
#xlsws_sitemap = the site map page
#xlsws_contact_us = the contact us page

Practical application:

Say you’ve got a block of content and you added it to index.tpl.php but for whatever reason you don’t want this content to show on a single product details page.

You could add this to webstore.css

[css]
#xlsws_product #block-you-dont-want-toshow {display:none;}
[/css]

Try it out for yourself & good luck with all your projects!

List of XLSWS Form IDs: