Added basic styling to root-level CSS file

widget_vincentdjango/forum/templates/forum/forum.html

@@ -3,17 +3,26 @@
 
 {% block title %} Widget's Forum {% endblock %}
 {% block heading %}
-	<h1> Welcome to Widget's Forum! </h1>
+	<h1 id="header"> Welcome to Widget's Forum! </h1>
+	<div class="separator-bar"></div>
 {% endblock %}
 {% block content %}
-	<h2> Forum Posts: </h2>
+	<h2 class="subheader"> Forum Posts: </h2>
 	<ul>
 		{% for forumpost in forumposts|dictsortreversed:"pub_datetime" %}
-		<li>
-			<a href="{{ forumpost.get_absolute_url }}"> {{ forumpost.title }} by {{ forumpost.author.first_name }} {{ forumpost.author.last_name }} </a>
+		<li class="object-cell">
+			<a href="{{ forumpost.get_absolute_url }}"> <span class="object-title">{{ forumpost.title }}</span> <span class="object-subtitle">by {{ forumpost.author.first_name }} {{ forumpost.author.last_name }}</span> </a>
 		</li>
 		{% endfor %}
     </ul>
-	<hr>
-	<button onclick="window.location.href='{% url 'forum:forumpost-add' %}';"> New Post </button>
+	<div class="separator-bar"></div>
+{% endblock %}
+{% block navigation %}
+	<button onclick="window.location.href='{% url 'forum:forumpost-add' %}';" class="action-button"> New Post </button>
+    <div id="footer">
+        <a href="{% url 'dashboard:index' %}">Dashboard</a>
+        <a href="{% url 'announcementBoard:index' %}">Announcements</a>
+        <a href="{% url 'assignments:homePage' %}">Assignments</a>
+        <a href="{% url 'widget_calendar:index' %}">Calendar</a>
+    </div>
 {% endblock %}
\ No newline at end of file

widget_vincentdjango/forum/templates/forum/forumpost-add.html

@@ -3,13 +3,13 @@
 
 {% block title %} Add Post {% endblock %}
 {% block heading %}
-	<h1> Add a new Post: </h1>
+	<h1 class="subheader"> Add a new Post: </h1>
 {% endblock %}
 {% block content %}
 	<form method="post">
 		{% csrf_token %}
-		{{ form.as_p }}
-		<br>
-		<input type="submit" value="Save New Post">
+		<div class="form-fields"> {{ form.as_p }} </div>
+		<div class="separator-bar"></div>
+		<input class="action-button" type="submit" value="Save New Post">
 	</form>
 {% endblock %}
\ No newline at end of file

widget_vincentdjango/forum/templates/forum/forumpost-details.html

@@ -3,20 +3,20 @@
 
 {% block title %} {{ object.title }} {% endblock %}
 {% block heading %}
-	<h1> {{ object.title }} </h1>
-	<h2> by {{ object.author.first_name }} {{ object.author.last_name }} </h2>
-	<h4> {{ object.format_pub_datetime }} </h4>
-	<p> {{ object.body }} </p>
+	<h1 class="detail-header"> {{ object.title }} </h1>
+	<h2 class="detail-additionalinfo"> by {{ object.author.first_name }} {{ object.author.last_name }} </h2>
+	<h4 class="detail-additionalinfo"> {{ object.format_pub_datetime }} </h4>
+	<p class="detail-body"> {{ object.body }} </p>
 {% endblock %}
 {% block content %}
-	<hr>
-	<h2> Post Replies: </h2>
+	<div class="separator-bar"></div>
+	<h2 class="subheader"> Post Replies: </h2>
 	{% for reply in object.replies.all %}
