If you are inserting HTML into the sidebar checkout region and the width is greater than 150 pixels, you will need to make some changes to your CSS file to ensure these regions do not overlap. You can do this by setting the margin-left attribute in the ys_pageBody.ys_sideBar to the same value of the min-width attribute in the ys_sidebar id of your CSS file.

Limitations and warnings

Use extreme caution when making changes to the values in the CSS file. Changes to attributes should be attempted only by merchants with advanced knowledge of CSS. Turbify Customer Care cannot assist in debugging faulty CSS entries. Merchants encountering problems with their CSS files are encouraged to revert to the default styles or seek guidance from a third-party developer.

Download the default file

In order to get started, you will first need to download the default checkout CSS file. If you have modified global style settings (such as font styles, section header or border styles) then your default checkout CSS file will reflect those attributes.

Tip: If you know the color values and fonts you wish to use, you should select the option to use global styles and then make all changes to these items in the Checkout & Registration Manager interface. You can then download your modified CSS file that will already contain your color values for any additional modifications you wish to make.

1. Sign in to your My Services page.

2. Click the Store link.

   

3. Go to Checkout & Registration Manager.
   
4. Go to Visual Customization.
   
5. Do one of the following:
   • Default - If you have not used Configurable Styles, click the Default tab and click the Download default CSS link to download the default CSS file.
     
   • Configurable Styles - If you have used Configurable Styles, click the Configurable Styles tab and click the Download global style CSS file link to download the CSS file including any changes you have made using the Visual Customization module. This option is preferred as it will have a record of any changes you may have made.
     
6. Save the CSS file to your computer.

You can now edit the CSS file to left-align checkout regions.

Adjust the margin of your main body

1. Open your CSS file in a text editor or whatever tool you use to edit CSS files (some HTML editors such as Dreamweaver have the ability to open and edit CSS files).

2. Locate the following lines appearing towards the top of your CSS file:
   
   #ys_sideBar { float:left;min-width:150px;width:auto !important;width:150px; }
   #ys_pageBody.ys_sideBar { margin:0 0 0 150px;border-left:1px solid #ccc; } 

   These lines correspond to the sidebar checkout region, and the page body when a sidebar region is enabled. Note: Your code may appear slightly different if you have made changes to global visual style attributes.

3. Ensure the values for min-width in the ys_sidebar ID and margin-left in the ys_pageBody.ys_sideBar ID match and reflect the width of your sidebar region. Note: This only applies if the width is greater than 150 pixels. This will ensure that the sidebar and page body do not overlap.
4. Save your CSS file and follow the instructions for uploading your custom file.

Upload your custom CSS file

After you have modified your CSS file, you can then upload the file to Checkout & Registration Manager. You can upload CSS files quickly so you can easily update your visual design for promotions or seasonal sales. If you upload the file without changing the name, Checkout & Registration Manager will append a number the file name (for example 1124085073___custom.css).

1. Sign in to your My Services page.

2. Click the Store link.

   

3. Go to Checkout & Registration Manager.
   
4. Go to Visual Customization.
   
5. From the Custom Styles tab, click the Browse button.
   
6. Navigate to and select your CSS file and click Open.
7. Click the Upload button.
   

Your custom CSS file uploads and is selected as the CSS file to use for your checkout pages. You can preview how your pages will appear using your custom CSS file by clicking the Save & Preview button.

See Also:

• Advanced template edits with CSS