Is there a way to modify Breadcrum in Search Results?

Innerlight Racing

Hi,
I wish to capitalise the word "search" in the breadcrum on my search results page. Does anybody know how this can be done please?

RobLoud

Innerlight Racing wrote: »

Hi,
I wish to capitalise the word "search" in the breadcrum on my search results page. Does anybody know how this can be done please?

Try adding this to a CSS block on your search page or add it to site wide or theme CSS if you want to capitalise all of your breadcrumbs 'actual page'. Change the font size to suit your needs. All of my galleries have this with a colour change as well.

.sm-user-ui h1 { font-size: 16px;
  text-transform: uppercase;
}

Robin

basflt

Innerlight Racing wrote: »

Hi,
I wish to capitalise the word "search" in the breadcrum on my search results page. Does anybody know how this can be done please?

it would help if you supplied a link to your site , so people can check it

RobLoud

basflt wrote: »

it would help if you supplied a link to your site , so people can check it

I did a quick google search for his site and his search page http://www.innerlightracing.com/Search

basflt

i see ; .sm-breadcrumb-item there , not .sm-user-ui h1

on my own site it is ; .sm-nui h1, .sm-nui .sm-h1

i think something is conflicting

RobLoud

basflt wrote: »

i see ; .sm-breadcrumb-item there , not .sm-user-ui h1

on my own site it is ; .sm-nui h1, .sm-nui .sm-h1

i think something is conflicting

This is what I use on my site:

This changes the font for the all of the back links

.sm-breadcrumb-item, .sm-breadcrumb-item a {
  color: #c0c0c0 !important;
  font-size: 14px;
}

This changes the Home icon size

.sm-breadcrumb-item .sm-fonticon-Home {
font-size: 35px;
  color: #fff;
}

This changes the actual page you're on

.sm-user-ui h1 {
 font-size: 16px;
 text-transform: uppercase !important;
 color: #569ffd !important;
}

Change the colour to suit or just delete it to keep the themes colour.

Hope this helps
Robin

basflt

i checked

.sm-breadcrumb-item seems to work on his page , for what he want ( i guess)

.sm-user-ui h1 seems to change the text below the breadcrumbs : Search for the images you require here

RobLoud

basflt wrote: »

i checked

.sm-breadcrumb-item seems to work on his page , for what he want ( i guess)

.sm-user-ui h1 seems to change the text below the breadcrumbs : Search for the images you require here

Thanks Bas,

I just did a check on my search page.

If I add a text block and set the text to Heading 1, the supplied code also changes this text as you described. If you change it to any of the others (Heading 2 or below) the text remains fine), so maybe he can just change the Heading size for 'Search for the images you require here'
I never noticed this before because I use HMTL blocks.

Robin

basflt

you should not check on your own site , but in his site

Innerlight Racing

Thanks for your help guys, sorry to cause you so much trouble. I am totally new to this coding buisness, could one of you please tell me exactly what I should alter the code to, and where I will find the code to edit? I don't want to capitalise the whole breadcrumb, just the first letter.

basflt

try this ;

.sm-breadcrumb-item{
font-size: 16px;
text-transform: uppercase ;
}

if it works , you can change the 16 as you please
if it dont work , just come back here , its no trouble

Innerlight Racing

That's great basflt, but how do I put that code on my site? Thank you.

Allen

Innerlight Racing wrote: »

That's great basflt, but how do I put that code on my site? Thank you.

This in your "entire site" CSS will target only the search page.

.sm-page-node-GhpZv .sm-breadcrumb-item{
font-size: 16px;
text-transform: uppercase ;
}

basflt

Allen wrote: »

This in your "entire site" CSS will target only the search page.

.sm-page-node-GhpZv .sm-breadcrumb-item{
font-size: 16px;
text-transform: uppercase ;
}

Was that not the question in post #1? .

basflt

Innerlight Racing wrote: »

That's great basflt, but how do I put that code on my site? Thank you.

Customize , entire site.
Drag a CSS block in the field
Copy the code in it.
Done & Save

If you want to add or change, do it in that same block

Innerlight Racing

Brilliant! That worked a treat. Thanks Guys!