# Result view color and size of result card

**URL:** <https://discuss.elastic.co/t/result-view-color-and-size-of-result-card/216300>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [January 23, 2020, 4:56pm UTC](https://discuss.elastic.co/t/result-view-color-and-size-of-result-card/216300 "2020-01-23T16:56:48Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![SRani](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@SRani](https://discuss.elastic.co/u/SRani)\
**Post date:** [January 23, 2020, 4:56pm UTC](https://discuss.elastic.co/t/result-view-color-and-size-of-result-card/216300/1 "2020-01-23T16:56:49Z")

</div>

Can we change the result views' background color and the result grid's size....Please let e know.I am trying to see if the CSS can be modified

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [January 23, 2020, 5:25pm UTC](https://discuss.elastic.co/t/result-view-color-and-size-of-result-card/216300/2 "2020-01-23T17:25:24Z")

</div>

Could you please give us some more context? The results view where? Are you using Search UI?

---

<div class="post-metadata">

**Author:** ![SRani](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@SRani](https://discuss.elastic.co/u/SRani)\
**Post date:** [January 23, 2020, 5:54pm UTC](https://discuss.elastic.co/t/result-view-color-and-size-of-result-card/216300/3 "2020-01-23T17:54:36Z")

</div>

Thank you for responding.  
Yes Search UI. I have downloaded from the git and I am trying to change the results view.

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [January 23, 2020, 6:14pm UTC](https://discuss.elastic.co/t/result-view-color-and-size-of-result-card/216300/4 "2020-01-23T18:14:05Z")

</div>

To make changes to the styles, I recommend providing your own stylesheet to override the existing styles.

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [January 23, 2020, 6:14pm UTC](https://discuss.elastic.co/t/result-view-color-and-size-of-result-card/216300/5 "2020-01-23T18:14:46Z")

</div>

> <https://github.com/elastic/search-ui/blob/master/ADVANCED.md#custom-styles-and-layout>

---

<div class="post-metadata">

**Author:** ![SRani](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@SRani](https://discuss.elastic.co/u/SRani)\
**Post date:** [January 24, 2020, 12:28am UTC](https://discuss.elastic.co/t/result-view-color-and-size-of-result-card/216300/6 "2020-01-24T00:28:14Z")

</div>

Thank you so much for you response. I am new bie to raectJS, please pardon me if I am not making sense.  
I followed the steps from: to get my results view.  
[Reference UI - how to modify what’s displayed (React newbie)](https://discuss.elastic.co/t/reference-ui-how-to-modify-whats-displayed-react-newbie/199471)

I have written ResultView component and imported into App Js.  
I need to display the search results as result-cards (as we generally see in restaurant or movie searches)  
But not able to figure out what all to be in ResultView component to achieve that.

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [January 24, 2020, 11:31am UTC](https://discuss.elastic.co/t/result-view-color-and-size-of-result-card/216300/7 "2020-01-24T11:31:12Z")

</div>

Do you have an example?

---

<div class="post-metadata">

**Author:** ![SRani](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@SRani](https://discuss.elastic.co/u/SRani)\
**Post date:** [January 25, 2020, 12:54am UTC](https://discuss.elastic.co/t/result-view-color-and-size-of-result-card/216300/8 "2020-01-25T00:54:59Z")

</div>

Hey thank you.I needed to update the styles.css to change my layout.

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [January 27, 2020, 11:52am UTC](https://discuss.elastic.co/t/result-view-color-and-size-of-result-card/216300/9 "2020-01-27T11:52:12Z")

</div>

To override styles you'll need to add a new stylesheet. You cannot modify styles.css directly.

---

<div class="post-metadata">

**Author:** ![SRani](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@SRani](https://discuss.elastic.co/u/SRani)\
**Post date:** [January 30, 2020, 3:47pm UTC](https://discuss.elastic.co/t/result-view-color-and-size-of-result-card/216300/10 "2020-01-30T15:47:07Z")

</div>

okay.i will try.And could you please let me know why I am not able to traverse through the Results.js file .  
I have put breakpoints inside the couple of files...only the breakpoint in the App.js I am intercepting but no any other files are being traversed when i run the application.  
Please let me know ow can I resolve. Thanks a lot !

---

<div class="post-metadata">

**Author:** ![SRani](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@SRani](https://discuss.elastic.co/u/SRani)\
**Post date:** [January 31, 2020, 6:32pm UTC](https://discuss.elastic.co/t/result-view-color-and-size-of-result-card/216300/11 "2020-01-31T18:32:32Z")

</div>

Thank you.  
Here is the example that the result data to be displayed. ![image](https://us1.discourse-cdn.com/elastic/original/3X/d/c/dcd703cb2cac9b19fa17f3da54d7cfc52f8ab182.jpeg)

Please provide your valuable inputs how to handle key-value pairs of the data and how to handle.I need to have control over the search results data where and how to be displayed on the results page.  
Please let me know if any reference document to so that I can customize.  
Thanks alot.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [February 28, 2020, 6:32pm UTC](https://discuss.elastic.co/t/result-view-color-and-size-of-result-card/216300/12 "2020-02-28T18:32:33Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.
