Archive of Our Own ^beta

LIVE EXAMPLE

CSS CODE

The first thing you'll need to do is go to Dashboard - Skins and click 'My Work Skins', then click Create Work Skin in the top right-hand corner. Note: if you're already using a work skin for this fic, you'll need to instead add the following CSS code into the bottom of your existing work skin, as fics can only use one skin at a time.

Make sure the 'Type' is 'Work Skin', then give your skin a title and a description if needed. In the 'CSS' field, copy and paste the following:

#workskin .amazon {
background-color: #FFFFFF;
font-size: 14px;
line-height: 20px;
color: #0F1111;
font-family: "Amazon Ember",Arial,sans-serif;
box-sizing: border-box;
width: 100%;
}

#workskin .amazoncustlogo {
background: url('https://i.imgur.com/AY5inPc.jpg') left top;
width: 20px;
height: 20px;
display: inline-block;
}

#workskin .amazoncustomer {
font-size: 14px;
line-height: 20px;
font-family: "Amazon Ember",Arial,sans-serif;
box-sizing: border-box;
text-decoration: none;
color: #000000;
}

#workskin .one-star {
background: url('https://i.imgur.com/Ch3gKnO.jpg') left top;
width: 85px;
height: 16px;
display: inline-block;
}

#workskin .two-star {
background: url('https://i.imgur.com/cz1oXcF.jpg') left top;
width: 84px;
height: 16px;
display: inline-block;
}

#workskin .three-star {
background: url('https://i.imgur.com/bJCGIeR.jpg') left top;
width: 86px;
height: 16px;
display: inline-block;
}

#workskin .four-star {
background: url('https://i.imgur.com/XXYAnn7.jpg') left top;
width: 84px;
height: 16px;
display: inline-block;
}

#workskin .five-star {
background: url('https://i.imgur.com/mxMxOxY.jpg') left top;
width: 85px;
height: 16px;
display: inline-block;
}

#workskin .amazontitle {
font-family: "Amazon Ember",Arial,sans-serif;
box-sizing: border-box;
font-weight: 700;
font-size: 14px;
line-height: 20px;
color: #0F1111;
text-decoration: none;
}

#workskin .amazondetails {
font-family: "Amazon Ember",Arial,sans-serif;
box-sizing: border-box;
font-size: 14px;
line-height: 20px;
color: #565959;
}

#workskin .amazonverified {
font-family: "Amazon Ember",Arial,sans-serif;
box-sizing: border-box;
font-weight: 700;
font-size: 12px;
line-height: 16px;
color: #c45500;
}

#workskin .amazonreview {
color: #0F1111;
font-family: "Amazon Ember",Arial,sans-serif;
font-size: 14px;
line-height: 20px;
box-sizing: border-box;
width: 100%;
overflow: hidden;
position: relative;
max-height: 300px;
}

#workskin .amazonhelpful {
font-family: "Amazon Ember",Arial,sans-serif;
box-sizing: border-box;
font-size: 14px;
line-height: 20px;
color: #565959;
}

#workskin .hide {
display: none;
}

HTML CODE

You'll need to make sure you're editing your fic in HTML mode, not Rich Text mode. If you usually use the Rich Text Editor, paste your fic in there without your Amazon review and then click on the HTML tab. This will convert it from Rich Text to HTML, and then you can insert the below HTML code. Alternatively, if you write in Google Docs the AO3 FAQ has a link to a template you can use to add HTML to your writing which you can then paste directly into the HTML editor.

Once your fic is formatted in HTML, go ahead and add the following code where you want the Amazon review to show up in your work:


<div class="amazon">
<span class="hide"><strong><u>AMAZON REVIEW:</u></strong><br><br></span>

<span class="amazoncustlogo"></span> <span class="amazoncustomer">Username</span><br><br>

<span class="five-star"></span><span class="hide"><strong>[5 stars]</strong></span><span class="amazontitle"><strong>Review Title</strong></span><br>

<span class="amazondetails">Reviewed in Country on January 01, 2000</span><br>

<span class="amazonverified"><strong>Verified Purchase</strong></span><br><br>

<span class="amazonreview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span><br><br>

<span class="amazonhelpful">69 people found this helpful</span><br><br>
</div>

Let's break down what each of these sections mean!

<span class="hide"><strong><u>AMAZON REVIEW:</u></strong><br><br></span>

This is just something I like to do for the people who turn off skins or are using screen readers -- it indicates that it's an Amazon review without the visual styling to clue them in. It doesn't show up when Creator Style is turned on, only when it's switched off. However, like I said, this is totally a personal preference thing and you can delete this line without any repurcussions if you want to!

<span class="amazoncustlogo"></span> <span class="amazoncustomer">Username</span><br><br>

This part makes the little grey and white icon show up, along with the name/username of the person writing the review. The icon will not show when Creator Style is turned off, but the username still will. Edit 'Username' to whatever name/username you want to display.

<span class="five-star"></span><span class="hide"><strong>[5 stars]</strong></span><span class="amazontitle"><strong>Review Title</strong></span><br>

This is where both the rating (1-5) and the title the user has given the review are entered. For a rating less than 5, change the <span class="five-star"> to one-star, two-star, three-star, or four-star as required. You'll then want to change [5 stars] as well. [5 stars] (or whatever other value you choose to use) will only show up when Creator Style is turned off in place of the stars image which is displayed when Creator Style is turned on.

You can make the title of the review anything you like; just make sure to keep it between the strong tags. This will ensure the review title still shows as bold when Creator Style is turned off.

<span class="amazondetails">Reviewed in Country on January 01, 2000</span><br>

This part is fairly self-explanatory I think! Change 'Country' to whatever country the person writing the Amazon review is based in, and the date to the date it was written.

<span class="amazonverified"><strong>Verified Purchase</strong></span><br><br>

This indicates that Amazon can verify the item was purchased through them. If you don't want this to display, delete this line of code.

<span class="amazonreview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span><br><br>

This is where you write the review itself. If you need to insert line breaks, you can do that using the <br /> tag.

<span class="amazonhelpful">69 people found this helpful</span><br><br>

This indicates that Amazon users have marked the review helpful. Again, if you don't want this you can delete this line, but be careful not to delete the </div> that comes immediately after it as that indicates an end to the Amazon review formatting.

And that's it! Then you have your Amazon review looking lovely in your fic. If you want to see what it looks like with Creator Style turned off, go ahead and flick it off at the top of this page.