Struggling to create cool header for my sidebar widget

[Max]

Hey Tom

I struggling trying to create a header for my sidebars. I have several blog, article, chat, etc with a fontawesome icon for each.

I want to have something that looks like a dollar bill. That is light colored border at 10px. Then the icon sitting on a army green background, and then the icon itself black but with a circle background behind it in the same lighter color as the border.

This is as far as I have got and then the wheel has fallen off:

<h2 style="text-align: center; margin:5px 5px 5px 5px;padding-top: 10px;padding-bottom: 10px; background-color:#abb6a6;" background-size: 100% 60px; ><i class="fa fa-mortar-board fa-lg" style="color: #fff;"><!-- HTML comment --></i></h2>

Any assistance you can offer is greatly appreciated. In the past I would just knock this up in PS. But I am trying to limit the amount of graphics on this site and want to learn more code based styling.

Kind Regards

Max

[Max]

The left and right padding inside the widget container is 10px.

[Tom]

Hi Max,

I have to be careful with what kind of support I offer in here, this seems to be more CSS/HTML help than a GeneratePress related issue.

Have you ever tried posting on http://stackoverflow.com/? It’s a great community for general coding help and might be a really helpful resource for you 🙂

[Author]

Posts