Join Chris Converse for an in-depth discussion in this video Adding CSS rules for the large marquee, part of Creating a Marquee in WordPress with jQuery.
Now to see the navigation that we injected earlier, we're going to need to add some CSS. And we're also going to add the remaining CSS rules for the large marquee. So let's switch back to our text editor. Inside of the B snippet's file, let's find snippet 21. In here, we're going to define a series of CSS rules to target all of the HTML that we've been injecting. So, what we're going to do is inside of the main marquee, we're going to target marquee container one. We're also going to target marquee container two. Now, we haven't injected this yet, but we want to define the properties for these.
For the panel caption, we have a bunch of properties inside up here. Most notably, we have a background with an rgba set to red, green, and blue 255, which gives us white. And 0.85 on the transparency, which gives us a 15% transparent background. And then down here for panel_caption, we have all of the different styling for the type. And again, you can change any of these to match the design of your website. So let's come up here and copy all of these CSS rules. Let's switch over to Marquee.Css. Let's come in here and paste all of these. I'll add a few lines to the bottom here. Now we're not going to be able to see these in the browser since we're not actually activating these containers yet.
We'll do that later on. But let's save our file. Let's go back to B snippets. Let's scroll down. Let's find snippet 22. Inside of here we have some CSS rules that are going to style the navigation, and we will be able to see these since we did start injecting these in the last movie. So we're going to target the marquee nav. We're going to set a z-index of the marquee nav container to 103. This way, this will always be on top of container two. So the stacking order will be container one, container two and then the marquee nav.
We use position absolute for this as well. Now next we're targeting all of those divs inside of the marquee nav. One property I put in here is a transition. This is a CSS three animation property. We're setting the background color to be part of this transition. The duration is one second, and the animation type is linear. This means that any browser that supports CSS three animation will be able to animate the background color when it changes. So we're going to change the background color when the user hovers over the navigation elements, or we assign the selected class to the navigation item. Let's come up here and select all of these, copy these to the clip board, switch over to marquee.CSS.
Hit a few returns and then we'll paste in these rules as well. So now let's hit file save. Let's switch back to our site and let's come up and hit reload. So now we can see our navigation element showing up here. Now since I am using a browser that's supports CSS three animation as I hover over these, we'll get an animation through the hover state. And then when I roll away it will animate back to the normal state. Now these navigation items do relate to the total number of panels. Now to test this, let's go back to the admin. Let's go down to our marquee post type. For the first one I'm going to click on Quick Edit. Let's change the status from published to draft.
Click update. I'll do the same thing for getting ready for spring. Change that to draft, hit update. So now at this point, I have only two more key panels that are set to publish. So if I go back to the main site, hit reload, now we'll see we only have two individual navigation items showing up. Now that I see this is working, let's go back to the admin, I'm going to come in here and just turn these back to published. This way we'll go back to having four marquee panels. Hit update on both of those, come back then hit reload. Now that we have all of the navigation CSS in place, and the CSS rules for the large screen, we're going to add in some click events and then we're going to set up the panel transitions so that we can actually see the marquee
This course was created by Chris Converse. We're honored to host this training in our library.
- Adding photos to the Media Library
- Creating a custom post type
- Adding custom CSS to your theme
- Retrieving data from the custom post type
- Injecting HTML and navigation
- Styling the large and small marquees
- Reordering the marquee panels