- 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.
- 剪映AI視頻剪輯：AI腳本+AI繪畫+圖文生成+數字人制作
- Maya影視動畫高級模型制作全解析
- InDesign平面設計案例教程：從設計到印刷
- Drools規則引擎技術指南
- MATLAB 2015從入門到精通
- 中文版CorelDRAW X6基礎培訓教程（第2版）
- Python Testing: Beginner's Guide
- 3dsMax 2018動畫制作基礎教程（第4版）
- 剪映+Vlog+Premiere短視頻制作從新手到高手
- UG NX 12.0中文版從入門到精通
- Refactoring with Microsoft Visual Studio 2010
- Joomla! with Flash
- 從零開始：Dreamweaver CS6中文版基礎培訓教程
- Procreate數字繪畫實戰教程（全彩微課版）
- SolidWorks 2015中文版機械設計從入門到精通