CakePHP с нуля: вносим изменения в тему. Часть 10 из 10
Продолжим коррекцию шаблона для нашего приложения CakePHP. В предыдущем уроке мы добавили поддержку темы в наш проект и начали корректировать xHTML/CSS код для работы с движком CakePHP. Сегодня мы удалим ненужные элементы и настроим виды CakePHP нашего приложения, чтобы они хорошо выглядели и работали правильно.
Сначала удалим некоторые элементы, открываем /app/views/themed/default/layouts/default.ctp и изменяем его, чтобы он выглядел следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><?php echo $title_for_layout; ?></title> <?php echo $this->Html->css('default'); ?> </head> <body> <!--Header Background Part Starts --> <div id="header-bg"> <!--Header Contant Part Starts --> <div id="header"> <?php echo $html->link($html->image("logo.gif"), array('controller'=>'jobs', 'action' => 'index'), array('escape' => false));?> <br class="spacer" /> </div> <!--Header Contant Part Ends --> </div> <!--Header Background Part Ends --> <?php echo $this->element('menu', array('cache' => true)); ?> <!--Our Company Bacground Part Starts --> <div id="ourCompany-bg"> <!--Our Company Part Starts --> <div id="ourCompany-part"> <?php echo $content_for_layout; ?> <br class="spacer" /> </div> <!--Our Company Part Ends --> </div> <!--Our Company Bacground Part Ends --> <!--Footer Part Starts --> <div id="footer-bg"> <!--Footer Menu Part Starts --> <div id="footer-menu"> <p class="copyright">&
copy
;
Package 2007 All Rights Reserved</p> <p class="copyright topPad">Powered by <a href="http://www.templatekingdom.com/Web-Templates/Web-Design/" target="_blank" title="TemplateKingdom.com">TemplateKingdom.com</a></p> </div> <!--Footer Menu Part Ends --> </div> <!--Footer Part Ends --> </body> </html>
Из шаблона удален раздел, посвященный планам на будущее, поле для логина и список меню в нижнем колонтитуле.
Теперь открываем файл default.css, который размещен в папке /app/views/themed/default/webroot/css/ и находим в нем строки:
div#ourCompany-bg div#ourCompany-part{ width:922px; margin:0 auto; padding:26px 0 28px 0; background:url(../img/our-company-bg-pic.jpg) 606px 0 no-repeat; }
и делаем комментарием строку, определяющую фон:
div#ourCompany-bg div#ourCompany-part{ width:922px; margin:0 auto; padding:26px 0 28px 0; /*background:url(../img/our-company-bg-pic.jpg) 606px 0 no-repeat;*/ }
Мы просто отключили вывод изображения упаковки в правой части элемента div, в котором размещается содержание. Теперь мы можем сделать содержание шире.
Теперь настроим вид index для вакансий (Jobs). Открываем файл /app/views/themed/default/jobs/index.ctp и делаем в нем изменения:
<h2 class="ourCompany-hdr">Вакансии</h2> <div class="jobs index"> <?php if(!empty($jobs)) { $i = 0; echo '<ul class="jobs_list">'; foreach ($jobs as $job): $class = null; if ($i++ % 2 != 0) { $class = ' class="odd"'; } echo '<li'.$class.'>'; echo '<h3>'.$this->Html->link($job['Job']['title'], array('action' => 'view', $job['Job']['id'])).'</h3>'; echo '<div class="details">'; echo '<span class="category">'.$job['Job']['job_type'].'</span>'; echo ' - ' . $job['Job']['company']; echo '<span class="date">' . date('M d', strtotime($job['Job']['created'])) . '</span>'; echo '<div>'; echo '</li>'; endforeach; echo '<ul>'; } else { echo 'Вакансий нет ...'; } ?>
Были удалены ссылки на действия и постраничный вывод, а добавлена разметка HTML для вывода вакансий.
Добавим стили CSS для только что введенной разметки в файл /app/views/themed/default/webroot/css/default.css:
ul.jobs_list { width: 565px; } ul.jobs_list li { margin:10px 0; padding:20px; position:relative; text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;} ul.jobs_list li:hover, ul.jobs_list li.odd:hover{ background:#ded698; } ul.jobs_list li.odd{ background:#e4db98; border:1px solid #c7c77c; -moz-box-shadow:0 0 6px rgba(51,51,51,0.1); -webkit-box-shadow:0 0 6px rgba(51,51,51,0.1); box-shadow:0 0 6px rgba(51,51,51,0.1); } ul.jobs_list li h3 { font-size:21px; margin: 0 0 5px 0; text-shadow:0 0 1px rgba(51, 51, 51, 0.1); } ul.jobs_list li h3 a { color: #082733; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; } ul.jobs_list li h3 a:hover { color: #000; text-decoration: underline; } ul.jobs_list li .details { font-size: 13px; } ul.jobs_list li .details .category { font-size: 16px; font-weight: normal; color: #70322C; text-transform: uppercase; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; } ul.jobs_list li .details .date { position:absolute; top:38px; right:20px; }
Хорошо выглядит. Добавьте несколько вакансий с помощью действия add (оно доступно через соответствующий контроллер, например , http://localhost/cake/jobs/add) и перейдите на главную страницу вашего приложения.
Теперь внесем изменения на страницу с подробными сведениями о вакансии. Она открывается, если нажать кнопку мыши на описании вакансии в списке. Изменим разметку. Открываем файл /app/views/themed/default/jobs/view.ctp и делаем его таким:
<h3 class="jobs_view_h3"><?php echo $job['Job']['title']; ?></h3> <div class="jobs view"> <?php echo '<div class="info">'; echo '<span class="category">'.$job['Job']['company'].'</span>'; echo ' - ' . $job['Job']['job_type']; echo '<span class="date">' . date('M d', strtotime($job['Job']['created'])) . '</span>'; echo '</div>'; echo '<div class="job_details">'; echo '<p>' . nl2br($job['Job']['body']) . '</p>'; echo '</div>'; ?>
Также надо добавить стили для детального описания вакансии в файл /app/views/themed/webrot/css/default.ctp:
.job_details { margin:10px 0; padding:20px; position:relative; text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; width: 600px; background:#e4db98; border:1px solid #c7c77c; -moz-box-shadow:0 0 6px rgba(51,51,51,0.1); -webkit-box-shadow:0 0 6px rgba(51,51,51,0.1); box-shadow:0 0 6px rgba(51,51,51,0.1); } .job_details p { font-size: 15px; line-height: 21px;} .info { width: 640px; font-size: 13px;} .info .category { font-size: 16px; font-weight: normal; color: #70322C; text-transform: uppercase; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; } .info .date { float:right; } .jobs_view_h3 { font-size:21px; margin: 0 0 5px 0; text-shadow:0 0 1px rgba(51, 51, 51, 0.1); }
Теперь нажимаем кнопку мыши на любой вакансии и смотрим, как выглядит ее подробное описание.
На этом наш краткий экскурс в необъятный мир CakePHP завершен. Для тренировки вы можете исправить стили остальных частей нашего приложения.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/5MDySN3ehzg/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
"Тот, кто в совершенстве овладеет электронной почтой, будет миллионером в двадцать первом веке." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.