Веб Меняем дизайн и добавляем элементы в 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
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 Открываем наш шаблон и пишем туда слудующее:

<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
$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:

<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 следующее:

<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>

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

<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 строчка, для умственно отсталых) и со следующей строки пишем следующее:

<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(она там одна) пишем следующее:

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

Идём в папку темы и создаём там block.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 - *жмяк

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

*жмяк​

 

[Феликс]

Резерв

 

[xhome]

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

 

[gogaigor]

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

 

[Феликс]

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

 

[mon1k]

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

 

[KlimSafonov]

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

 

[MySt1k]

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

 

[Феликс]

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

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

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

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

 

[CoLLaPssE]

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

 

[WhiteStyle]

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

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

 

[CoLLaPssE]

Дай скайп

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

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

 

[Феликс]

Дай скайп


Добавь меня в скайп collapsse0873

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

 

[CoLLaPssE]

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

не тебе а WhiteStyle

 

[Angel of death]

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

 

[lekime]

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

 

[RacerRU]

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

Это же элементарно, Ватсон.
Замените в файле 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>

 

[lekime]

Cпасибо)

 

[mcdima]

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

 

[RacerRU]

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

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