Join Joseph Lowery for an in-depth discussion in this video Handling oversized logos, part of Dreamweaver and WordPress: Building Mobile Sites.
- View Offline
One of the biggest creative challenges you face on the small screen is how to handle a logo. For many sites, their standard logo is simply too big for an optimized mobile phone layout. While it can be a bit of chore, there is often no way around it. With a new, smaller logo in hand, CSS can take care of the switching, but for that to happen, your logo must be inserted as a background image, as we have here in this theme. You can see this if I open up the header.php file, found in my theme. Go into Code, and you scroll down to the header, and you can see that there are no images there.
So this logo is brought in via CSS that's located in the style.css file. So let's scroll down, and there you see the logo in the header. Now, for my design I am going to move it outside of the header, and put it into the outerWrapper. So I am going to need to modify both the outerWrapper, and the header. I am going to first just grab the header code here, copy it, because there are a number of properties that I need to modify, and there is no need to type them all back in.
So I will copy that, and then go to style_phone.css. Let's get rid of our little placeholder, and paste in our existing code. Now I am going to modify it. In the Desktop version, we have 50 pixels up top and below. I am going to zero that out, so we can maximize our screen real estate. The max-width part of my fluid grid design, I am going to bring down from 51.75, all the way down to 14. And then I'm going to get rid of my padding, as well as the white background, and zero out all of my border-radiuses.
Now I'm ready to add in my background image. So I will enter in background, and I will restore the white background default color, and enter in the URL to my new small logo, which is located in the images folder, and it is called tpa_logo_small.png. Now, if you don't know the file name and path to your image, you can always use Dreamweaver's edit stylesheet to open up the dialog box, where you can click on browse for folder.
Okay, let's make this a no-repeat, and center it, and put it up top. Okay. Now, I also need to modify the header, so I am going to put in my header rule. In this case, I know that I need to get rid of the image that's in the background, so I'll type in background: none. And I also want to bring the header all the way to the top, so let's set padding-top to zero. Now, here is an odd one: in developing this design, I found that I needed to overstate the width, and set the width to 115% to make it work properly across devices.
So that's good; let's go ahead and save it. We'll go back to Design View. So now let's move from Tablet down to Smart Phone. If your screen does not Refresh properly, you may find that you need to toggle Live View on and off. So we've got lots of problems with the page, but you can tell that now I have my new logo in place, and that was the goal here. Mission accomplished.
- Setting up an existing WordPress site
- Targeting configurable site elements
- Setting up media queries
- Preparing for adaptive images
- Styling a blog for tablets
- Restructuring navigation for different-sized displays
- Developing a WordPress site for phones