Church Admin Plugin

Organise your church through your website!

Styling the prayer request form

  |   By  |  0 Comments

Today someone sent me a screenshot of the prayer request form from their website – it looked awful!

It’s a nice clean theme, but this page looks awful.

What can you do? Depends on how confident you are with html!

If you right click and then inspect on the page, you will be able to see the HTML and CSS.

This theme has placed it correctly just above the first article. And above the little bit of Prayer request form code is a tag called “Main”. Notice that there is the word flex in a bubble next to it. That told me that it is a flexible layout!

So now we need to make the prayer request section fill the width and the other content needs to go underneath.

One of the nice features of WordPress is the Customizer, which allows you to make tweaks live.

Login to your dashboard and click on Customize. Then click on Additional CSS.

What we need to do in this case is make all the articles work on flex-wrap basis and then the form can be set to 100%.

So the code to add is

#main{flex-wrap:wrap;}
.church-admin-prayer-request{flex: 0 0 100%; }

.post-excerpt{padding:20px;}

The command flex:0 0 100% – tells it not to shrink or grow but be 100% width!

I added in some padding to each article to so they weren’t as bunched.

Finally hit publish to save the change. Phew.

If that’s daunting. Get in touch – I normally charge £30ph ($40ph) and for that one it took long to write this post about it!