by
Lessons:33Length:3.7 hours
Drupal 8 1
  • Overview
  • Transcript

5.9 Modifying the Default Theme CSS

There are many ways, in Drupal, to take an existing theme and modify it to give it some flair. Most of the ways to accomplish this—such as creating a custom theme—are fairly involved and require PHP coding knowledge. But I'm going to show you a simpler way to fix styling issues.

5.9 Modifying the Default Theme CSS

In a previous lesson when we were going into our content types and modifying the display we ran into a bit of an issue. Now, this is not an uncommon thing to happen when you are working with other themes, to run into a few formatting issues or things like that. And the example that I wanted to talk about for a moment is when you look at a speaker and when certain things are happening. It just so happened that we inlined a couple of our fields and then we left one of the labels as being above. And it just so happened that it was above a link to an entity reference. And then we kinda get this difference of formatting. So it's not really a bug per se, but it's just the way that the themes and the CSS that are within the themes that you're currently using, are designed to render this onto the display. Now there's are a couple different ways to get around this. There are some very complicated ways to really understand how the themes work in creating sub-themes and digging into the operating system. And to get in and make modifications to the underlying CSS on the folder structures. And that can be a fairly complicated thing to do. So, if you're not familiar with those types of things, and at least at this point in the course, I feel like you're not ready to do those types of customizations. I will show you an interesting little module that you can install. And then ultimately tweak little things, like these little CSS issues, that you run into here and there. But the first thing that we need to do, is we need to identify where the issue lives. And one of the ways that you can do that in most browsers these days is using the developer tools. So what I wanna do is I'm actually going to put my cursor over the kinda quote, unquote problem area, and I'm gonna right click here. And I'm going to select inspect or inspect element or something like that, that your browser probably says. And it's gonna open up these developer tools somewhere. It's probably going to show you where you are currently located within your CSS and within your source code. Now things are a little bit jumbled on my screen because of the resolution. So if you lose it, a lot of times there's a little button up here that will allow you to select an element in the page to select it. So I'm gonna click that button, then I'm gonna come down here and I'm gonna select this Speaking At. So as you can see here, this is a div with a class of field with two underscores and a label that says Speaking At. So really what I wanna do is I wanna be able to tweak this a little bit. And maybe apply a custom CSS style to maybe make it bold, or increase the font, or make the text red. Or whatever you wanna do, it doesn't really matter any sort of modifications that you wanna do. So what I like to do a little bit is I like to play with these things a touch and see what is actually going on here. So we can see the font 0.8M. So you can play with the size and if I uncheck this it's going to remove that style. As you can see the font got a little bit bigger. So you could play with that if you want. But if you're just talking about the fact that it isn't bold and everything else is bold, and you wanna make it that way, that's the next issue here for the field type entity reference, field label combination of classes that are applied to the div here. So, as you can see the font right here is normal. So, if I uncheck that, it's gonna make that bold and that makes things a little bit better for me. Now, you can once again play with the size, and I'm just gonna give you a simple example here to make it bold like everything else. So really what I wanna do is I want to modify what's going on with this combination of classes. So I'm gonna actually highlight all of this as best as I can. And once I've done that, I'm actually going to copy it to my clipboard just so I can remember where I'm at. So now, what I wanna do is, I wanna be able to edit that little bit of CSS that's in there, or maybe override it with something else. Now the way that I'm gonna show you to do that instead of creating a sub-theme is actually by using another module. So once again in order to use modules, we're going to go back to our administrative toolbar here. And we're going to go to Extend, and this is going to take you to where you can install new modules. But what I wanna do is I wanna right click on Contributed Modules and this is gonna take us over to Drupal.org. And when it does that, I want to use the search bar and I wanna search for CSS Editor. And this is going to be a cool little tool for you if you would like to make little tweaks like this without having to create complicated sub-themes. And what this tool's going to allow you to do is modify some of the CSS of the theme within your browser. And once again if you scroll down to the bottom, you're gonna notice that this is Drupal 8 compatible. So if you want to follow along with me, you can actually copy the URL once again to this tar file or to the zip file using the copy link address or copy link or something like that. And heading back over to Drupal, install new module and go ahead and paste that in here. And if you do that and hit Install, you can install the CSS Editor. Now in order to enable it, and actually install it, you'll have to go into Extend. And then you're going to search for CSS Editor, and you can find it here. I already have it installed and enabled but you can go ahead and check this box and click Install, and it's going to install it for you. So now what we wanna do is we wanna use this module to make a small modification to that spot, that little label, within my contents layout. So in order to do that, I gonna come into appearance. I'm going to go into the currently active theme, which in this case is Bartik. And I'm gonna select settings and then I'm gonna scroll down a little ways. And what installing that CSS Editor did was, created this little section down at the bottom called Custom CSS. So now what I can do is, I can extend this and what it gave me is a box here that's going to allow me to edit some CSS. And I'm gonna give myself a little bit of space here if possible. And so what I wanna do is I wanna add in some custom CSS and I can see what my page is going to look like. Now sometimes the real time display works and sometimes it doesn't, depending on what you're attempting to do. But that's why I copied that class combination from my developer tools inspector before. So I'm gonna go ahead and paste that in here. So it was this combination of the field-type-entity-reference and field_label and I can go ahead and modify my CSS just like I would in a normal stylesheet. Now don't worry if you're not familiar with CSS. It's not really that necessary for you to be able to get in here and do this. You can obviously just play around with things a little bit and maybe restructure the way things are laid out. And just kind of get things to work the way you want it. Other than, that you're just gonna have to kind of play around with some other themes, maybe, to get the look and feel the way you want it. But this is another way around it. So all I really wanted to do was I wanted to change the font weight. As you saw before in the example, the font weight was actually normal and I want it to be bold. So what I'm gonna do is come in here and say I wanna set the font weight to be bold. Just like that and that's all you really have to do. But you also have to be sure that you click this Enable or disable custom CSS. If I click this, it's going to enable the overriding and the using of my custom CSS within the theme. So once I've made those changes I can come in and click Save configuration. And then I can go back into my site, so let's go back to Content and let's go back to Derek Jensen. And if I were to come and take a look now you're gonna see down at the bottom Speaking At is now bold. So I was able to override the default CSS that is in the active theme. So this is just kind of a neat little trick that you can use to tweak things here and there. Even if you wanna get in and add in some of your own CSS, you can absolutely do it that way. And so, if you are so inclined to install that Editor, then I would definitely give it a ride. And I believe there are a couple examples on the site to show you a little bit on how to use it. You can take a look at this video and get some more information. And that is my little tip to be able to get in and modify some of the styles that CSS found within your theme.

Back to the top