docs(styling): Update styling documentations to add better selectors
This commit is contained in:
Pixelastic
parent
694534efd0
commit
6330a469fc
2 changed files with 61 additions and 25 deletions
|
|
@ -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',
|
||||
});
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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][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
|
||||
|
|
|
|||
Loading…
Reference in a new issue