How to change the size of the "search" text in the searchbar

zeerodger27
Tera Contributor

Hello,

How to change the size of the "Search" text in the search bar.

 

I have highlighted in the image with yellow color

 

padmavathik_0-1710493118738.png

 

2 ACCEPTED SOLUTIONS

Harish KM
Kilo Patron
Kilo Patron

Hi @zeerodger27 ctrl right click on that search --> click on instance page editor like below

HarishKM_0-1710494498999.png

HarishKM_1-1710494518984.png

Paste this css code like shown above

input {
box-shadow: none;
font-size: 50px; // here you can mention the font size
font-family: inherit;
color: #656E81;
padding: 1.2rem;
height: 4.4rem;
border-bottom-left-radius: 0.8rem;
border-top-left-radius: 0.8rem;
}

 

Regards
Harish

View solution in original post

Allen Andreas
Administrator
Administrator

Hi,

Out of box, you can only increase that to "large" and that can be done by using the following. If you press ctrl+right-click on that widget and go to instance options:

AllenAndreas_0-1710494984448.png

 

{title: 'Not today', size: 'lg'}

 

AllenAndreas_1-1710495032428.png

AllenAndreas_2-1710495111183.png

Otherwise, you may have to try and tap into the css of this particular element and increase it even larger that way, but then, the page starts to look a little off.

 


Please consider marking my reply as Helpful and/or Accept Solution, if applicable. Thanks!

View solution in original post

2 REPLIES 2

Harish KM
Kilo Patron
Kilo Patron

Hi @zeerodger27 ctrl right click on that search --> click on instance page editor like below

HarishKM_0-1710494498999.png

HarishKM_1-1710494518984.png

Paste this css code like shown above

input {
box-shadow: none;
font-size: 50px; // here you can mention the font size
font-family: inherit;
color: #656E81;
padding: 1.2rem;
height: 4.4rem;
border-bottom-left-radius: 0.8rem;
border-top-left-radius: 0.8rem;
}

 

Regards
Harish

Allen Andreas
Administrator
Administrator

Hi,

Out of box, you can only increase that to "large" and that can be done by using the following. If you press ctrl+right-click on that widget and go to instance options:

AllenAndreas_0-1710494984448.png

 

{title: 'Not today', size: 'lg'}

 

AllenAndreas_1-1710495032428.png

AllenAndreas_2-1710495111183.png

Otherwise, you may have to try and tap into the css of this particular element and increase it even larger that way, but then, the page starts to look a little off.

 


Please consider marking my reply as Helpful and/or Accept Solution, if applicable. Thanks!