How to create wintersong author widget in another theme

[bazil]

Hi I recently got started with studiopress and I'm working with the Genesis Sample theme.

I love the sidebar author widget on wintersong with the circular image. I would like to implement this with the sample theme.

I understand that this can be done with CSS, has anybody done it? or would somebody be able to give me some hints of where to start?

[Dorian Speed]

Hi, Bazil - in Wintersong, that's actually a modification of the header, but you can accomplish something similar using a Genesis Author widget and modifying your style.css file.

I highly recommend using Firebug to find the CSS that controls different elements on your site. We have a tutorial for using Firebug here: http://www.studiopress.com/tips/using-firebug.htm. I'd take a look at the Wintersong demo and go from there, using Firebug to suss out how that section is formatted.

The round avatar is achieved with the border-radius property in CSS. In Wintersong, the code is:

.site-header .avatar,
.site-header .site-avatar img {
border-radius: 50%;
display: block;
float: none;
height: 112px;
margin: 0 auto 30px;
margin: 0 auto 3rem;
width: 112px;
}

---

Bringing websites Up to Speed
Firebug will light the way to understanding the secrets of the Internet!

[bazil]

Thanks Dorian,

I just added a text widget with a html link to the image I wanted and used the CSS to modify.

Its looks just as I wanted thanks!!!

[Author]

Posts