Colour boxes around result

Hello,
I am also interested if there is an easy way.

From my test, the main difference is, that the team layout is “inlined” in the page where you have the colored box. On your page the layout is “block”.

Best regards,
Daniel

Thanks i changed mine to inlined and it looked like THIS does anyone know how i can keep THIS look but have that coloured box around results?

Thanks @danielgross7
Kev

Hi @kev147 ,

We will need a url of your site to be able to help you with this ??

Thanks,
Savvas

It’s all results HERE

Thnx

You can try something like:

article.sp_event span.sp-result {
    color: white;
    background: #00a69c;
}

Thanks Savvas any chance we can make the boxes slightly bigger THIS seems a little small

kev

Hi @kev147

You can easily make the boxes bigger by padding them. Change the CSS to:

article.sp_event span.sp-result {
color: white;
background: #00a69c;
padding: 0px 20px;
}

The 0px pads above and below. The 20px pads left and right.

Ideally though you want the boxes to be the same size (to fill the container) so a box with a 0 in will be the same size as a box with a 1 in. It won’t be using the code above (because a 0 and a 1 are different widths) but that’s my limit of CSS.

Thanks @theangryduck for the help!

@kev147 everything is ok now?

Thanks,
Savvas

Not had a go yet but will report back soon as i do ??

Thanks again Andy ??

Hi @kev147

You can easily make the boxes bigger by padding them. Change the CSS to

Perfect!!
many thanks
kev

I am glad it worked ??