Веб Меняем дизайн и добавляем элементы в WebMCR

Что довело меня написать это?! Или как всё начиналось.​

Ну вообщем каникулы, делать нечего, только кататься на велосипеде, чесать голову, писать руководства фигню. (Просто все игры надоели)

Что заставило меня продолжить сие дело?​

Заболел. Скучно. Умираю. Сопли. Кашель. => Неадекватно себя веду, принимаю необдуманные решения.

К делу
Внимание! Все изменения проводятся
на не изменённом движке.
Используется WebMCR v2.3b r5​

Меняем цвет градиента под меню.

Спойлер: :D

Открываем папку с нужной темой, открываем папку css, там видим файлик docs.css
Ищем класс "jumbotron" на 91 строке и видим там кучу стилей бэкграундов, лично я их все заменил одной строчкой т.к. уже большинство браузеров соответствуют требованиям веб консорциума.

Код:

background: linear-gradient(45deg,  #58D3F7 0%,#0B4C5F 100%);

Начальный цвет - 58D3F7, конечный цвет - 0B4C5F

Убрать градиент можно заменив строку на:

Код:

background: #FFFFFF;

Вот таблица "безопасных" цветов *жмяк

Убираем скругление углов у полосок мониторинга

Спойлер: :D

Открываем папку с нужной темой, открываем папку css, там видим файлик serverbar.css, ищем и удаляем в каждом классе следующее:

Код:

border-radius: 4px;
  -o-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;

Всё, теперь прогрессбар будет прямоуголный

Изменяем фон сайта

Спойлер: :D

1 способ
Открываем папку с нужной темой, затем папку css, там видим файлик style.css
Ищем стили для тега "body", там видим закомментированную строчку в конце и убираем слеш со звёздочкой в начале и в конце.

Код:

background: #f5f5f5 url(../img/bg0.png) repeat top left;

Ставим картинку, как фон сайта(замощение)
Меняем bg0.png на название своего изображения, и кидаем его в папку img в папке стиля.

2 способ
Изменяем цвет фона(не картинкой)
Заменяем строку на эту:

Код:

background: #f5f5f5;

Вот таблица "безопасных" цветов *жмяк

3 способ
Ставим CSS градиент на фон
*жмяк для градиентов *жмяк для красивого фона
И заменяем строку например на:

Код:

background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;

Убираем картинку торта или меняем название картинки

Спойлер: :D

Открываем файлик docs.css и ищем класс "jumbotron:after", это 178 строка
Смотрим параметр background, там прописан путь до картинки и её название.

Код:

background: url(../img/cacke20.png) no-repeat center right;

Добавляем новую страницу и кнопку

Спойлер: :D

Создаём в папке location скрипт с именем, которое будет являться адресом страницы. Например у меня felix.php, а адрес страницы будет "localhost/go/felix/"
Открываем наш скрипт и пишем туда следующее:
Для всех пользователей:

PHP:

<?php
if (!defined('MCR')) exit;

$page = 'Название страницы';

$content_main = View::ShowStaticPage('имя шаблона.html');

$menu->SetItemActive('имя кнопки которую надо подсветить');
?>

Если хотим ограничить доступ к странице, то после

Код:

if (!defined('MCR')) exit;

пишем

Код:

if (empty($user) or $user->lvl() < Уровень) { header("Location: ".BASE_URL); exit; }

А теперь разберём подробнее...

Название страницы:


Имя шаблона:
В папке стиля создаём файлик разметки html с любым названием. У меня будет felix.html Открываем наш шаблон и пишем туда слудующее:

HTML:

<div class="form-block">
    <div class="block-header">Заголовок:
    </div>
    <div class="block-line">
    </div>
    Содержание
</div>

Кнопка:
Открываем /instruments/menu_items.php
Видим многомерный массив, с первичным ключом 0 - расположение слева, с ключом 1 справа. Ну и добавляем свою кнопку после той, которою захотим:

Код:

'Имя кнопки(для подсвечивания)' =>
    array (
      'name' => 'Текст кнопки',
      'url' => 'go/имя скрипта/',
      'parent_id' => -1, //Не трогаем
      'lvl' => -1, //Уровень пользователя
      'permission' => -1, //Не трогаем
      'active' => false, //Подсвечена ли по умолчанию
      'inner_html' => '', //Не трогаем
    ),

Внимание: все редактируем и создаём в кодировке utf8!(без BOM)

Спойлер: Уровни пользователей:

Уровни пользователей:
-1 Неавторизированный
1 Непроверенный пользователь
2 Проверенный пользователь
5 Вроде как VIP
6-14 Не заняты
15 Администратор

P.S.Для тех, кто не знает, что такое html *жмяк
P.S.S.Вот сайт, тоже не плохой, но учебник всё же лучше

Меняем местами столбцы с основным содержимым и мини профилем

Спойлер: :D

МЧИМСЯ в /style/папка темы/ и открываем index.html, ищем 96-102 и 16-113 строки и меняем их местами. В итоге должно получиться так:

Код:

<!-- Левый контейнер -->
                <div class="span8">

                    <?php echo $content_main;?>

                    <div class="inform-block" style="display: none;" id="main-error">
                      <div class="alert alert-error" id="main-error-text"></div>
                    </div>
                </div>
            <!-- /.Левый контейнер -->
  
            <!-- Правый контейнер -->
  
                <div class="span4">
          
                    <?php echo $content_side ?>

                    <?php echo $content_servers ?>
                          
                </div>
            <!-- /.Правый контейнер  -->

Рандомный показ картинок вместо тортика

Спойлер: Даёшь великий рандом!

Топаем в /instruments/ и создаём php скрипт под именем logo со следующим содержанием:

PHP:

<?php
$count = count(scandir(MCR_ROOT.'/style/'.$config['s_theme'].'/img/logo/'))-2;
$logo = rand(1,$count);
$logo = 'style/'.$config['s_theme'].'/img/logo/'.$logo.'.png';
?>

Идём в /styles/Папка стиля/img/ и создаём здесь папку logo, в которую потом будем кидать картинки в png с разрешением 128x128 и именовать их начиная с 1.(1.png, 2.png, ...)
Открываем system.php и добавляем после require(MCR_ROOT.'config.php'); (14 строка) следующее:

Код:

require(MCR_ROOT.'instruments/logo.php');

Бежим в /styles/Папка стиля/ и открываем index.html. Ищем тег header и после него открываем div:

HTML:

<div style="background: url(<?php echo $logo; ?>) no-repeat center right;">

Не забываем закрыть этот div перед закрытием header.
Идём в папку css и открываем docs.css. Ищем класс jumbotron:after (178 строка) и удаляем параметр background.
Всё, теперь логотип отображается рандомно!

Косим под mcskill.ru(header)

Спойлер: :D

Открываем index.html из папки шаблона, ищем на 41-42 следующее:

HTML:

<div class="span9">             
                    <h1><?php echo $config['s_name'] ?></h1>
                    <p class="lead"><?php echo $config['s_about'] ?></p>
                </div>

                <div class="span3" style="padding-top: 30px;">
                    <p class="lead" ><a href="index.php?mode=start">СКАЧАТЬ КЛИЕНТ</a></p>
                </div>

И заменяем на это:

HTML:

<img src="Полный/путь/до/картинки">

Затем бежим в папку css и открываем docs.css
Ищем класс jumbotron (91 строка) и удаляем параметр background, затем ищем класс jumbotron:after (171 строка) и так-же удаляем параметр background. Всё готово.
P.S.Ненавижу mcskill, мудаки там одни...
P.S.S.Yes? All right. I will create own server with blackjack and h**kers!

Добавляем слайдер... Вот вроде элементарно, я бы ещё года два назад(в 12) спокойно это сделал... Эх, школота, школота... Совсем думать не хотите... А ведь некоторые постарше меня будут...

Спойлер: :/

Открываем файл index.html нашего шаблона и ищем div в котором лежит правый и левый контейнер с содержимым(92 строчка, для умственно отсталых) и со следующей строки пишем следующее:

HTML:

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://dummyimage.com/1200x300&text=1" alt="">
            <div class="carousel-caption">
                <h4>Заголовок</h4>
                <p>Текст или описание слайда</p>
            </div>
        </div>
   
        <div class="item">
            <img src="http://dummyimage.com/1150x300&text=2" alt="">
            <div class="carousel-caption">
                <h4>Заголовок 2</h4>
                <p>Текст или описание слайда 2</p>
            </div>
        </div>
   
        <div class="item">
            <img src="http://dummyimage.com/1150x300&text=3" alt="">
            <div class="carousel-caption">
                <h4>Заголовок 3</h4>
                <p>Текст или описание слайда 3</p>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>

Брал изображения 1200x300, ширину желательно оставить именно такой. Где что менять, разберётесь.

Добавляем свой блок(по сложному)

Спойлер: :D

Идём в location и открываем side.php. После конструкции if-else(она там одна) пишем следующее:

PHP:

include View::Get('block.html');

Идём в папку темы и создаём там block.html и прописываем в нём следующее:

HTML:

<div class="form-block-rl">

<div class="block-header">Имя блока</div>

<div class="block-line"></div>

Содержание блока
 
</div>

Какой-нибудь знаток может сказать, что можно добавить блок редактирую только index.html, но плюс метода, представленного выше, в том, что в блок можно запихнуть динамичное содержание.

ToDo
​

Спойлер: :D

• Переписать гайд под новый WebMCR
• Научиться уму-разуму
• Рассказать как выпрямить руки
• Меняем местами столбцы с основным содержимым и мини профилем
• Выводим дополнительную информацию в мини профиль
• Рассказать как на сайте сделать пульсирующий текст, как в меню майна
• Поправиться...
• Изменяем цвет градиента под меню
• Добавляем примитивную галерею
• Рандомные лого(Тоесть вместо тортика будут лого на рандом)
• Убираем картинку торта или меняем название картинки
• Добавляем свой блок с динамичным содержанием
• Устанавливаем свой мониторинг
• Меняем цвет фона основного содержимого(3 варианта)
• Убираем скругление углов у полосок мониторинга
• Добавляем новую страницу и кнопку
• Изменяем копирайт справа
• Удаляем копирайт справа
• Добавляем слайдер

Зелёным выполненное; Красным невыполнимое;
Блевотным скоро будет; Оранжевым не скоро

Полезные ссылки:
Официальная документация bootstrap'a - *жмяк
Генератор CSS - *жмяк
Генератор градиентов - *жмяк
Таблица безопасных цветов - *жмяк
Лучший сайт по изучению html и css - *жмяк
Много информации о PHP и примеры кода - *жмяк
Русская документация bootstrap - *жмяк

Ошибка молодости

*жмяк​

 

Резерв

 

Молодец ,продолжай в томже духе
Молодец ,продолжай в томже духе

 

ИМХО для новичков сойдет.

 

Старался всё же, пальцы ломал

 

Отлично!
Молодец

 

Добавь инфу из бутстрапа (линк), там много чего интересного.

 

Молодец, но разделом ошибся.

 

Хм. Пожалуй расскажу как прикрутить пару штук из примеров, ну а так пусть сами читают. В начале темы ссылку вставлю.

Этот раздел больше подходит, к тому же в разделе "Гайды и руководства" тему будет найти посложнее.
Хоть кто-нибудь пользовался моими руководствами?!
А то как-то даже дальше писать расхотелось

 

ну я все это знаю)Жду может напишешь то чего я не знаю
А так полезные руководства продолжай)

 

