[Гайд]Создание своей темы для лаунчера.

Edone6 · 22 января 2016

Всем привет, в этой теме вы узнаете как изменить дизайн (т.е цвета и т.д) лаунчера. Я постараюсь объяснить максимум понятно, но знания html и css хотя бы базовые нужны. Приступим...

Для начала нам надо зайти в папку html, для этого нажимаем WIN+R, и в открывшемся окне пишем appdata (или %appdata%), заходим в папку Roaming/.vimeworld/.data/html

Так выглядит папка
http://i.imgur.com/uG5omGY.png

Мы будем создавать новую тему на основе темы "Светлая". Для этого заходим в папку css и копируем файл vimeworld-light и вставляем в ту же папку. Получится вот такой файл vimeworld-light — копия. Этот файл нам надо переименовать по типу vimeworld-имя . Я использую свой ник.

Т.е получается vimeworld-edone6
http://i.imgur.com/sncAOPu.png
Теперь нам надо добавить нашу тему в список с темами. Для этого перейдем снова в папку html и откроем файл index.html любым файловым редактором (желательно Notepad++). Нажимаем CTRL+F и пишем в поиске "Светлая".

Вас перекинет на эту строку.

http://i.imgur.com/1WCW3mx.png

Копируем строку

<option value="light">Светлая</option>

И переименовываем "light" на название, которое вы вписали после "vimeworld-". Так как у меня название vimeworld-edone6, то в место "light" я пишу edone6, а в место "Светлая" можно написать "Моя тема".

Вот что у нас получится.

http://i.imgur.com/m3k8Ztr.png

После этого можно зайти в лаунчер, и посмотреть на изменения ;) (Ах да, не забываем сохранить изменения комбинацией CTRL+S)

http://i.imgur.com/80zrog3.png

При выборе данной темы, у вас будет стандартная тема "Светлая" так как мы не меняли таблицу стилей (файл .css).

Это мы сделаем в след. уроке, который будет очень скоро.

Спасибо что прочитали, если понравился гайд, ставьте + :3

Edone6 · 22 января 2016

И так, приступим к изменению нашей темы. Так как большинство игроков не знают css, я постараюсь сильно вас не затруднять ;)

ВНИМАНИЕ: ИЗМЕНЯЕМ ТОЛЬКО ЦВЕТА! Если вы измените размер шрифта, размер обводки, расстояние строк или что-то типа того, то у вас все это в лаунчере не поместится.

Заходим в папку css, открываем нашу тему Notepad++ ом (у меня vimeworld-edone6). Дима разделил комментариями части лаунчера, т.е когда мы откроем, то увидим

/**********************
	Шрифты OpenSans
**********************/

Этот раздел мы трогать не будем, сразу находим строку (пользуемся CTRL+F)

