Reduce the size and change the police of the title of a widget

berenicemichel · Member · May 15, 2015 at 1:34 pm
Copy link

Add topic to favorites
Hi,
I have a text widget and I would like to reduce the size of it tittle and change the police too. How can I do ?
Thank you !
staff-totoro · Staff · May 15, 2015 at 5:52 pm
Copy link
Hi there,

I visited your site but did not see a text widget in use when I checked there. Can you point it out to me?

Accueil

Thanks!
berenicemichel · Member · May 15, 2015 at 5:54 pm
Copy link
Hi,
It’s here on the right :
http://www.lesptitesmerveillesdeberenice.wordpress.com/category/deco/

Thanks
staff-totoro · Staff · May 15, 2015 at 6:17 pm
Copy link
Thanks. You can use the following code to change that size:
```
.widget-title:first-child {
  font-size: 17px;
}
```
To clarify, this will modify the size of the title for the first widget (aka: first-child) ONLY, and not other widgets in the sidebar. Right now that happens to be the text widget of course. :)
berenicemichel · Member · May 15, 2015 at 7:20 pm
Copy link
Thank you.
And for the police ? I would like the same as the title of the site…
Thank you !
timethief · Member · May 15, 2015 at 7:23 pm
Copy link
What do you mean by police please?
Do you actually mean position?
berenicemichel · Member · May 15, 2015 at 7:25 pm
Copy link
the font
staff-totoro · Staff · May 16, 2015 at 12:39 am
Copy link
Thanks for explaining. The font is set in the Fonts tab of the site customize, but it is generally speaking not possible to set a different font for just that title.

The only exception are web-safe fonts, which are fonts that everyone who views your site has loaded on their computer. Fonts chosen with this method MUST be installed on the vistor’s computer, however, or a fallback is used.

Here are the most commonly accepted web-safe fonts for Windows and Mac users:

http://www.cssfontstack.com/

It is possible to change your font to any of the ones listed in that article, however, by adding:

font-family: Verdana;

To the .widget-title:first-child style I gave above. You can place the name of any web safe font-family you prefer, by replacing “Verdana” with the name of the font you prefer.

Cheers,
berenicemichel · Member · May 16, 2015 at 11:30 am
Copy link
Hi,
My problem is that all the tittle is in capital letters and I wanted to change the front to change this, but that doesn’nt change…
staff-totoro · Staff · May 16, 2015 at 5:31 pm
Copy link
Gotcha. Then you can add the following rule to the above style for .widget-title:first-child

‘text-transform: lowercase;`

Cheers!
berenicemichel · Member · May 16, 2015 at 7:01 pm
Copy link
Euh… Now all the text is in small letters / lower case letters…
:/
berenicemichel · Member · May 16, 2015 at 7:09 pm
Copy link
This is like this it’s have to be :

Les p’tites Merveilles de Bérénice
<h6>Les p’tites Merveilles de Bérénice</h6>

with capital letters and lower case letters.
Thank you !
staff-totoro · Staff · May 17, 2015 at 12:00 am
Copy link
Euh… Now all the text is in small letters / lower case letters…
:/

Ah, you’re quite right. It should have been:

‘text-transform: none;`

That will give you standard text, where the words you capitalize in the widget settings are correctly capitalized on the site.

Cheers!
berenicemichel · Member · May 17, 2015 at 12:40 am
Copy link
All my tittle font in the sidebar have change except for the 7th widget…
But I would like to change just the first widget tittle font.
Thank you.
staff-totoro · Staff · May 19, 2015 at 9:02 pm
Copy link
In this case, perhaps it would be better to target ID of that widget instead, so use

#text-3 .widget-title

instead of

.widget-title:first-child

You may also want to consider combining some of your styles. You don’t need to use a separate declaration for every change you make to the same element. For example, this combined declaration will work in the place of the 3 separate declarations you have currently for .widget-title
```
#text-3 .widget-title {
	font-size: 22px;
	text-transform: none;
	font-weight: bold;
}
```
Cheers!
berenicemichel · Member · May 21, 2015 at 11:52 am
Copy link
Ok, thank you.

No items found.