Answered

Search Results page - how to edit the styling

(0) Share

Report

Posted on by GD-NH

Hi All,

I have built a Power Pages site which combines Web Pages and data from a Model Driven App. We want to open up the Dataverse Search function to users but the current styling does not suit us. See below for some of the items we want to address:

The search text box is so small the search phrase is not visible
The content at the top is centred and we want it left justified
We want to remove the bullet point
We want to get remove the excess white space

My question is: Where can I edit this page? I though the Search Results.html Web template, but adding Styling there has no effect.

Many thanks,

Categories:

General topics

I have the same question (0)

All responses (3)

Answers (2)

Verified answer

SwatiSTW 741 Super User 2025 Season 2 on at

Like (1)

Report

1. To make the Search Box Bigger - Add this CSS to increase the size of the search box.

input[type="search"] {
width: 100%;
max-width: 500px; /* Adjust width as needed */
font-size: 16px;
}

2. The search section is centered because of styling. Override it with:

.search-container {
text-align: left !important;
}
3. The bullet point is coming from a list (ul or li). Remove it with:

.search-results ul {
list-style-type: none;
padding-left: 0;
}

4. White space is likely caused by extra padding or margin. Reduce it with:

.search-container {
margin-top: 0 !important;
padding-top: 0 !important;
}

You can put this css code in using below steps

Go to Power Pages Studio → Open Themes.
Find Site Settings → Click Web Files.
Add this CSS to an existing custom CSS file or create a new one.
If you don't have a CSS file, you can also add this CSS in the Header Web Template

Was this reply helpful? Yes No
GD-NH 29 on at

Like (0)

Report

Hi SwatiSTW,

Thank you for taking the time to respond. When I tried your CSS I noticed that some of the classes you used were not present in HTML when the page loaded.
I was however able to use parts of the CSS in my final styling when addressed my concerns.
This has been added to the Web Template - Search.html - rather than the Theme.css - something we may come back in future.

I would paste in the CSS used but the forum is preventing that.

Was this reply helpful? Yes No
Verified answer

GD-NH 29 on at

Like (0)

Report

Styling used:

/*Background image*/
.bg-image {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
opacity: 0.5;
z-index: -1;
}
/*Update the Search selection to make more visible*/
#search-filter {
background-color: #addfeb;
}
#search-filter:hover {
background-color: #006385;
}
/*Align left, remove bullet and expand the Search box to be useful*/
section .container {
   text-align: left;
}
section .container li {
list-style-type:none;
}
section input#search_control.form-control {
   min-width: 200px;
height: 31px;
margin: 0rem 1rem 0rem 1rem;
}
section .input-group {
display: flex !important;
}

/*Make the Search and Results boxes 'pop' out*/
.search-results {
padding: 1rem 1rem 0rem 1rem;
background-color: white;
box-shadow: 0.25rem 0.6rem 1rem rgba(0,0,0,.5);
border: 1px solid #addfeb;
border-radius: 0.5rem;
padding-top: 1rem;
min-height:60vh /*This is to ensure the footer is at the bottom of the page should a small number of result s*/
   }
.section-landing-search .columnBlockLayout {
background-color: white;
box-shadow: 0.25rem 0.6rem 1rem rgba(0,0,0,.5);
border: 1px solid #addfeb;
border-radius: 0.5rem;
padding-top: 1rem;
}
/*Reduce the amount of whitespace betweens sections*/
.page_section .row {
padding-top: 0px;
padding-bottom: 0px;
}
/*Remove the second "Search" label and breadcrumbs*/
#content_form > .page-heading {
display: none;
}

/*Page numbers*/
.pagination > li.active span
{
color:#006385;
font-size: 1.2rem;
font-family: 'Montserrat';
background-color: rgba(173, 223, 235, 0.33)!important;
}

This results in:

Was this reply helpful? Yes No