How Do I Style Individual Post Pages Differently Than Master Page?

Topics: ASP.NET 2.0, Controls, Themes
Sep 5, 2014 at 5:19 PM
Want to make the single post view page look slightly different than site master page (with blog excerpts). How can I code this?
Sep 11, 2014 at 1:33 AM
Hi Mista,

You can style your "Post" List where you have a list of posts differently from your "Single" post views with the use of CSS.

The Post List uses the class [ class="posts" ]

and the Single Post views uses the [ class="post ]

So you can have in your CSS to style each class differently according to your needs.


Like For PostList you have <H2> since you can not have more than one <H1> headers because you have more than one post listed.

But what if you don't want the titles to be the same size as H2 but instead wanted them to appear to be <H1>?

So here you go:

.posts .post-title H2
{

Size: 14px

}

.post .post-title H1
{

Size: 14px
}

Css above is not 100% correct but pesocode to show point.

In this fashion the Post Title Correctly uses the H1 and H2 tag while still having both the same size.


On side note through default BE theme uses <h2> for both.

But Post List should have <h2> and Single Post should be <h1> :)


This can be changed in the theme.master page very easily done.
Mar 28 at 12:21 AM
This answer is not correct, the PostList control uses the PostView control which uses the article tag with class=post on both the List and single post view.
<article class="post" id="post<%=Index %>">
    <header class="post-header">
        <h2 class="post-title">
            <a href="<%=Post.RelativeOrAbsoluteLink %>"><%=Server.HtmlEncode(Post.Title) %></a>
        </h2>
From what I can see, there is no way to target the PostList and Single Post View controls individually because they both use the PostView control.
Mar 29 at 11:17 PM
If you click the link, and reference this post, https://blogengine.codeplex.com/discussions/457121. It discusses how to add a conditional to the PostView control so you can style the PostList and the Single Post differently.
Apr 16 at 10:01 PM
Hi Khambley and others,


I just checked the rendered source code from BE from 2.0 through 3.3 and still get the following:


BE Version: 2.8 and below

Post List: <div id="ctl00_cphBody_PostList1_posts" class="posts">

Indivual Post: <article class="post" id="post0">


BE Version: 3.2

Post List: <div id="ctl00_cphBody_PostList1_posts" class="posts">

Indivual Post: <article class="post" id="post0">


So you can still target the CSS.

Class="posts" for List
Class="post for individual posts.


But, to have more formatting control over your posts can use your master page.

Like what Andy mentioned here:

https://blogengine.codeplex.com/discussions/457121