How to add a full background color to eBays listing maker?

[mycheaperstuff]

Hi. With so many scrolling promotion banners on listing pages, I think it is too difficult for buyers to find the description on the page. I want to make it easier to find.

The first simple approach I thought of was adding a background color to the listing.

Is it allowed?

How is it done? 

I know very little HTML (equivalent to my knowing  "Hello, my name is ___" in four languages). But am not daunted by coding.

BTW I don't use listing templates - I find the graphics part of them annoying. But if there is a plain color template that someone can suggest, I will try it.

Thank you all.

[shipscript · Accepted solution]

@mycheaperstuff 

Here is a basic listing template that will put a colored border and background around your description.

<!-- begin template -->
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<div style="width:100%; padding:5% 0; background-color:#BA3A5B;  ">
<div style="margin:auto; max-width:850px; ">
<div style="margin:5%; padding:.1%; background-color:pink;border-radius:30px; box-shadow: 5px 5px 5px 0 rgba(0,0,0,.4);">
<div style="margin:4%; padding:4%; background-color:white; border-radius:20px; font-family:arial; box-shadow: inset 5px 5px 5px 0 rgba(0,0,0,.4);">
<!-- content starts below -->

...Write description here...

<!-- content ends above -->
</div>
</div>
</div>
</div>
<!-- end of template -->

The code is small enough that you can add it to an "insert" on eBay's description editor, where you can recall it each time you write a different description.

I've used 3 colors. A deep background color is used to get past the page clutter, and then the description is in a rounded box floated in the middle of that background.

It would be very easy to change the colors, the roundness, and the size of the borders and content. This is just an example that we can use as a starting point if you have a different taste in mind.

[shipscript]

Here is an even simpler one that removes the border...

[mycheaperstuff]

Thank you!

I like both solutions. I like the color too - compliments the rhinestones in my avatar! (but you knew that!

And you even used one of my items!

I'm going to try it out on that item!

[shipscript]

I see it here. It appears to have worked.

https://www.ebay.com/itm/153570870270

Looks fine in my Firefox browser. I didn't code it to be backward compatible to older browsers, so the shadowing may not work in some.  Have you tried it on mobile? It should flex for mobile as well.

Let me know if you want to adjust the colors, particularly the "pink". We could fine tune that using a hex code instead of default "pink".

[mycheaperstuff]

So I tried out the template myself.

I got good results... at first. I mean it looked just like your example.

Then I decided to edit the listing description just a bit.  My changes caused the frame to split or multiply around each paragraph. Ultimately I finished with what you see, the border just at the top.

Please no worries though. I have an idea of what is happening. Let me puzzle through these nuances a day or two so I will learn.

I can't thank you enough. Your response was spot on, easy to follow, and will help me sell more while avoiding questions or even disappointment or returns from those who might not otherwise see the description.

Best wishes!

[shipscript]

Oh dear, I do see how your next revision broke into the border.

The likely problem is that the cursor was outside the border or in the border when typing or that some tags were removed step-wise instead of highlighting a block and then deleting. The extra embedded codes in the border can be removed by looking at the original in the post and removing the tags that dont belong there.

It is a little harder to work with a template when you have to be careful about backspacing into the code and adding content in the wrong place.  But as you get used to it, it should become easier.