CSS issues with postview.ascx

Topics: Themes
Jun 12, 2012 at 8:39 PM

Hello all.  newbie devloper here.  I am converting a statis template to a blogengine site and I am using the 960 grid system.  When I have the "front page" of the blog teh css styling is one way but I click on the link for the actual post the css styling and layout is different.  How would I accomplish this with blogengine? Any pointers in the rights direction would be accpreciated.

Coordinator
Jun 13, 2012 at 3:28 AM

If you trying to change layout on post detail, you can take a look at another theme that does it, for example JQ-Mobile. In its postview.asxc.cs it uses code like this:

 if (this.Location == ServingLocation.SinglePost)
{
    AddPostHeader();
}

Jun 19, 2012 at 6:42 PM

Thanks a lot.  So this snippet of code along with my CSS and everything else is all I would need?

Coordinator
Jun 19, 2012 at 7:06 PM
Edited Jun 19, 2012 at 7:10 PM

No, it is just example how to manipulate layout making it different for post list and single post.

Probably even simpler, you could use directly in aspx or master page:

 

<% if (this.Location == ServingLocation.SinglePost){ %>
<div>Will only show up on single post</div>
<% } else { %>
<div>Will show up on post list</div>
<% } %>

Not sure if "this" will work in this case though, but it is same idea as example above: you check post location and fill in your layout. "AddPostHeader()" is a function you'd have to replace with your own, doing what you need it to do.

Jun 22, 2012 at 3:32 AM

Ok, I've down your advice and went into postview.ascx and put in the following:

 

<%@ Import Namespace="BlogEngine.Core" %>
<%@ Control Language="C#" AutoEventWireup="true" EnableViewState="false" CodeFile="PostView.ascx.cs" Inherits="PostView" %> 


<% if (Location == ServingLocation.PostList) { %>
 <!-- post -->
                <article class="post">
			
				<!-- post header -->
				<header>
										<div class="seven columns omega">
							
						<h1><a href="<%=Post.RelativeOrAbsoluteLink %>" class="taggedlink"><%=Server.HtmlEncode(Post.Title) %></a></h1>
								
						<!-- post meta -->
						<div class="post-meta">
							<div class="three columns alpha">
                                <p class="post-category"><%=CategoryLinks(" | ") %></p>
							</div>
							<div class="four columns omega far-edge">
								by <a href="<%=VirtualPathUtility.ToAbsolute("~/") + "author/" + BlogEngine.Core.Utils.RemoveIllegalCharacters(Post.Author) %>.aspx" class="post-author"><%=Post.AuthorProfile != null ? Post.AuthorProfile.DisplayName : Post.Author %></a> on
								<time datetime="" class="post-date"><%=Post.DateCreated.ToString("d. MMMM yyyy HH:mm") %></time>
							</div>
						</div>
						<!-- end .post-meta -->
							
					</div>
				</header>
				
				<!-- post content -->
				<div class="seven columns omega">
						
					<!-- post excerpt -->
					<div class="post-excerpt">
						<asp:PlaceHolder ID="BodyContent" runat="server" />								
					</div>
					<!-- end .post-excerpt -->
							
					<!-- post footer -->
					<footer>													
					 <% if (BlogEngine.Core.BlogSettings.Instance.ModerationType == BlogEngine.Core.BlogSettings.Moderation.Disqus)
                                { %>
                                    <a rel="nofollow" href="<%=Post.PermaLink %>#disqus_thread"><%=Resources.labels.comments %></a>
                                <%}		
                                        		  else
                                { %>						
						<span class="post-tags tooltip-container"><a href="#" class="icon tag-icon tooltip-anchor"></a><span class="tooltip"><%=TagLinks(", ") %></span></span>
						<span class="post-comments tooltip-container"><a href="<%=Post.RelativeOrAbsoluteLink %>#comments" class="icon comments-icon tooltip-anchor"></a><span class="tooltip"><%=Resources.labels.comments %> (<%=Post.ApprovedComments.Count %>)</span></span> 
						<span class="post-permalink tooltip-container"><a href="<%=Post.PermaLink %>" title="<%=Server.HtmlEncode(Post.Title) %>" class="icon permalink-icon tooltip-anchor"></a><span class="tooltip">Permalink</span></span>
					            <%} %>

                                <%=AdminLinks %>
					</footer>
					<!-- post footer -->
				</div>
				
				<div class="clear"></div>
				
			</article>
 <!-- end .post -->


 <% } else { %>

<!-- Single Post -->
			<article class="post single">			
				<header>	
					<h1 class="page-title" ><%=Server.HtmlEncode(Post.Title) %></h1>
					
					<div class="post-meta">
						<div class="five columns alpha">
							<p class="post-category"><%=CategoryLinks(" | ") %></p>
						</div>
						<div class="six columns omega far-edge">
							by <a href="<%=VirtualPathUtility.ToAbsolute("~/") + "author/" + BlogEngine.Core.Utils.RemoveIllegalCharacters(Post.Author) %>.aspx" class="post-author"><%=Post.AuthorProfile != null ? Post.AuthorProfile.DisplayName : Post.Author %></a> on
							<time datetime="" class="post-date"><%=Post.DateCreated.ToString("d. MMMM yyyy HH:mm") %></time>
						</div>
					</div>
					
				</header>
				
									
								
								
				<div class="post-content">	
					<asp:PlaceHolder ID="BodyContent" runat="server" />			
				</div>
			
				
				<!-- post footer -->
                <footer>
                <% if (BlogEngine.Core.BlogSettings.Instance.ModerationType == BlogEngine.Core.BlogSettings.Moderation.Disqus)
                                { %>
                                    <a rel="nofollow" href="<%=Post.PermaLink %>#disqus_thread"><%=Resources.labels.comments %></a>
                                <%}		
                                        		  else
                                { %>						
                   
																	
					<span class="post-tags tooltip-container"><a href="#" class="icon tag-icon tooltip-anchor"></a><span class="tooltip"><%=TagLinks(", ") %></span></span>
													
				 
					<span class="post-permalink tooltip-container"><a href="<%=Post.PermaLink %>" class="icon permalink-icon tooltip-anchor"></a><span class="tooltip">Permalink</span></span>

                     <%} %>

                 <%=AdminLinks %>

				</footer>
				<!-- post footer -->
					
			</article>	
			<!-- end .post -->

<% } %>

It all seems to work ok but there is a couple of issues.  I can't have the asp place holder there the ID="BodyContent" twice.   What should I do to change it?  If I try to name it something else no text shows up so the "BodyContent" ID must be referenced somewhere.  
Coordinator
Jun 22, 2012 at 7:38 PM

You might need to create 2 sub-postviews and then load one based on conditions. If you look at arthemia theme I believe it uses this technique. I has several controls and load them dynamically based on conditions using "LoadControl(path)". Also this might help.