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

[Edone6]

Всем привет, в этой теме вы узнаете как изменить дизайн (т.е цвета и т.д) лаунчера. Я постараюсь объяснить максимум понятно, но знания 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]

И так, приступим к изменению нашей темы. Так как большинство игроков не знают 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]

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

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]

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

[Dalek]

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

[Edone6]

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

[Comeback]

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

[_WeryVell__]

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

[Skyndir]

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

[Edone6]

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

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

[Pwego]

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

[_OneLove_]

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

[Skyndir]

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

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

[Edone6]

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

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

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

[Skyndir]

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

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

[Edone6]

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

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

 

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

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

[Skyndir]

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

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

[Edone6]

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

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

[Skyndir]

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

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

[Edone6]

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

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

[JoshOOOWAH]

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

[Edone6]

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

downloaded.html

[Skyndir]

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

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

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

[Edone6]

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

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

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

Окей с:

[Skyndir]

Окей с:

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

 

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

 

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

 

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

 

 

 

 

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

 

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

 

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

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