tailieunhanh - Make a Joomla Template in 5 Easy Steps phần 5

Lưu file và tải lên. Bây giờ nếu bạn duyệt đến trang web của bạn hộp nên được liên kết và màu sắc của bạn. Bạn cũng sẽ nhận thấy rằng các hộp đầu vào hình thức đăng nhập cũng đã thay đổi màu sắc và màu xanh để phù hợp với hộp tìm kiếm. Tiếp theo chúng ta cần phải giải quyết ba cột giữ hộp đăng nhập, liên kết phổ biến và các liên kết tin tức mới nhất. | STEP FOUR ADJUST THE STYLE SHEET Now we need to change the colour of the border used for the input box so that it matches our colour scheme. To do this we need to go to line 402 and let s change the colour to 0055B3 so it looks like this 401 402 . input Cl i 403 padding 2px 404 border sol Ipx 0055B3Ì 405 background-co 406 Save the file and upload. Now if you browse to your site the box should be aligned and in your colours. You will also notice that the login form input boxes have also changed colour and are now blue to match the search box. Next we need to tackle the three columns that hold the login box popular links and latest news links. Login Box Popular Latest News We need to make some major changes to the style for these areas. The background image behind the titles needs to go and we need to format them so they fit our clean style. So let s start with the header row for each of the columns at present it uses a background image to give it a silver background. We are going to remove this and instead have a single one pixel border at the bottom of each header. To do this we need to edit at line 465 we are going to comment out the background style change the text colour to 0055B3 remove the left padding change the font size to 14 pixels and finally add our bottom border. The section now looks like this 463 464 table .moduletable th h3 465 background urlÍ. images subhead repeat-x 466 color 0055B3 467 text-align left 468 padding-lei t Lipx 469 height 2 1px 470 line-height 2 1px 471 font-weight bold 472 font-size 14px 473 text-transform uppercase 474 margin 0 0 2px 0 475 border-bottom Ipx solid 0Ũ55B3 40 STEP FOUR ADJUST THE STYLE SHEET If we don t want the words upper case we comment out the text-transform line if you don t want them bold comment out the font-weight line it s pretty simple really. Next we need to get rid of the red hyperlinks and change their colour. To do this we need to scroll to line 336 now .