How to style your featured images set to above title position differently

If you wanted to style your featured images like this when they are set to the “Above Title” position:

above-title-finished

But leave your Single Post featured images looking like this:

above-title-finished-single

There are just a few steps. First, you’ll need two layouts. One for your Home Page or Blog Index with featured images set to above title and one for your posts (either Single or Single » Post) with the featured image position set to something other than “Above Title”.

Now, when you set your featured image position to above title, the CSS class .post-thumbnail-above-title
gets assigned to the anchor tag enclosing the featured image.

<a href="http://dev/in-the-kitchen-at-sunset-for-the-perfect-pose/" class="post-thumbnail post-thumbnail-above-title">

Great, we can use that to style only the featured images set to “Above Title”.

The CSS

The first line, adjusts the margin on the anchor tag enclosing the featured image to negative values for all except the bottom.

The second line sets the padding and border to 0 on the featured image set to the “Above Title” position so there is no white border around the featured image.

The last line, pushes the post title down a little more to create more space between the featured image and the post title.

That’s all there is to it!

Questions, perhaps?

Why use the .custom class in front of my CSS?
I use it to make my code more specific so it will override other CSS applied to the same element using different rules without having to rely on !important.

What is ~ in the last line/rule?
That is the General Sibling Selector. Please see this article at CSS Tricks for more information.

What size should I set my featured images?
It doesn’t matter. You shouldn’t need to adjust the code.

What size should I make my content block
It doesn’t matter. You shouldn’t need to adjust the code.

Apply scripts to certain pages

This is an Intermediate tutorial. You should be familiar with PHP.

Headway makes it easy for you to add scripts to your WordPress site with the ability to add scripts to the Header and/or Footer. This option is found in the WordPress » Headway » Options » Scripts/Analytics

conditonal-scripts

What is a little known fact is those boxes also parse PHP. Convenient, we know! A limitation is that if you place scripts or code in those boxes, those scripts or code get added to every page/post/archive you have.

What if you want to apply a script to only one page

Aha. You may think that you have to install a new plugin to do this. Of course, you don’t. All we have to do is make use of WordPress’s already existing conditional tags.

So for example, if you wanted to apply something only on your Portfolio page, you could do something like this:

The is_page conditional tag checks to see if a page is being displayed. You can then fill in the parameters to select one page or multiple pages. For more on is_page, please see the WordPress Codex

How to correctly make edits to the core Headway Blocks

Please note: This is an Advanced tutorial.  Skills required: Creation of child theme and Advanced PHP. You may find that you want to add a feature to one of the core Headway Blocks but when you edit the core files directly, those changes get overwritten when you update Headway.  Not to mention, editing the core…Continue Reading

Enabling the Headway Meta boxes in your Custom Post Types

You will need to know how to create custom post types to understand this tutorial.  This tutorial does not cover creating your own Custom Post Types. You’ll notice that when creating/editing Posts and Pages in WordPress, there are some Headway specific metaboxes: Title Control Shared Layout Featured Image Position SEO (if using Headway’s SEO options)…Continue Reading

Screencast Thursday: Working with Shared Layouts

As indicated in the video, the first few minutes are me going over the when/why to use Shared Layouts. If you want to read that (below) instead, skip to 4:00 in the video. Summary of when/why to use shared layouts: Use Shared layouts when layout inheritance isn’t enough. Example: You want some posts to have…Continue Reading

Creating a functional header

This comes from a request in the forum on a walkthrough of how to have a header with logo, contact details and social media links. First thing to understand is that you can have multiple wrappers, which are containers for your blocks. This allows you to style groups of blocks differently. Let’s start in the…Continue Reading

How to use FancyBox Lightbox with Headway

Skills you will need: uploading files to your server, creating a Headway child theme, creating a WordPress gallery. In this tutorial, I will show you how to use FancyBox with Headway.  You certainly can use a plugin to take of this functionality for you but this tutorial is plugin free. Please note the licensing for…Continue Reading

Headway Newsletter

Get the latest updates from our blog directly in your inbox! Are you ready to learn the latest from Headway Themes?

Copyright © 2014 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress