Editing Layouts in Extended Information Window

[Chris Naylor]

Can anyone offer any advice onediting layouts in the Extended Information pop-up window?

Mainly, I would like to add indents or padding to the text in the pop-up window as, at present, it is ranged hard left and could do with some padding around it for appearance.

But it might also be sueful to alter other aspects of the layout.

Readng other posts, I have seen the very useful post "Extended Information Pop Up Page Colors" from Peblaco, which showed how to insert a style to alter page colours byplacing it immediately prior to the </head> tag in the default extended information page layout.

But I can't get that same style in that same position to edit other elements. such as text-indents or padding.

Any advice would be appreciated.

[NormanRouxel]

Your popup pages have a body tag with an ID of extended-info.

You can set the CSS for this by going to the Design tab, clicking Current Stylesheet and adding the following at the bottom:

#extended-info {padding:20px !important;}

Change the 20 as required.

[Chris Naylor]

Many thanks for your posting - that was excellent!

One thing that slowed me down a bit is that the padding doesn't show in the Sellerdeck preview pane - it was only when I published to to a Test site to check that I saw it woreked well!

[NormanRouxel]

A minor SellerDeck bug. The Extended Info preview doesn't seem to get the updated CSS until you move off the current product and select another.

A full Preview also gets the updated CSS.

[Chris Naylor]

Many thanks for your response.

I can't get it to preview properly within Sellerdeck whatever I do - Preview Current Page doesn't show it accuately either.

However, if I publish it (in Test Mode) and then use View Online Website, it displays the changes, so that's what I've been using to check it.

Having put some padding in, I now find though that the right hand side of the text is truncated by the right hand window!

[NormanRouxel]

Try:

#extended-info {margin:0 !important;}
#extended-info * {margin:20px !important;}

The first line gets rid of the horizontal scrollbar in the body tag and the second applies a margin to all elements within it.

[Chris Naylor]

Many thanks for your posting - I certainly appreciate all the trouble you are going to!

I tried out the rwo new lines you suggested with brilliant results!

Either of them seems to get rid of the horizontal scroll bar, so that the text isn't clipped to the right hand side.

And they provide a decent margin around the text for appearance sake.

Overall, I find the second line on its own does a very good job, without the earlier line for padding:

#extended-info * {margin:20px !important;}