ASP.NET Core 2 MVC Forum | 14 | CSS and Static Files

In this episode, we finally get to work adding some style to our forum app!

In this course, we’ll build a feature-complete Forum application from scratch using ASP .NET Core 2.0 MVC with a Microsoft SQL Server database back end. We’ll implement Azure file storage, SQL, and app deployment. We’ll work through each of the features in a natural order, starting out by setting up the overall architecture and basic features of the application, working through bug fixes, testing, and adding new features and customized styling as the course progresses.

[levitamiozzo]

I just love you, mate. I just want to quit my job, leave my family and be your servant until I just can't learn any more. Amazing tutorial, thank you so much!

[ayanda_genZ]

I HAVE BEEEN SEARCHING FOR THIS AND YOU JUST APPEARED MIN WHEN I was READY TO USE BORING BOOTSRAP THANK YOU SO MUCH FOR MAAKING THIS VIDEO

[yzbrian]

None of the css changes I make in the css file actually take effect on the page, anyone any clue why this might not be the case?

Turns out the css file gets cached and I need to refresh the whole cache in order to load the page properly. Chrome quick buttons are ctrl+f5

[Dollarwidur]

body {
background-image:
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}

.navbar {
box-shadow: 0 5px 4px -6px #000;
background-color: gray !important;
}
.navLogo {
background-image:
background-size: 100%;
width: 40px;
height: 40px;
display: inline-block;
}

.navbar li{
font-weight: bold;
}

.sectionHeader{
background-color:rgba(0, 0, 0, 0.9);
padding: 8px 0 24px 24px;
}

.sectionHeading{
color: white;
font-size: 1.3em;
font-family: 'Roboto';
padding: 16px 0 16px 0;
border-bottom: 1px solid #335;
margin-bottom: 12px;
}

.postHeading {
color: white;
font-size: 1.3em;
font-family: 'Roboto';
padding: 16px 0 16px 0;
}

.sectionInfo{
height: 400px;
background-color: white;
}

/* Front page heading */
.frontPageSplash {
text-align: center;
background-color: #dfff80;
background-repeat: no-repeat;
height: auto;
padding: 20px;
}

.frontPageLearn {
text-align: center;
opacity: 1;
font-family: 'Roboto';
color: dimgray;
}

.frontPageHeading {
text-align: center;
font-size: 3.2em;
}

.frontPageSubHeading {
font-weight: bold;
font-size: 2em;
}

/* Front page content */

.frontPageContent{
background-color: rgba(255, 255, 255, 0.9);
padding: 16px;
}

#latestPosts{
font-size: 1.2em;
font-weight: bold;
color: #333;
margin: 4px 0 16px 0;
}

/*Post page*/

.postTitle{
font-family: 'Roboto';
font-weight: bold;
}

.postSubTitle {
color: #888;
font-family: 'Roboto Mono';
font-size: 0.8em;
}

.postData{
display: inline-block;
}

.postDate{
color: #888;
font-family: 'Roboto Mono';
font-size: 0.8em;
}

.postLogo{
display: inline-block;
border-radius: 3px;
margin-right: 20px;
height: 40px;
width: 40px;
background-color: #ddd;
}

/* Forum index */
#forumIndexTable td{
background-color: rgba(255, 255, 255, 0.9);
}

#forumIndexTable tr:hover{
background-color: rgba(0, 116, 238, 1);
}

.forumData{
display:inline-block;
}

.forumTitle {
font-family: 'Roboto';
font-weight: bold;
font-size: 1.1em;
}

.forumSubTitle {
color: #888;
font-family: 'Roboto Mono';
font-size: 0.8em;
}

.forumDescription{
color:#555;
font-family: 'Roboto';
}

.forumLogo{
border-radius: 3px;
float: left;
margin-right: 20px;
height: 40px;
width: 40px;
background-color: #ddd;
border: 1px solid #555;
background-size: 100%
}

.forumPostCount{
color: #888;
font-family: 'Roboto Mono';
font-size: 0.9em;
}

.forumMemberCount {
color: #888;
font-family: 'Roboto Mono';
font-size: 0.9em;
}

#forumIndexContent{
padding-bottom: 60px;
background-color: white;
}

.noPosts{
text-align: center;
padding-top: 30px;
font-family: 'Roboto Mono';
}

/*Post*/
.createPostSection{
background-color: #fff;
padding: 24px;
}

/*wrapping element*/
.body-content{
padding-left:15px;
padding-right:15px;
}

/*carousel*/
.carousel-caption p{
font-size: 20px;
line-height: 1.4;
}

.sectionDescription{
color: #EEE;
}

.frontPageTopContainer{
padding: 40px 80px 42px 40px;
border: 1px solid #999;
background-color:#2569D5;
font-family: 'Roboto';
}

.homeSearch{
width: 50%;
margin-top: 8px;
background: rgba(0, 0, 0, 0.1);
padding: 8px;
border: 0px;
height: 1.8em;
font-size: 2.1em;
font-family: 'Roboto Mono';
font-weight: bold;
transition: ease-in 0.2s;
}

.homeSearch:focus{
border: none !important;
outline: none !important;
transition: ease-in 0.2s;
color: white;
background-color: rgba(0, 0, 0, 0.7);
box-shadow: 0 5px 4px -6px #000;

}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
font-size: 20px;
line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
width: 100%;
}

/* QR code generator */
#qrCode {
margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
/* Hide captions */
.carousel-caption {
display: none;
}
}

[katlegomasire]

Hi Wes


Thanks for the tutorial. Its great! Question, I had a look at the source code on GitHub but I cant find the images there? Is it possible that you can provide the images so I can follow along. I also picked up that you didn't provide the images for the library management application as well?

[seandenny]

Hey Wes! When is the next one coming?!

[kingsrim]

Wes says he has provided all the static files, but can someone point me to them? It's not there in his github repo. Thanks