Хостинг серверов Minecraft playvds.com
  1. Вы находитесь в русском сообществе Bukkit. Мы - администраторы серверов Minecraft, разрабатываем собственные плагины и переводим на русский язык плагины наших собратьев из других стран.
    Скрыть объявление
  2. Данный раздел создан исключительно для релизов! Вопросы по лаунчеру или обвязке задавайте ТОЛЬКО в соответсвующей теме автора. Любые другие темы будут удалены, а авторы понесут наказание.

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

Тема в разделе "Веб-обвязки и лаунчеры", создана пользователем Феликс, 4 июл 2013.

  1. Автор темы
    Феликс

    Феликс Активный участник Пользователь

    Баллы:
    78
    Skype:
    ant060399
    [​IMG]

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

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

    К делу
    Внимание! Все изменения проводятся
    на не изменённом движке.
    Используется WebMCR v2.3b r5
    Меняем цвет градиента под меню.
    Открываем папку с нужной темой, открываем папку css, там видим файлик docs.css
    Ищем класс "jumbotron" на 91 строке и видим там кучу стилей бэкграундов, лично я их все заменил одной строчкой т.к. уже большинство браузеров соответствуют требованиям веб консорциума.
    Код:
    background: linear-gradient(45deg,  #58D3F7 0%,#0B4C5F 100%);
    Начальный цвет - 58D3F7, конечный цвет - 0B4C5F

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

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

    Убираем скругление углов у полосок мониторинга
    Открываем папку с нужной темой, открываем папку css, там видим файлик serverbar.css, ищем и удаляем в каждом классе следующее:
    Код:
    border-radius: 4px;
      -o-border-radius: 4px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
    
    Всё, теперь прогрессбар будет прямоуголный

    Изменяем фон сайта
    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;

    Убираем картинку торта или меняем название картинки
    Открываем файлик docs.css и ищем класс "jumbotron:after", это 178 строка
    Смотрим параметр background, там прописан путь до картинки и её название.
    Код:
    background: url(../img/cacke20.png) no-repeat center right;

    Добавляем новую страницу и кнопку
    Создаём в папке 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; }
    А теперь разберём подробнее...

    Название страницы:
    [​IMG]

    Имя шаблона:
    В папке стиля создаём файлик разметки 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.Вот сайт, тоже не плохой, но учебник всё же лучше :)

    Меняем местами столбцы с основным содержимым и мини профилем
    МЧИМСЯ в /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.
    Всё, теперь логотип отображается рандомно!
    [​IMG]

    Косим под mcskill.ru(header)
    Открываем 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, ширину желательно оставить именно такой. Где что менять, разберётесь.

    Добавляем свой блок(по сложному)
    Идём в 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
    • Переписать гайд под новый WebMCR
    • Научиться уму-разуму
    • Рассказать как выпрямить руки
    • Меняем местами столбцы с основным содержимым и мини профилем
    • Выводим дополнительную информацию в мини профиль
    • Рассказать как на сайте сделать пульсирующий текст, как в меню майна
    • Поправиться... :(
    • Изменяем цвет градиента под меню
    • Добавляем примитивную галерею
    • Рандомные лого(Тоесть вместо тортика будут лого на рандом)
    • Убираем картинку торта или меняем название картинки
    • Добавляем свой блок с динамичным содержанием
    • Устанавливаем свой мониторинг
    • Меняем цвет фона основного содержимого(3 варианта)
    • Убираем скругление углов у полосок мониторинга
    • Добавляем новую страницу и кнопку
    • Изменяем копирайт справа
    • Удаляем копирайт справа
    • Добавляем слайдер
    Зелёным выполненное; Красным невыполнимое;
    Блевотным скоро будет; Оранжевым не скоро

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

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

    *жмяк
     
    Последнее редактирование модератором: 16 мар 2014
    ilsaf, ForgeGan, AngryLogic и 20 другим нравится это.
  2. Хостинг MineCraft
    <
  3. Автор темы
    Феликс

    Феликс Активный участник Пользователь

    Баллы:
    78
    Skype:
    ant060399
    Резерв
     
    RVXman нравится это.
  4. xhome

    xhome Старожил Пользователь

    Баллы:
    103
    Skype:
    xhomee
    Имя в Minecraft:
    xhomee
    Молодец ,продолжай в томже духе[DOUBLEPOST=1372973872,1372973799][/DOUBLEPOST]Молодец ,продолжай в томже духе
     
  5. gogaigor

    gogaigor Старожил Пользователь

    Баллы:
    153
    Skype:
    gogaigorzzzz
    ИМХО для новичков сойдет.
     
    DavidShabaev нравится это.
  6. Автор темы
    Феликс

    Феликс Активный участник Пользователь

    Баллы:
    78
    Skype:
    ant060399
    Старался всё же, пальцы ломал:D
     
    gogaigor нравится это.
  7. mon1k

    mon1k Активный участник

    Баллы:
    78
    Имя в Minecraft:
    mon1k
    Отлично!
    Молодец
     
  8. KlimSafonov

    KlimSafonov Активный участник

    Баллы:
    68
    Имя в Minecraft:
    Nyan
    Добавь инфу из бутстрапа (линк), там много чего интересного.
     
    Феликс нравится это.
  9. MySt1k

    MySt1k Старожил Пользователь

    Баллы:
    173
    Молодец, но разделом ошибся.
     
  10. Автор темы
    Феликс

    Феликс Активный участник Пользователь

    Баллы:
    78
    Skype:
    ant060399
    Хм. Пожалуй расскажу как прикрутить пару штук из примеров, ну а так пусть сами читают. В начале темы ссылку вставлю.[DOUBLEPOST=1373027738,1373027622][/DOUBLEPOST]
    Этот раздел больше подходит, к тому же в разделе "Гайды и руководства" тему будет найти посложнее.[DOUBLEPOST=1373153326][/DOUBLEPOST]Хоть кто-нибудь пользовался моими руководствами?!
    А то как-то даже дальше писать расхотелось :(
     
  11. CoLLaPssE

    CoLLaPssE Старожил Пользователь

    Баллы:
    103
    Имя в Minecraft:
    CoLLaPssE
    ну я все это знаю)Жду может напишешь то чего я не знаю[DOUBLEPOST=1373178879,1373178828][/DOUBLEPOST]А так полезные руководства продолжай)
     
  12. WhiteStyle

    WhiteStyle Активный участник Пользователь

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

    CoLLaPssE Старожил Пользователь

    Баллы:
    103
    Имя в Minecraft:
    CoLLaPssE
    Дай скайп[DOUBLEPOST=1373182632,1373181961][/DOUBLEPOST]
    Короче пробую объяснить так если че пиши в скайп collapsse0873
    Заходишь в index.html листаешь в самый низ там будет левый контейнер и правый. Берешь все из левого копируешь в правый , а из правого в левый!
     
  14. Автор темы
    Феликс

    Феликс Активный участник Пользователь

    Баллы:
    78
    Skype:
    ant060399
    Ты мне пишешь или кому-то другому?
     
  15. CoLLaPssE

    CoLLaPssE Старожил Пользователь

    Баллы:
    103
    Имя в Minecraft:
    CoLLaPssE
    не тебе а WhiteStyle
     
  16. Angel of death

    Angel of death Активный участник

    Баллы:
    88
    Имя в Minecraft:
    PHP_mysql_css_html
    @Феликс, http://www.colorzilla.com/gradient-editor/ Добавь в шапку.[DOUBLEPOST=1373185091,1373185047][/DOUBLEPOST]Все лучше чем велосипедить в ручную цвета.
     
    Феликс нравится это.
  17. lekime

    lekime Активный участник Пользователь

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

    RacerRU Активный участник Пользователь

    Баллы:
    88
    Skype:
    racer_official
    Имя в Minecraft:
    Racer
    Это же элементарно, Ватсон. :)
    Замените в файле 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>
     
    I-Am-Black-Overlord и lekime нравится это.
  19. lekime

    lekime Активный участник Пользователь

    Баллы:
    63
    Cпасибо)
     
  20. mcdima

    mcdima Старожил Пользователь

    Баллы:
    153
    Имя в Minecraft:
    mcdima
    Перекинь тему в оффтопик, ибо мне она глаза мозолит...
     
  21. RacerRU

    RacerRU Активный участник Пользователь

    Баллы:
    88
    Skype:
    racer_official
    Имя в Minecraft:
    Racer
    Кто ты такой, чтоб указывать человеку, что делать? Он не нарушил правила. Тема создана в нужном разделе.
    Не нравится - топайте дальше. :)
     
    slavik123123123 нравится это.

Поделиться этой страницей