body,
html {

Тут общие стили нашей темы. Мы будем менять все color'ы, и смотреть что они меняют. Не буду вам объяснять что такое классы и id, такие уроки вы сможете найти на YouTube. Сolor определяет цвет текста элемента. Т.к у нас скопирована тема "Светлая", то у нас будет такое:

color:#333333;

#333333 это цвет. Цвета можно найти на сайте http://getcolor.ru/. Я буду делать зеленый лаунчер. Выбираю подходящий цвет.

http://i.imgur.com/LEiYrd8.png

Я выбрал цвет #7AC417, копируем его и вставляем вместо #333333. Сохраняем комбинацией ctrl+S и заходим в лаунчер проверять ^_^.
Вот что у нас получилось

http://i.imgur.com/FgBaBFp.png

Для удобства оставляем коммент рядом с нашим изменением. Это делается вот так.

/* Цвет текста */

Комментарии оставляем для того, чтобы потом легче было искать.

Дальше ищем строку

a {
  cursor: pointer;

Тег <a> в html создает ссылки. В лаунчере есть несколько ссылок, это "Забыл пароль", "Открыть папку игры" и "Регистрация" .Там тоже есть атрибут color. Меняя color, мы изменим цвет ссылок. Давайте попробуем изменить на красный, на пример.
Объясняю последний раз, как меняем цвет. Тут у нас строка

color: #4396d8;

Можно найти на том сайте красный цвет и вставить сюда, но если вы знаете что красный это "RED", то просто делаем так.

color: red;

И заходим в лаунчер проверять.

http://i.imgur.com/vj705CA.png

Как видим, мой ~~мерзкий~~ дизайн работает :lol:. Можно конечно изменить на тот-же зеленый, но я изменил на красный, чтобы вам лучше было видно.
Дальше есть строка

a:hover {
  color: #f44336;
}

Не буду углубляться, просто скажу, что тут color это цвет, когда мы наводим на ссылку. Можно изменить на пример на более темный зеленый (Я изменил красный на светлый зеленый). Кстати, не забываем оставлять комментарии в коде для удобства.

Дальше ищем строку с

border-left: 4px solid #62b9ff;

Немного объясню. border это рамка, left - сторона рамки, остальное не буду объяснять т.к мы будем менять только цвет!
Цвет, это #62b9ff, заменяю его на тот-же зеленый, только потемнее и заходим в лаунчер проверять (Сохранять не забывайте!!!). И как вы видите, мы изменили вот эту хрень :D
http://i.imgur.com/aQdhE3Z.png

Спасибо всем, что прочитали. Если вам понравился гайд, ставьте лойсы :lol: !!

Изменено 23 января 2016 пользователем Edone6

Edone6 · 22 января 2016

Продолжим.
Ищем строку

select {
  border-radius: 2px;

Немного ниже есть строки

  background-color: #ffffff;
  color: #333333;

"background-color" отвечает за цвет фона. Изменять цвет так же, как и меняем color (вдруг кто не знает).
Эти строки отвечают за цвет в textbox'е, текстбоксы в лаунчере, это текстбокс ввода ника и пароля, ввода оперативной памяти и т.д. Короче говоря, это все поля ввода.
Меняя ем цвет снова по вкусу :lol:. Я поставлю очень светлый зеленый вместо background-color, а color не изменю.

http://i.imgur.com/uMMQ6b4.png

Вот эта наркомания у меня получилась.

Еще можно изменить рамку активного текстбокса. Для этого ищем строку

select:focus {
  outline: none;
  border: solid 1px #62b9ff;

и изменяем цвет border'a. Я изменю на красный для наглядности.

http://i.imgur.com/Aik0kID.png

Идем дальше. Ищем строку

.checkbox > label {
  color: #333333;

Тут color отвечает за цвет чекбоксов. Чекбоксы в лаунчере, это "запуск в полный экран", "использовать шейдеры" и т.д. Я изменю на красный, для наглядности.

http://i.imgur.com/nPDIFq9.png

Ниже, в строке

.checkbox > label:before {
  border-color: #cccccc;

border-color отвечает за цвет квадратика, я поставлю синий.

http://i.imgur.com/VtiIjXv.png

Ищем строку

.btn {
  position: relative;
  padding: 10px 20px;
  background: #666666;

Ниже есть атрибут color. Он отвечает за цвет текста в кнопках (Играть, авторизация). Сменю на синий, для наглядности (кто-то вырвите мне глаза...).

http://i.imgur.com/BwA0bvQ.png

Перейдем к самой интересной части! Находим строку

.header {
  background-color: #2196f3;
  color: #fefefe;

Эти два атрибута отвечают за цвет шапки и текста VimeWorld.
Изменяю background-color на зеленый, а color не трогаю (на ваш вкус).

http://i.imgur.com/dsUwTrd.png

Всем спасибо что прочитали, до следующего урока с:

Изменено 23 января 2016 пользователем Edone6

Edone6 · 22 января 2016

Ну и на всякий случай 3

Dalek · 22 января 2016

Жду с нетерпением следующего гайда. Достойно лойса.

Edone6 · 22 января 2016

Следующая часть будет завтра. Спасибо всем за лайки с:

Comeback · 22 января 2016

Пролайкаю всё заранее.

_WeryVell__ · 22 января 2016

Нормальный гайд, не то, что у меня С:

Skyndir · 22 января 2016

Я из-за _WeryVell_ испортил свой лаунчер. Теперь понятно как все исправлять, скачать нужно заново лаунчер и делать отдельные темы а потом выкладывать их на форум для всех игроков. Короче газ!

Edone6 · 23 января 2016

Я из-за _WeryVell_ испортил свой лаунчер. Теперь понятно как все исправлять, скачать нужно заново лаунчер и делать отдельные темы а потом выкладывать их на форум для всех игроков. Короче газ!

Лаунчер заново качать не надо. В папке .data есть файл downloaded.html, там есть чистые файлы, замени что надо и все.

Pwego · 23 января 2016

Если бы я всё понял, а я понял что не понял потому что мне лень понимать . (СЛОЖНАААА) (Лайк)

_OneLove_ · 23 января 2016

Спасибо за гайд.

Skyndir · 23 января 2016

Продолжай гайд! Я просто люблю создавать темы.

Нужно попросить xtrafrancyz'а сделать на форуме отдельную тему для принятия новых тем для лаунчера. Но что бы они были в стиле Майнкрафта.

Edone6 · 23 января 2016

Продолжай гайд! Я просто люблю создавать темы.
Нужно попросить xtrafrancyz'а сделать на форуме отдельную тему для принятия новых тем для лаунчера. Но что бы они были в стиле Майнкрафта.

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

Skyndir · 23 января 2016

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

Спасибо но я уже сам разобрался. Ты лучше скажи как добавлять чекбоксы в лаунчере и как делать страницы прозрачными!

Edone6 · 23 января 2016

Спасибо но я уже сам разобрался. Ты лучше скажи как добавлять чекбоксы в лаунчере и как делать страницы прозрачными!

Чекбоксы добавляются в html файле. Код чекбокса

 <div class="checkbox">
    <input id="lyuboy" type="checkbox"><label for="lyuboy">Я кисик </label>
 </div>

Прозрачность: opacity: значение;

Skyndir · 23 января 2016

Не получается с главным задним фоном.

Изменено 23 января 2016 пользователем Skyndir

Edone6 · 23 января 2016

Не получается с главным задним фоном.

Главный задний фон? Т.е чтоб был виден рабочий стол? Такое нельзя сделать

Skyndir · 23 января 2016

Главный задний фон? Т.е чтоб был виден рабочий стол? Такое нельзя сделать

Нет. Я имею ввиду там где описание сервера.

Edone6 · 24 января 2016

Нет. Я имею ввиду там где описание сервера.

Странно, я его делал прозрачным. Хотя это не очень смотрится

JoshOOOWAH · 24 января 2016

Где можно найти Старый лаунчер

Edone6 · 24 января 2016

Где можно найти Старый лаунчер

downloaded.html

Skyndir · 24 января 2016

Я короче сделал отличную зеленую тему, и скоро возьмусь за синею. Хочу что бы все игроки могли пользоваться темами которые я создаю!

Я короче сделаю потом тему где буду выставлять мою версию лаунчера с новыми темами.

А пока что, буду у тебя учится.

Edone6 · 24 января 2016

Я короче сделал отличную зеленую тему, и скоро возьмусь за синею. Хочу что бы все игроки могли пользоваться темами которые я создаю!
Я короче сделаю потом тему где буду выставлять мою версию лаунчера с новыми темами.
А пока что, буду у тебя учится.

Окей с:

Skyndir · 24 января 2016

Окей с:

Первые две темы есть.

Взгляни на зелёную:

http://i.imgur.com/tCL1lhH.png

http://i.imgur.com/IHRZeAj.png

Должно получится сделать еще 2-3 темы, а потом все игроки смогут играть по своим вкусам. Я буду рекламировать на МГ эту версию лаунчера.

Но пока что, за работу.

Синею тему я закончил и скоро начну делать желтую или красную.

Изменено 24 января 2016 пользователем Skyndir

[Гайд]Создание своей темы для лаунчера.

Рекомендованные сообщения

Лучшие авторы в этой теме

Популярные дни

Лучшие авторы в этой теме

Популярные дни

Популярные сообщения

Edone6

Edone6

Edone6

Создайте аккаунт или войдите в него для комментирования

Создать аккаунт

Войти

Сейчас на странице 0 пользователей