Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:33Length:3.7 hours
  • Overview
  • Transcript

2.4 Formatting Your Content Types

Just being able to create a content type is only one piece of the puzzle. You also have to be able to present that data to the end user in a way that makes sense and is aesthetically pleasing. This lesson is all about formatting the display of a content type—either your own custom type or a built-in one.

2.4 Formatting Your Content Types

In our previous lesson we learned how to create our own content types that we can now add to our Drupal sites. And we learned a little bit about playing around with the form display. As well as the actual display after something has been published to our site. Which is what we see right here. Now as we start to get into the design of our site in the layout of how things are going to look to the end user. We can start to take a look at this and realize, maybe we don't like this format. Maybe we would like to structure this in a little bit better way. So that things begin to flow and really look good to our standards when we're building our website. And the way that we do that is by managing the display of our content types. Let's play around with it a little bit so we can get a good feel on how we can adapt this to the screen. So what we're gonna do now is we want to adjust the display of our content type. So we're gonna go back into Structure. We're gonna go back down to Content types. And we want to come into, well, any of these really. We can play around with whether we created them or not, even the article in the basic page. We could go in and modify how those look on the screen. But in this case we're actually going to work with my first content type. So what I want to do is come over to the Operations drop down and I want to select Manage Display. Now in here as I kind of mentioned before. What I'd like to be able to do is display this in a way that I feel is a little bit more indicative of what my design style is. And it's actually pretty simple. There are a few things that we can tweak here once again we talked a little bit about. We can change the field order, for the fields that show up within our content type and in all honesty I feel like this is fine. The next thing that we can tweak is the label or where the label is with respect to the actual data that we have. So for the body, we actually don't show a label. So we could show a label, we could show Body. And have it be either above the content or in line with the content. But I think hidden is probably a better way to do it. Now submission date and price. As you maybe remember before these things are kind of laid out vertically so it has that bolded submission date, and then the actual date of its submission below it. And then a bolded price, and then it shows the actual price below it. And to me that doesn't make too much sense. I'd like to maybe put those things horizontal as opposed to vertical. And we can do that by changing the location of the label with respect to the data. So in this case by default both of these are above. And I think that looks a little bit not as aesthetically pleasing to the eye. So what I want to do is I want to change that to be inline. So let's change both of these to be inline. And then we're going to go ahead and save that. Now we can come back to our site. And after just making that very small change with a couple of drop down buttons. We've now changed it so that our submission date is in line with the actual date as well as the price. That looks pretty good to me. But one thing that I don't really care for is the structure of the date here. To me, that's difficult to read. So I'd like to play around with that a little bit as well. So I can come back in the structure. I'll go into my content types. I'll go to my first content type, we'll go back to Manage display again. And now as I mentioned before if you go over to the far right, and you see these little gears that means we can configure something. So I'm actually going to configure my Submission Date. And we can come in here, and we can do a time zone override if we would like. Which I don't really care to do, I like to leave it as it is set already as non selected. But I can change the date format. So what's a better format, I think that's a little bit easier to read for most people. And I'm actually going to go with the default long date. So the full day, the full month, the day in the year and then the time if it's specified. I think that's just a little bit more generally accepted. Especially if you're building a website that's going to be across different continents, across different nationalities. Then at least more people will be able to decipher what's going on there. So it's go ahead and hit Update and then we will save our changes to our display. Now, we can come back to our site and we see that it's automatically been updated. So now we have our submission date and price labels in line with the actual data associated with them. And then we have our formatted date time right here as well as our price here. So this is starting to look a little bit better. And these are little tweaks that you'll be able to do along the way when you're building out the content on your site. Believe me, just about everything on a Drupal site is configurable. And you can modify the layout really without needing to know any sort of HTML or CSS. Although you could get in and do those types of things. But I think to be able to do these little types of changes is very beneficial. Being able to go into Drupal and to configure these things through the interface.

Back to the top