-		<p> by {{ reply.author.first_name }} {{ reply.author.last_name }} </p>
-		<p> {{ reply.format_pub_datetime }} </p>
-		<p> {{ reply.body }} </p>
+		<p class="detail-additionalinfo"> by {{ reply.author.first_name }} {{ reply.author.last_name }} </p>
+		<p class="detail-additionalinfo"> {{ reply.format_pub_datetime }} </p>
+		<p class="detail-body"> {{ reply.body }} </p>
 		<br>
 	{% endfor %}
-	<hr>
-	<button onclick="window.location.href='{% url 'forum:forumpost-edit' pk=object.pk %}';"> Edit Post </button>
+	<div class="separator-bar"></div>
+	<button class="action-button" onclick="window.location.href='{% url 'forum:forumpost-edit' pk=object.pk %}';"> Edit Post </button>
 {% endblock %}
\ No newline at end of file

widget_vincentdjango/forum/templates/forum/forumpost-edit.html

@@ -3,13 +3,13 @@
 
 {% block title %} Edit Post {% endblock %}
 {% block heading %}
-	<h1> Edit Post: </h1>
+	<h1 class="subheader"> Edit Post: </h1>
 {% endblock %}
 {% block content %}
 	<form method="post">
 		{% csrf_token %}
 		{{ form.as_p }}
-		<br>
-		<input type="submit" value="Save Changes">
+		<div class="separator-bar"></div>
+		<input type="submit" value="Save Changes" class="action-button">
 	</form>
 {% endblock %}
\ No newline at end of file

widget_vincentdjango/static/base.css

 body {
-	font-family: "Segoe UI";
+	font-family: "Franklin Gothic";
+}
+
+ul {
+	padding: 0 0;
+	text-align: center;
+}
+
+#header {
+	text-align: center;
+	width: 100%;
+	font-family: "Franklin Gothic Medium";
+	font-size: 40px;
+	background-color: #444;
+	color: white;
+	margin: 0;
+	padding: 50px 0;
+	text-shadow: 0 0 1px currentColor;
+	
+	transition: all 0.3s;
+}
+
+.subheader {
+	text-align: center;
+	font-family: "Franklin Gothic Medium";
+	font-size: 28px;
+	margin: 6px 0;
+	padding: 6px 0;
+	background-color: #CCE;
+	text-shadow: 0 0 1px currentColor;
+}
+
+.detail-header {
+	text-align: center;
+	font-family: "Franklin Gothic Medium";
+	font-size: 24px;
+}
+
+.detail-additionalinfo {
+	text-align: center;
+	font-family: "Franklin Gothic Medium";
+	font-size: 14px;
+	margin: 6px 0;
+}
+
+.detail-body {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Franklin Gothic";
+}
+
+.separator-bar {
+	height: 1px;
+	border-bottom: 1px solid black;
+	border-top: 1px solid black;
+	margin: 20px 0;
+}
+
+.object-cell {
+	border-radius: 6px;
+	background-color: #F0F0F0;
+	padding: 10px;
+	margin: 10px;
+	list-style: none;
+	
+	transition: all 0.3s;
+}
+
+.object-cell:hover {
+	background-color: #DDE;
+}
+
+.object-title {
+	font-size: 16px;
+	font-weight: bold;
+}
+
+.object-subtitle {
+	font-size: 14px;
+}
+
+a {
+	text-decoration: none;
+	
+	transition: 0.3s;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: black;
+}
+
+input {
+	font-family: "Franklin Gothic";
+	width: 75%;
+}
+
+.form-fields {
+	margin: auto;
+}
+
+.action-button {
+	margin: auto;
+	padding: 6px;
+	display: block;
+	text-align: center;
+	width: 50%;
+	background-color: #F0F0F0;
+	font-family: "Franklin Gothic";
+	font-size: 16px;
+	border-radius: 6px;
+	
+	transition: 0.3s;
+}
+
+.action-button:hover {
+	background-color: #CCE;
+	cursor: pointer;
+}
+
+#footer {
+	display: flex;
+    justify-content: center;
+}
+
+#footer > a {
+	padding: 10px 10px;
 }
\ No newline at end of file