docsearch/docs/src/styling.md at a62d19cb3b15f9576fbd358889fb7b8ae0a0fb5c

* # This is a combination of 2 commits.
# This is the 1st commit message:

# This is a combination of 3 commits.
# This is the 1st commit message:

# This is a combination of 3 commits.
# This is the 1st commit message:

chore(deps): update dependency onchange to v4.1.0

integrate previous work

enhance tyle/content

reformat part 1

wait for review

adance start_urls

enhance attributes description

fix typo

proofread documentation/docsearch

add apiKey mention

intefrate review and small fixes

finished proofreading

update sclient-rendering

use unseen review

# This is the commit message #2:

update README #269

# This is the commit message #3:

fix json

# This is the commit message #2:

enhance  as algolia/docsearch-configs#387

# This is the commit message #3:

updating flavicon

# This is the commit message #2:

Update 1-customize-configuration-file.html.md.erb

* # This is a combination of 2 commits.
# This is the 1st commit message:

# This is a combination of 3 commits.
# This is the 1st commit message:

# This is a combination of 3 commits.
# This is the 1st commit message:

chore(deps): update dependency onchange to v4.1.0

integrate previous work

enhance tyle/content

reformat part 1

wait for review

adance start_urls

enhance attributes description

fix typo

proofread documentation/docsearch

add apiKey mention

intefrate review and small fixes

finished proofreading

update sclient-rendering

use unseen review

# This is the commit message #2:

update README #269

# This is the commit message #3:

fix json

# This is the commit message #2:

enhance  as algolia/docsearch-configs#387

# This is the commit message #3:

updating flavicon

# This is the commit message #2:

Update 1-customize-configuration-file.html.md.erb

* documenting algolia/docsearch-scraper#387

* documenting algolia/docsearch-scraper#387

* fixing changelog

* fixing typo

* # This is a combination of 2 commits.
# This is the 1st commit message:

# This is a combination of 3 commits.
# This is the 1st commit message:

# This is a combination of 3 commits.
# This is the 1st commit message:

chore(deps): update dependency onchange to v4.1.0

integrate previous work

enhance tyle/content

reformat part 1

wait for review

adance start_urls

enhance attributes description

fix typo

proofread documentation/docsearch

add apiKey mention

intefrate review and small fixes

finished proofreading

update sclient-rendering

use unseen review

# This is the commit message #2:

update README #269

# This is the commit message #3:

fix json

# This is the commit message #2:

enhance  as algolia/docsearch-configs#387

# This is the commit message #3:

updating flavicon

# This is the commit message #2:

Update 1-customize-configuration-file.html.md.erb

* # This is a combination of 2 commits.
# This is the 1st commit message:

# This is a combination of 3 commits.
# This is the 1st commit message:

# This is a combination of 3 commits.
# This is the 1st commit message:

chore(deps): update dependency onchange to v4.1.0

integrate previous work

enhance tyle/content

reformat part 1

wait for review

adance start_urls

enhance attributes description

fix typo

proofread documentation/docsearch

add apiKey mention

intefrate review and small fixes

finished proofreading

update sclient-rendering

use unseen review

# This is the commit message #2:

update README #269

# This is the commit message #3:

fix json

# This is the commit message #2:

enhance  as algolia/docsearch-configs#387

# This is the commit message #3:

updating flavicon

# This is the commit message #2:

Update 1-customize-configuration-file.html.md.erb

* documenting algolia/docsearch-scraper#387

* documenting algolia/docsearch-scraper#387

* fixing typo

* fixing style issue

* fixing recurrnet issue

* general github handle

* fixing missed conflict

* fix and closes algolia/docsearch-configs-private#82

* remove builded content

* adding hitsperpage

* fix

* enhance

* doc proof reading part 1

* adding how to build an index and updating content

* reformat

* textlint

* typos

* Update behavior.md

* Update config-file.md

* Update crawler-overview.md

* Update dropdown.md

* Update faq.md

* Update how-do-we-build-an-index.md

* Update how-does-it-work.md

* Update inside-the-engine.md

* Update integrations.md

* Update styling.md

* Update tips.md

* Update who-can-apply.md

* Update integrations.md

* Usefull but sometime we do want to ignore it on purpose

* 4fca279b9a

* auto fix & formating

2018-09-04 08:47:38 +02:00

3.1 KiB

Raw Blame History

layout	title
two-columns	Styling DocSearch

DocSearch default colorscheme comes in a grey theme with blue highlight.

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.

The following annotated example will help you style each part:

/* Main dropdown wrapper */
.algolia-autocomplete .ds-dropdown-menu {
  width: 500px;
}

/* 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: 0.8rem;
  color: gray;
}

/* Highlighted text */
.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 fine if you 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 we do, and how they could also have a fast and relevant search on their website.

If you're using your own paid Algolia account and run the crawler yourself, you don't have to keep the logo.

Debugging

To inspect the dropdown markup with your browser tools, you should add debug: true to your docsearch call to prevent it from closing on inspection.

docsearch({
  […],
  debug: true
});

Other considerations

Selected suggestions are wrapped in a .ds-cursor class. This means that you can use .ds-cursor .algolia-docsearch-suggestion--content to style the selected suggestion for example.

On small screens, DocSearch reverts to a single column layout, while the two-column layout shown in the screenshot is used on larger screens. You can add media queries (for example @media (min-width: 768px) {}) to target different displays.

Advanced styling

Whether you would like to do more heavy styling, feel free to have a look at the SCSS source code. _variables.scss contains all the default theming, sizing and breakpoints.

You can generate your own CSS file by cloning the repository and running yarn run build:css. The resulting file will be generated in ./dist/cdn, and should be used instead of the default one.

3.1 KiB Raw Blame History

Attribution

Debugging

Other considerations

Advanced styling

3.1 KiB

Raw Blame History