Joomla! Template Design Create your own professional-quality templates with this fast, friendly guide phần 8 ppsx

22 175 0
Joomla! Template Design Create your own professional-quality templates with this fast, friendly guide phần 8 ppsx

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

Chapter 7 [ 145 ] Summary In this chapter, we've looked at getting drop-down Suckersh menus and Flash content quickly and painlessly into your Joomla! site. Next up: getting AJAX with dynamic interactive forms into your Joomla! project. [...]... final design tips for working with Joomla! [ 161 ] Design Tips for Working with Joomla! In this last chapter, let's sum things up by giving you a few final design tips, tricks, and troubleshooting ideas that you can use in your future Joomla! template designs As we've gone through this book, quite a few tips have been given to you, and here are the top four to remember: 1 Create and keep lists: Check... referencing the link that you saved [ 156 ] Chapter 8 In Figure 8. 5, you can see our XML-driven CD lister loaded into Joomla! via the Wrapper module Figure 8. 5 AJAX, auto update CD view form The AJAX Factor As we mentioned, it's easy to give your site an "Ajaxy" feel regardless of asynchronously updating it with server-side XML, just by sprucing up your interface with some snappy JavaScripts The easiest way... lists, font lists, image-treatment lists from your initial design phase should be kept handy You'll find them to be useful and an excellent inspiration for your designs to come 2 Design for Firefox first and then fix for IE: Firefox is more than a browser preference; it's a true web designer and developer's tool 3 Validate your XHTML and CSS often: The more stable your markup and CSS, the less hacks and... just going to work well with a design (They're great for implying happy -friendly- ish tones or retro styles.) So you might as well know how to incorporate them into your Joomla! template The Classic: All Four Corners The classic way to handle rounded corners with CSS is to make sure the module is using the -3 $style selector (discussed in Chapters 3 and 6) and then use the divs Joomla! outputs to set... 100% via CSS A few items will require you to think and plan ahead, as you'll need to make sure the Joomla! template code accommodates the effect The best thing is that if you can implement these techniques in a Joomla! template, then you can implement them in any website Design Tips for Working with Joomla! Rounded Corners Rounded corners have been pretty popular in the past few years, to the point... the Joomla! Comment 2.4 component earlier Again, both of these extensions aren't true AJAX, but the slick factor is bound to impress your users Summary In this chapter, we reviewed the most common ways to get Ajaxy with your site, and we downloaded and installed two extensions and looked at how to use the wrapper in detail to house an existing, fully-working AJAX application Up next: some final design. .. href="css/lightbox.css" type="text/css" media="screen" /> Then, you can create a page in the Joomla! CMS, turn off the WYSIWYG editor for your user, and add in basic href links around your image tags as follows: [ 1 58 ] Chapter 8 That's it! You can also add the page as a wrapper, as we mentioned earlier,... Joomla! pages (Again you will need to turn off the WYSIWYG editor to add custom HTML code that references these toolkits.) Review the above and choose the one that suits your needs best Then download and reference it within your Joomla! template' s index.php header tags: ... div, module div, module { width: 100%; height: 30px; font-size: 1px; } module { margin: 0 30px; } The markup Joomla! outputs with a -3 $style looks something like this (I've added comments so that you can see which div will have which image associated with it These comments will not be in your Joomla! output.) f Design Tips for Working with Joomla! Create two images: left-side.gif and right-side.gif following the guidelines in Figure 9.1 Make sure that when the left-side.gif and right-side.gif are placed together (side by side), the whole rounded-corner image is as large as you would expect any area that uses this effect to be For example, if the largest rounded-corner . 145 ] Summary In this chapter, we've looked at getting drop-down Suckersh menus and Flash content quickly and painlessly into your Joomla! site. Next up: getting AJAX with dynamic interactive. painlessly into your Joomla! site. Next up: getting AJAX with dynamic interactive forms into your Joomla! project.

Ngày đăng: 14/08/2014, 11:20

Tài liệu cùng người dùng

Tài liệu liên quan