Welcome to the PrettyFICator!


What is this? A fake search engine generator!
How do I use this? Fill in the form below! Or just click the "Submit Form" button for an empty search engine window.
I'm still confused! Click the funky help buttons bellow.

The workskin (and by extension a portion of my css code) used in the Search Engine generation was created by gadaursan on AO3! I made multiple adjustments to it, but the brunt of the work is gadaursan's.

Let's say we keep search engine at default. In the search box, we want to have the query "Who" and we want the search's autocomplete sugestions to give the following two options: "Who is the Doctor?" and "Who is the man in the blue police box?"

So we will write "Who" into the text field labled 'search box'. We will keep the 'did you mean' text field empty, and into the 'Autocomplete answers' text box, we will write just the text we want to go after the search query. We will also separate each autocomplete sugestion with an enter. (ie: we will type "is the Doctor?", we will hit enter and then type "is the man in the blue police box?")

Submitting the form

will result in a preview:

Start of search engine

Search Autocomplete Sugestion: Who is the Doctor?

Search Autocomplete Sugestion: Who is the man in the blue police box?

End of search engine

With workskins turned off on AO3, the text will look like this:

Start of search engine


Search 🔎 Engine

Search Term:

Who

Search Autocomplete Sugestion: Who is the Doctor?

Search Autocomplete Sugestion: Who is the man in the blue police box?

End of search engine

You can add a Did you mean: Corrections of spelling. These show up underneath the search query and the autocomplete sugestions if there are any. You do this by typing the correction into the "Did you mean" text box.

For example, the query "Melody Pond" and the Did You Mean "River Song"

will result in a preview:

Start of search engine

Did you mean: River Song

End of search engine

With workskins turned off on AO3, the text will look like this:

Start of search engine

Search 🔎 Engine

Search Term:

Melody Pond

Did you mean: River Song

End of search engine

You can add Search Statitistics. These show up underneath the search query and the dydy you mean and autocomplete sugestions if there are any. You do this by typing the text of the search statistics into the "Search Statistics" text box.

For example, the query "Melody Pond", the Did You Mean "River Song" and the search statitic "About 2000 results (in 0.2 seconds)"

will result in a preview:

Start of search engine

Did you mean: River Song

Search resulted in: About 2000 results (in 0.2 seconds)

End of search engine

With workskins turned off on AO3, the text will look like this:

Start of search engine

Search 🔎 Engine

Search Term:

Melody Pond

Did you mean: River Song

Search resulted in: About 2000 results (in 0.2 seconds)

End of search engine

The creator supports three preset search engines and a custom one. The presets have their look already defined. For the custom search, you can specify the name (what text will apear on top of the search bar) using the "Custom Search Engine name" textbox and the color with the color picker. (These two inputs apear only when you select a custom search engine)

Please note that the color of the custom search engine is coded into the workskin. This means two things:
1) You can't have multiple custom search engines within one work unless they all have the same color (or unless you change the workskin and the html a bit).
2) Any time you change the color of the custom search engine, you will have to update the workskin on AO3.

This also means that if you keep the same color, or you are not using the custom search engine, you do not need to update your workskin on AO3 and can use it for multiple works. (ie: the workskin provided when you submit the form already has the code for the three default search engines).

A workskin is AO3's way of implementing styles. It can be used to show text in different fonts, to change how your fic looks, and, in our case, it is used to make the search engine look like the preview instead of raw code.

Wen you submit the form, you will see the code you have to paste into your AO3 workskin. To create a skin, you will go to your AO3 dashboard, click on the button "skins", then "my work skins" and "create work skin". There, you will copy all the code below. You can also add this code to an existing workskin by editing it!

When you want to apply the workskin to a particular work, you will select the workskin (the last field in the "Associations" part of the work creation) and then copy the HTML text from above into the "HTML" text editor.













Separate each autocomplete with an enter




Preview: