From 6330a469fc701c2749e256fb40eebdfecaa6d2fb Mon Sep 17 00:00:00 2001
From: Pixelastic <tim@pixelastic.com>
Date: Wed, 22 Aug 2018 12:55:33 +0200
Subject: [PATCH] docs(styling): Update styling documentations to add better
 selectors

---
 docs/src/dropdown.md | 12 +++++++
 docs/src/styling.md  | 74 +++++++++++++++++++++++++++++---------------
 2 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/docs/src/dropdown.md b/docs/src/dropdown.md
index b8758af6..cb58093d 100644
--- a/docs/src/dropdown.md
+++ b/docs/src/dropdown.md
@@ -30,3 +30,15 @@ created your config.
   });
 </script>
 ```
+
+## Testing
+
+If you're eager to test DocSearch but don't have credentials of your own yet,
+you can use the one we use on this own website:
+
+```javascript
+  docsearch({ 
+    apiKey: '25626fae796133dc1e734c6bcaaeac3c',
+    indexName: 'docsearch',
+  });
+```
diff --git a/docs/src/styling.md b/docs/src/styling.md
index f42bdfc8..da121d2a 100644
--- a/docs/src/styling.md
+++ b/docs/src/styling.md
@@ -3,46 +3,66 @@ layout: two-columns
 title: Styling DocSearch
 ---
 
-DocSearch default colorscheme comes in a grey theme with blue highlight. 
+DocSearch default colorscheme comes in a grey theme with blue highlight.
 
-![Default colorscheme](./assets/default-colorscheme.png)
+![Default colorscheme][1]
 
 This theme works well with most websites, but we encourage you to style it to
 your own theme. This can be achieved by overriding the CSS classes used by the
-default theme. 
+default theme.
 
 The following annotated example will help you style each part:
 
 ```css
-/* Match title (eg. Bootstrap CDN) */
-.algolia-docsearch-suggestion--title {
-  font-weight: bold;
-  color: black;
+/* Main dropdown wrapper */
+.algolia-autocomplete .ds-dropdown-menu {
+  width: 500px;
 }
 
-/* Match description (eg. Bootstrap currently works...) */
-.algolia-docsearch-suggestion--text {
-  font-size: .8rem;
-  color: gray;
-}
-
-/* Match category (eg. Downloads) */
-.algolia-docsearch-suggestion--subcategory-column {
-  color: gray;
-}
-
-/* Match main category (eg. Getting Started) */
-.algolia-docsearch-suggestion--category-header {
+/* Main category (eg. Getting Started) */
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
   color: darkgray;
   border: 1px solid gray;
 }
 
+/* Category (eg. Downloads) */
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
+  color: gray;
+}
+
+/* Title (eg. Bootstrap CDN) */
+.algolia-autocomplete .algolia-docsearch-suggestion--title {
+  font-weight: bold;
+  color: black;
+}
+
+/* Description description (eg. Bootstrap currently works...) */
+.algolia-autocomplete .algolia-docsearch-suggestion--text {
+  font-size: .8rem;
+  color: gray;
+}
+
 /* Highlighted text */
-.algolia-docsearch-suggestion--highlight {
+.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
   color: blue;
 }
 ```
 
+## Attribution
+
+We're happy to provide DocSearch free of charge for any documentation website,
+and you're encouraged to style it to fit your own theming. All we ask is that
+you keep the `search by Algolia` logo and link next to your search results.
+
+The logo is automatically added in the dropdown with the default styling. It's
+ok to hide it through CSS, as long as you re-add it somewhere else on your page
+close to the search input or search results. It's our way to let more people
+know about what do, and how they could also have from fast and relevant search
+on their website.
+
+If you're using your own [paid Algolia account][2] and [run the crawler
+yourself][3], you don't have to keep the logo.
+
 ## Debugging
 
 If you want to inspect the dropdown markup with your browser tools, you should
@@ -50,7 +70,7 @@ add `debug: true` to your `docsearch` call to prevent it from closing on
 inspection.
 
 ```javascript
-docsearch({ 
+docsearch({
   […],
   debug: true
 });
@@ -67,16 +87,20 @@ two-column layout shown in the screenshot is used on larger screens. You can
 media queries (for example `@media (min-width: 768px) {}`) to target one or the
 other display.
 
-**We ask you not to try to hide the _search by Algolia_ logo through CSS, as its
-display is mandatory if you're using the free hosted version of DocSearch.**
 
 
 ## Advanced styling
 
 If you want to more heavily style the results, feel free to have a look at the
-[SCSS source code](https://github.com/algolia/docsearch/tree/master/src/styles).
+[SCSS source code][4].
 `_variables.scss` contains all the default theming, sizing and breakpoints.
 
 You can generate your own CSS file by cloning the repo and running `yarn run
 build:css`. The resulting file will be generated in `./dist/cdn`, and should be
 used instead of the default one.
+
+
+[1]: ./assets/default-colorscheme.png
+[2]: https://www.algolia.com/pricing
+[3]: ./crawler-overview.html
+[4]: https://github.com/algolia/docsearch/tree/master/src/styles