- View Offline
- Creating the main panel and tab containers
- Adding content to the containers
- Adding CSS styles to the text and tabs
- Adding the jQuery $(document).ready() function
- Assigning click events to the tabs
- Setting an autostart on page load
- Creating custom graphics for the panels
- Assigning custom classes to the HTML elements
Skill Level Intermediate
Now, if you'd like to customize the graphics that we're going to be using in the background for the panels, you can come into the Exercise Files and in folder 3, you can open up panel_backgrounds.psd. Now in the last movie, we set the width of the panel to be 500 pixels. So what I have done here is brought out a guide that matches the 500 pixel mark, to sort of give me a sense of how wide my content needs to be. And there are a few ways you can set up background graphics. You can actually have the color be a gradient down to a solid color here and then set the same color for your background for the panel, so maybe you don't have to have your images quite as tall.
And the other thing you can do is you can actually set other graphics inside. So for example for the iPad course here, I have an iPad in the right inside here, and we're actually going to use padding to move or manipulate the panel content to make sure that the text doesn't overlap these background graphics. So in the Layers panel, I have the three individual items I'm using for this course, and of course you can put your own graphics in here and save these out. So when you have your desired artwork in the canvas area, we're going to come up to the File menu, choose Save for Web & Devices. We'll come up here and choose JPEG.
Next, you will hit Save. On the desktop, you are going to mySlidingPanels, going to the images directory and overwrite any of the individual graphics for ipad_ background, photo_background, or video_background. Or of course you can make your own file names and just modify the file names we're going to create in our CSS rules later on in the course. I'm going to cancel out of here since I want to keep these individual graphics. So once you have your new graphics in place or if you're going to use the graphics that were included in the exercise files, in the next movie we can start adding in some custom classes and then some CSS rules to make use of these graphics.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.