- Joomla! 1.5: Beginner's Guide
- Eric Tiggeler
- 603字
- 2021-08-20 16:22:24
Time for action—preparing a new header file
As it is, our design still very much looks like any Joomla! site—and that big Joomla! logo on every page isn't helping much! You'll replace this with your client's logo. The original Joomla! logo is just 298 pixels wide and 75 pixels high. We'll create a new image that takes up the full width and height of the header; this way, we can change the site's looks distinctively with just one graphic.
- Open up your image editing tool. In this example, we'll use Adobe Photoshop, but any image editor will do.
- The space where we want to place our image (the full width and height of the template header) has these dimensions: 920 x 108 pixels. To leave room for a little margin, we'll create a new header file of slightly smaller dimensions: 900 x 98 pixels. Click on New. In the Width and Height boxes, fill in 900 and 98 pixels. Choose Background Contents: Transparent.
- In Photoshop, the PNG file shows a grey and white "checkerboard" background. This indicates the background is transparent, which means the colors of the header background will shine through. This way, the logo image you create blends in nicely with the overall design.
- Now you can create any logo you like. Let's skip the details, as these depend on the specific needs of your site and the tool you are using. For this example, I've created a nice rounded Web 2.0 style logo using two free fonts: Airstrip Four from www.dafont.com (see www.dafont.com/faq.php for installation instructions) and the Calibri Windows system font, I have also applied some Photoshop shapes and effects.
- Save the image as a PNG file. In Photoshop, click on Save for Web and Devices,choose the PNG-24 file format, and save the image as
srupheader.png. Make sure to select the Transparency checkbox to preserve the transparent background.Click on Save.
- In the next screen, choose a location on your computer and click on Save again. Done!
Tip
A previous version of the Microsoft Internet Explorer browser (version 6) doesn't display PNG images correctly if they contain transparent areas. If you want to accommodate for visitors using this old browser, it's better to use an image without transparency. Another solution is to use a Joomla! extension that remedies this specific browser issue. In Chapter 10, you'll learn more on adding extensions to Joomla!. Do a Web search for "Ultimate PNG Fix Plugin" to read more about this specific PNG extension and its use.
What just happened?
The header image file to replace the default Joomla! logo is ready, but we're not done yet. To get Joomla! to display this new file, we'll upload the image file to the web server and change a few simple lines in the template code
Tip
Living without Photoshop—free alternatives
Photoshop may be a fine graphic editing tool, but it's not exactly cheap. The standard Windows graphics editor Paint can do the job—but it's capabilities are very, very basic. Fortunately, there are many excellent and free Photoshop alternatives. You can even have essential Photoshopping capabilities on your computer without installing a thing. Just browse to www.pixlr.com and start creating and editing!
If you're looking for free graphic editing software programs, do a Web search for Paint.NET or GIMP. Both are very capable programs; Paint.NET is beginner friendly and at the same time quite powerful. The GIMP, an acronym for GNU Image Manipulation Program, is arguably the most popular free Photoshop contender. It's an open-source program that features a truckload of photo retouching and image editing tools.
- Python 2.6 Graphics Cookbook
- PowerPoint 2019從入門到精通（移動學習版）
- DSP開發寶典
- 詳解AutoCAD 2022機械設計（第6版）
- Mastering phpMyAdmin 3.1 for Effective MySQL Management
- Vivado從此開始（進階篇）
- Blender 2.5 Materials and Textures Cookbook
- Python Testing Cookbook
- Photoshop+CorelDRAW平面設計案例實戰：從入門到精通（視頻自學全彩版）
- Moodle Course Conversion: Beginner's Guide
- AutoCAD 2019中文版實戰從入門到精通
- JBoss Drools Business Rules
- 中文版3ds Max 2014/VRay 效果圖制作實例教程（全彩超值版）
- SQL編程基礎（原書第3版）
- phpBB: A User Guide