Blog

Here is a tutorial that was requested by a member that wanted to add a 3rd column to place html tags and images into the right side of every page. I am not going to lay that is going to be one of the hardest tutorials that I have had to offer.

You also must know how to edit RTML and code CSS for this tutorial.

This is only for the Yahoo! Store Editor V3.

Login into your store manager >> Store Editor >>

On the store editor tools is a red arrow on the right to open the “Advanced Editor”. Once the second line of options show up if not already click on the “templates” or “storetemplates” button. If you are on your front page in the editor it should be defaulted to your home page template.

Now you are going to want to click the new button in the template and add a “CALL”. You are going to have play with the location of the RTML to get it right where you would like it to show up in the pages. Normally you would want to place it on the right side, but not everyone has room on that side so you could place in on the left as well. I will now show you what you will want it to look like. Be sure to add the template name of the next template that we are going to be making in there like shown below.

Now that you have the “:promote” template called up we will need to make that template. There are two different types of this you could do for this. You could have an image render and show in the 3rd column or just have a text field in there that will show the HTML in that field as well. I will show you want you will need to put into the promote template to get either or both to work.

Notice how I have mine set to float left in the first line, if you would like yours to float to the right just replace the word “left” with the word “right”.

Create a new template by going back to your templates and clicking new template. Now for the name we are using “Promote” in this tutorial but you may use anything you like, but remember to have the call up and the template name match.

Ok, in the second DIV in the RTML above, is the codes to have an image show with a link.

In the 3rd DIV in the RTML above, is the code to show just an image without a link to it.

In the 4th DIV in the RTML above, is the code that will show the text field that has your HTML code in it.

*You may use as many of them as you will need to add what you will need to show.

Now, if you notice in the RTML above there are the “@front-ad1″ and “@front-text” you will need to add these to your variables page.

Store Editor >> Variables

To add an image you will need to Define New Variable with a “image” type.

To add text or html you will need to Define New Variable with a “text” type.

Any names that you give the New Variables be sure to replace or add them to the “Promote” template at the @’s.

—————————————————–

Now that we have the RTML in place you are going the need edit and play with the css for the main contain pages.

You will need to adjust the width of the “bodyshell” and the “bodycontent” in the base.css to fit the 3rd column.

[alert_red] Disclaimer: I will not be responsible for any and all miss happens to your store while you are editing your website. This is a tutorial you could us at your own risk. [/alert_red]

If you have any questions I will do my best to help. Please reply below, Any and all questions about this tutorial that are emailed to me I will automatically trash.