Foundation Skin Formatting

[jka]

I have almost buttoned up the look and feel of the Foundation skin such as Form etc etc.  Most of the changes happens in foundation.css. 

Here is where I would like some guidance. 

1. The cart image on the top is way too small. How many make it bigger?

2. I have attached a screenshot of the checkout form. It looks way to the left. How can I bring the form to the center but still left-justified.

3. Need to Pop-up Terms and Condition, Copyright etc instead of opening in new tab.

Attachment enclosed.

[bsmither]

2. You might try this:

In your copy of
content.checkout.confirm.php
you have made edits. A sample is (single line split for readability):

  <div class="row">
    <div class="small-6 large-3 columns">
      <label for="user_first" 
             class="show-for-medium-up">
        {$LANG.user.name_first}
      </label>
      <input type="text" 
             name="user[first_name]" 
             id="user_first" 
             required value="{$USER.first_name}" 
             placeholder="{$LANG.user.name_first}  {$LANG.form.required}" 
             autocomplete="given-name">
    </div>
  </div>

The <div> that specifies the column count is to show 6 (of 12) for small or medium screens, and 3 (of 12) for large screens. The form elements are as wide as those 6 or 3 columns.

Considering you didn't use all 12 columns for these rows, you can try to add the following to each of those rows:

  <div class="row">
    <div class="small-1"><!-- spacer -->&nbsp;</div>
    <div class="small-6 large-3 columns">

There are other ways to get the same effect.

1. The Font-Awesome system has scale factors.

In box.basket.php, find:
<i class="fa fa-shopping-cart"></i>

Change to:
<i class="fa fa-shopping-cart fa-2x"></i>

3. That will be complicated, but certainly do-able.

[jka]

Thanks BSmither. I managed to get the Cart Image bigger 2x & even tried 3X. Nice. But the Amount still stays tiny. Not sure where to look to make it also 2X. 

 

[bsmither]

Foundation makes no CSS rule that specifies a font size. In absence of this, the browser uses the font size you have specified in the browser's options pages for default fonts. For me, that value is 13px.

Foundation then takes that size as the 'root' size, and makes the font size you eventually see a factor of it. So, we will make a rule that says to multiply the root size by 1.2 rems (was 0.8125 rems).

In cubecart.default.css, add this rule:

#basket-summary { font-size: 1.2rem;}