Привет
[10:49:10] White Style: Как я понял ты в WebMcr профи не подскажеш как можно поменять блоки местами ну тоесть что бы новости были слева а профиль справа

 

Дай скайп

Короче пробую объяснить так если че пиши в скайп collapsse0873
Заходишь в index.html листаешь в самый низ там будет левый контейнер и правый. Берешь все из левого копируешь в правый , а из правого в левый!

 

Ты мне пишешь или кому-то другому?

 

не тебе а WhiteStyle

 

@Феликс, http://www.colorzilla.com/gradient-editor/ Добавь в шапку.
Все лучше чем велосипедить в ручную цвета.

 

Как сделать, чтобы кнопка Создать аккаунт вела на определённую страницу?

 

Это же элементарно, Ватсон.
Замените в файле login.tpl (лежащий в папке style) строчку:

Код:

<input type="button" class="btn" onclick="BlockVisible('reg-box',true); BlockVisible('login-box',false); return false " value="Создать аккаунт">

На:

Код:

<a href="ссылка на страницу регистрации" class="btn">Создать аккаунт</a>

 

Cпасибо)

 

Перекинь тему в оффтопик, ибо мне она глаза мозолит...

 

Кто ты такой, чтоб указывать человеку, что делать? Он не нарушил правила. Тема создана в нужном разделе.
Не нравится - топайте дальше.