So I can confirm that my theme does use my child's layout-blog.php file. While the editor ignores it, at least I know my theme doesn't.
PROBLEM SOLVED and it is an easy fix for the developer!
Your theme applies the class .post to all posts. The thing is, when a custom-post-type is used, the class .post becomes the class .
custom_post_type name.
In my case, the post receives the class .vehicle.
The fix is quite simple. While you should (and do) assign a class to each post with the name of the post-type, you should also give each post a universal class (ex: .allposts) that would apply regardless of the post type.
This way, this universal post class would have all the CSS currently assigned to .post and the user can add css based on each post-type to differentiate them if he should want to.
The fix:
Change the line
- Code: Select all
<article <?php post_class($custom_classes);?> id="post-<?php the_ID(); ?>">
to
- Code: Select all
<article class="<?php echo $custom_classes; ?> allposts" id="post-<?php the_ID(); ?>">
*verify the above... the point is to add allposts as a class.
The result of the above is that the HTML output for regular posts would be
- Code: Select all
<article class="post-1100 post type-contest status-publish hentry post-seq-1 post-parity-odd allposts" id="post-1100">
and for my vehicle custom post type it would be
- Code: Select all
<article class="post-1100 vehicle type-contest status-publish hentry post-seq-1 post-parity-odd allposts" id="post-1100">
Notice allposts at the end of the classes and the second class being the name of the post-type.
The CSS then would need to change from
- Code: Select all
.post, article.page {
border: 1px solid #c0c0c0;
background: #FFF;
padding: 25px 15px 1em 15px;
clear: both;
overflow: hidden;
margin-bottom: 10px;
}
.post .date {
height: 48px;
width: 48px;
right: 58px;
font: normal 150% Arial, Helvetica, sans-serif;
color: #ffffff;
text-align: center;
padding: 0;
line-height: 100%;
margin-left: -100%;
float: left;
position: relative;
}
.post .date span.day {
font: normal 100% Arial, Helvetica, sans-serif;
color: #ffffff;
text-align: center;
padding: 0;
line-height: 100%;
}
.post .date span.month {
height: 12px;
display: block;
font: normal 50% Arial, Helvetica, sans-serif;
color: #ffffff;
text-align: center;
padding-top: 2px;
}
.post .date span.year {
height: 12px;
display: block;
font: normal 50% Arial, Helvetica, sans-serif;
color: #ffffff;
text-align: center;
padding-top: 0;
}
.post .title {
float: left;
margin-left: 10px;
width: 635px;
}
.post .meta-pullout span.author, .page .meta-pullout span.author {
float: none;
padding-right: 0;
}
.post .title {
float: left;
width: 100%;
position: relative;
margin: 0;
padding: 0 0 0 10px;
}
.post .libtitle {
float: left;
margin-left: 0;
width: 745px;
}
to
- Code: Select all
.allposts, article.page {
border: 1px solid #c0c0c0;
background: #FFF;
padding: 25px 15px 1em 15px;
clear: both;
overflow: hidden;
margin-bottom: 10px;
}
.allposts .date {
height: 48px;
width: 48px;
right: 58px;
font: normal 150% Arial, Helvetica, sans-serif;
color: #ffffff;
text-align: center;
padding: 0;
line-height: 100%;
margin-left: -100%;
float: left;
position: relative;
}
.allposts .date span.day {
font: normal 100% Arial, Helvetica, sans-serif;
color: #ffffff;
text-align: center;
padding: 0;
line-height: 100%;
}
.allposts .date span.month {
height: 12px;
display: block;
font: normal 50% Arial, Helvetica, sans-serif;
color: #ffffff;
text-align: center;
padding-top: 2px;
}
.allposts .date span.year {
height: 12px;
display: block;
font: normal 50% Arial, Helvetica, sans-serif;
color: #ffffff;
text-align: center;
padding-top: 0;
}
.allposts .title {
float: left;
margin-left: 10px;
width: 635px;
}
.allposts .meta-pullout span.author, .page .meta-pullout span.author {
float: none;
padding-right: 0;
}
.allposts .title {
float: left;
width: 100%;
position: relative;
margin: 0;
padding: 0 0 0 10px;
}
.allposts .libtitle {
float: left;
margin-left: 0;
width: 745px;
}
The user is then free to further customize the CSS for posts, and each custom post type individually.
Here's hoping this fix makes it into the next version of either the theme or the custom post types plugin since this is fairly simple (though not obvious) and makes the theme that much more powerful when it comes to post-types!
As an intermediate step to get people to transition without issue, you could make the CSS look like this:
- Code: Select all
.allposts, .post, article.page, {
border: 1px solid #c0c0c0;
background: #FFF;
padding: 25px 15px 1em 15px;
clear: both;
overflow: hidden;
margin-bottom: 10px;
}
.allposts .date, .post .date {
height: 48px;
width: 48px;
right: 58px;
font: normal 150% Arial, Helvetica, sans-serif;
color: #ffffff;
text-align: center;
padding: 0;
line-height: 100%;
margin-left: -100%;
float: left;
position: relative;
}
.allposts .date span.day, .post .date span.day {
font: normal 100% Arial, Helvetica, sans-serif;
color: #ffffff;
text-align: center;
padding: 0;
line-height: 100%;
}
.allposts .date span.month, .post .date span.month {
height: 12px;
display: block;
font: normal 50% Arial, Helvetica, sans-serif;
color: #ffffff;
text-align: center;
padding-top: 2px;
}
.allposts .date span.year, .post .date span.year {
height: 12px;
display: block;
font: normal 50% Arial, Helvetica, sans-serif;
color: #ffffff;
text-align: center;
padding-top: 0;
}
.allposts .title, .post .title {
float: left;
margin-left: 10px;
width: 635px;
}
.allposts .meta-pullout span.author, .post .meta-pullout span.author, .page .meta-pullout span.author {
float: none;
padding-right: 0;
}
.allposts .title, .post .title {
float: left;
width: 100%;
position: relative;
margin: 0;
padding: 0 0 0 10px;
}
.allposts .libtitle, .post .libtitle {
float: left;
margin-left: 0;
width: 745px;
}
This above CSS will not affect sites currently using the theme nor will the modifications to the layout file.
Also, the php code change needs to be applies to ALL the layout files (layout-blog, layout-tiles, layout-mosaic, layout-list).