Implementint design for message detail view

VIPSWeb/static/css/vipsweb.css

@@ -734,4 +734,10 @@ table.messageTable tr, table.messageTable td
 	cursor:pointer;
 }
 
+.vipsMessageContainer {
+	margin-bottom: 15px;
+	margin-top: 15px;
+	background-color: white !important;
+}
+
 

vips_messages/templates/messages/detail.html

@@ -2,12 +2,16 @@
 {% load i18n %}
 {% block title%}{{ message.headline }}{%endblock%}
 {% block content %}
-{% if message.illustration_file_name %}
-<div class="messages_illustration"><img src="{{message.get_illustration_url}}" class="img-responsive"/></div>
-{% endif %}
-<h1>{{ message.heading }}</h1>
-<p class="byline">{{message.date_pub | date:"Y-m-d"}} / {{message.created_by}}</p>
-<p class="lead">{{message.lead_paragraph}}</p>
-<p>{{message.body|linebreaks}}</p>
-
+<div class="row">
+	<div class="col-md-3">&nbsp;</div>
+	<div class="col-md-9 vipsMessageContainer">	
+		{% if message.illustration_file_name %}
+		<div class="messages_illustration"><img src="{{message.get_illustration_url}}" class="img-responsive"/></div>
+		{% endif %}
+		<h1>{{ message.heading }}</h1>
+		<p class="byline">{{message.date_pub | date:"Y-m-d"}} / {{message.created_by}}</p>
+		<p class="lead">{{message.lead_paragraph}}</p>
+		<p>{{message.body|linebreaks}}</p>
+	</div>
+</div>
 {% endblock %}
\ No newline at end of file