Text widget font size

Hello brad.
I did it this way (change font of Widget-Title) using (Cyberchimps)Theme “Adaptiv Version: 1.9.7.7”:

1) install “Responsive Child Theme Version 1.0.0”;
2) /WP/design/editor/ edit “style.css” (of the ChildTheme);
3) insert code:

/* =Titles
-------------------------------------------------------------- */
.featured-title {
	margin: 0;
	padding-top: 40px;
	font-size: 60px;
	text-align: center;
	letter-spacing: -1px;
}

.featured-subtitle {
	padding: 0 10px;
	text-align: center;
}

.widget-title h3,
.widget-title-home h3 {
	display: block;
	margin: 0;
	padding: 0 0 20px 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 23px;
	text-align: left;
}

.top-widget .widget-title h3 {
	padding: 0;
	font-size: 14px;
	text-align: right;
}

.widget-title a {
	padding: 0 !important;
	border-bottom: none;
}

4) change there: font-size: ??px etc.
5) save changes to “style.css” of the ChildTheme;

mfg cdcd

Cheers. I am an absolute WP numpty so it might take me a while to decipher all of that.

Where do I find the style.css?

cheers

BC

If you are not using a child theme, the changes can be done with just using custom CSS via a plugin like Simple Custom CSS. For the site title, this has a few font sizes based on device viewing from desktop to phones…example, the theme has this for viewing windows that are larger than 992px (desktops)

@media (min-width: 992px) {
.site-title {
    font-size: 4.75rem;
}
}

For smaller windows like tablets:

@media (min-width: 768px) {
.site-title {
    font-size: 3rem;
}
}

Then for phones, this is the default theme styling for the site title size and font…and a few other things:

.site-title {
    padding: 10px 0;
    font-family: "Old Standard TT",Georgia,Serif;
    font-size: 2.5rem;
    line-height: 1;
    text-align: center;
}

You can copy the code snippets above and add them to your own custom CSS and then just change the font-sizes to your own preference. You may notice that I use rem for font size, but you can use em % or even px…but best to use rem. To know what an rem unit is in pixels, you can use a reference table from https://www.pxtoem.com for that. It converts px to em (rem) units.

For the text widget, which area of the page were you wanting to adjust this font size for? The left and right sidebars, the footer or bottom area? Or all text widgets?

Hi, I was looking to change the font size for the bottom area and perhaps breadcrumbs.

Cheers

Brad C

Hi Brad…for the bottom sidebars, you can change the font size for this area with something like:

#bottom-wrapper {
    font-size: 0.813rem;
}

For breadcrumbs:

#breadcrumb-wrapper {
   font-size: 0.75rem;
}

cheers. In style.css?

Best do that in your child theme’s style.css if you are using a child theme. If you use jetpack, then use the Edit CSS module that lets you create a custom stylesheet, otherwise if you’re not using jetpack, use a plugin Simple Custom CSS

If you do this in the theme’s own style.css, you lose your changes when an update comes along.