Widgets: how to edit and style them?

[hello.sun]

How can we edit the widget areas on the front page of StudioPress Themes?

I'm currently working with the Academy Pro theme and am trying to copy the format of one widget (front page 3) to be the same on another area (front page 6).

I did a Google search and didn't find any tutorials giving specific tutorials on how to do so. I learned if I want to add more widgets I would need to go into the front-page.php file, theme.php file and style.css file.

Can anyone recommend any tutorials teaching how to edit and style widget areas?

Thank you

[Baz]

This is tricky but can be done. I don't think there are any specific tutorials on how to do it though.

You will need to replicate all .php and CSS codes for the front-page 3 widget area and apply them to the front-page 6 widget area codes. It will be a case of trial and error.

[Victor Font]

You don't need to change any php code to style a widget. All styling is done using CSS.

The CSS for Academy Pro is in style-front.css and for that theme, all of the widget areas use the same classes.

So, if you want to make front-page-6 the same as front-page-3, open style-front.css and search for every instance of .front-page-3:

.front-page-3 {
	/* background-color: #f5f5f5; */
	background-color: transparent;
	margin-bottom: 40px;
	position: relative;
}

Add front-page-6 to this CSS:

.front-page-3, .front-page-6 {
	background-color: #f5f5f5;
	background-color: transparent;
	margin-bottom: 40px;
	position: relative;
}

Then, comment out any CSS related to front-page-6:

/*
.front-page-6 {
	box-sizing: border-box;
	margin-bottom: 40px;
	position: relative;
	width: 100%;
}
*/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[hello.sun]

Thanks Victor!

If CSS is for styling, PHP is for structure and functioning?

I'm currently learning html and css from the W3 course.

Also, I found using the Academy Pro 'cs footer' accomplishes what I was trying to do... center call-to-action widget.

[Author]

Posts