Additional Styling of Search Results Page

Created OnNovember 5, 2021

Updated OnNovember 21, 2022

By:Dave

0 out Of 5 Stars

5 Stars		0%
4 Stars		0%
3 Stars		0%
2 Stars		0%
1 Stars		0%

Views123

To further customize your search results page, use the CSS snippets below. We will be adding these as settings in the future, but for now you can add this CSS to add customizations.

Requires KB Template Option

This CSS customization only applies to the KB Template option. If you are using the Current Theme option, you will need to style the search results page through your theme settings or your own custom CSS.

General Page

Copy the URL link to this section to share

Search Results Page - Spacing

Copy the URL link to this section to share

CSS

				/* Change Top and bottom spacing */
#asea-search-results-container {
 margin-top: 50px !important;
 margin-bottom: 50px !important;
}

/* Change Top and bottom spacing */
#asea-search-results-container {
 margin-top: 50px !important;
 margin-bottom: 50px !important;
}

Search Results Page - Background color

Copy the URL link to this section to share

CSS

				/* Changes the page description text color*/
#asea-search-results-container {
 background-color: blue !important;
}

/* Changes the page description text color*/
#asea-search-results-container {
 background-color: blue !important;
}

Search Results Page - Title color

Copy the URL link to this section to share

CSS

				/* Changes the Page title color*/
#asea-search-results-container .asea-search-results-title {
 color: red !important;
}

/* Changes the Page title color*/
#asea-search-results-container .asea-search-results-title {
 color: red !important;
}

Search Results Page - Description text color

Copy the URL link to this section to share

CSS

				/* Changes the page description text color*/
#asea-search-results-container .asea-search-results-description {
 color: blue !important;
}

/* Changes the page description text color*/
#asea-search-results-container .asea-search-results-description {
 color: blue !important;
}

Single Article

Copy the URL link to this section to share

Change Individual Article Title Color

Copy the URL link to this section to share

CSS

				/* Changes Article text color*/
#asea-search-results-container .asea-article-container .asea-article-title {
 color: blue !important;
}

/* Changes Article text color*/
#asea-search-results-container .asea-article-container .asea-article-title {
 color: blue !important;
}

Change Individual Article Read More Colors

Copy the URL link to this section to share

CSS

				/* Changes Article text color*/
#asea-search-results-container .asea-article-container .asea-article-read-more-text {
 color: blue !important;
}

/* Changes Article text color*/
#asea-search-results-container .asea-article-container .asea-article-read-more-text {
 color: blue !important;
}

Copy the URL link to this section to share

Prevent the box from expanding together with the background of the Advanced Search box

CSS

				/*  Prevent the box from expanding together with the background of the Advanced Search box */
#asea-doc-search-container #asea-section-1 #asea_search_form #asea_search_results {
    position: absolute !important;
    width: 100% !important;
}

/*  Prevent the box from expanding together with the background of the Advanced Search box */
#asea-doc-search-container #asea-section-1 #asea_search_form #asea_search_results {
    position: absolute !important;
    width: 100% !important;
}

Adding Custom CSS to Your Site

Adding Custom CSS requires some knowledge of CSS. You can add this CSS to your theme settings or to your child theme if available. If you do not know how to do this, talk to your web developer.

About this Article

This article's heading and code examples are built with our Creative Addons plugin.

Get free Creative Addons for articles

Was this article helpful?

0 out Of 5 Stars

5 Stars		0%
4 Stars		0%
3 Stars		0%
2 Stars		0%
1 Stars		0%

5

Tags:

Table of Contents