Видозмінюємо стандартний prosilver - Кабінет адміну
Видозмінюємо стандартний prosilver
CabinetAdmin 08, вер 2012, 10:28 Повідомлення
Допустимо, ви захотіли створити свій власний форум. Ви ввели у пошук"Створити форум безкоштовно", вам видало купу посилань на різні хостинги. Ви обрали один із них і створили повністю працездатний, налаштований форум. Але тепер ви хочете змінити його, зробити щось, чого ще ні в кого немає, щось своє, надати своєму проекту родзинку. Шляхи вирішення у нас два. Перший, замовити роботу професіоналу і він в обумовлений термін, за певну суму, надасть вам готовий продукт: сайт, форум, власний блог, те, що ви хочете. Другий, на мій погляд, найкращий, це спробувати створити дизайн самому. Це в першу чергу потрібно саме вам, тому що в міру існування форуму вам доведеться не раз вносити якісь зміни. Давайте спробуємо розібратися у всьому помаленьку, спробуємо дізнатися про ази. Для більш професійного знання HTML і CSS ви можете почитати відповідну літературу, який в інтернеті повно. В основу ми беремо найбільш популярний двигун для форумів phpbb3.
Для внесення змін нам знадобиться доступ до стилю, який ви хочете змінювати: Тема стилю та його Шаблони. У шаблонах міститься верстка, таблиця, html основа вашого стилю. У темі, то як мають виглядати ті чи інші об'єкти, картинки, кольори, загалом все оформлення. Стилі бувають двох видів, найвірніше основа всіх стилів буває двох видів - prosilver і subsilver2. Тепер нам потрібно буде дізнатися, клон якого стилю є ваш стиль. Відрізнити їх дуже просто, в prosilver верста заснована на
, , та подібному. У subsilver2 -
| . |
Ми будемо працювати з prosilver.
Головні складові сторінки цеoverall_header.html таoverall_footer.html.index_body.html - інформація, розміщена в цьому шаблоні, буде відображена тільки на головній сторінці. За стиль, красу нашого форуму відповідає набір CSS у темі нашого стилю. То як виглядатиме наш форум насамперед залежить саме від CSS.
Ми не заглиблюватимемося в зміну всіх шаблонів, а спробуємо змінити лише головні складові і вже на їх прикладі ви зможете вносити свої зміни.
Почнемо з того що нам захотілося змінити заднє тло, білий це не цікаво, краще вставити якусь картинку. Хотілося б відразу попередити, що та картинка, яка вам так подобається і яка дуже красиво виглядає на робочому столі вашого комп'ютера, не виглядатиме так само на тлі вашого форуму. А все тому, що розміри екрана у всіх різні і картинка може бути некрасиво обрізана, або почати повторюватися на більшій роздільній здатності. Ще одна не мало важлива частина, так це вага тієї картинки, яку ви хочете встановити. Бо чим менше вага сторінки, тим вона швидше завантажується, тим краще для користувачів зі слабким інтернетом і тих користувачів, які зайшли до вас з мобільного.
Встановлюємо свою картинку, знаходимо:
Давайте розберемо що до чого:
- repeat - повторення картинки
- fixed - фіксоване положення на екрані
- 0% 0% - початкове положення фонового зображення (по горизонталі та вертикалі)
- #FFFFFF - колір фону, якщо фонове зображення не буде завантажено або якщо зображення має прозорість.
Змінюємо свій колір.
Як зменшитиширину форуму? Є два варіанти зробити ширину форуму вже. Це фіксований та гумовий розмір.
Фіксований. Міняємо на:
900px - змінюйте на власний розсуд.
Гумовий. Міняємо на:
90% - змінюйте на свій розсуд. Форум буде 90% від розміру екрана користувача, але не менше 650px.
Якщо у вас є відповідна на ваш погляд картинка, потрібних розмірів або невелика безшовна одноколірна непомітна картинка, то:
Як зробити форум напівпрозорим? Наприклад, нам потрібна прозорість тільки заднього фону (#wrap ), без самих форумів, то це можна зробити за допомогою напівпрозорого png картинки, або за допомогою CSS3, rgba колір. Це буде виглядати так:
0.8 з якого це є наш рівень прозорості. Слід також пам'ятати що "древні" браузери rgba колір не розуміють.
Наприклад, нам ще знадобилося зробити напівпрозорим і сам форум, але не зачіпаючи шапку. Застосовуємо opacity тільки до тіла форуму,#page-body :
Так як opacity теж відноситься до CSS3, як і rgba колір, то прозорість знову ж таки працюватиме тільки в сучасних браузерах, в IE починаючи з 9 версії. Виправляється це додаванням фільтра для IE та спеціального коду для старих версій Firefox: