New user registration is currently disabled due to spam abuse / Регистрация новых пользователей в настоящее время приостановлена из-за злоупотреблений спаммерами

Иконка звука побеждена! Как самому заменить ее за 5 минут.

Обо всём по программе

Иконка звука побеждена! Как самому заменить ее за 5 минут.

Postby Novikov » Sun Feb 05, 2012 12:35 am

Все-таки, решение выводить словари через HTML и CSS гениально. Если ваши глаза, как и мои, тоже не могут смириться с нынешней иконкой звука, есть способ заменить ее самому, не дожидаясь билда и не корежа файлы программы. Вот как это получилось у меня, стильно и аккуратно:

:idea: Обновление: ниже еще и векторная версия на чистом CSS.

Image

Создадим в директории %APPDATA%/Goldendict файл article-style.css и напишем туда следующее:

Code: Select all
.dsl_s_wav img {
    display: none;
}

.dsl_s_wav a {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('АБСОЛЮТНЫЙ_ПУТЬ_К_ИКОНКЕ_НА_ДИСКЕ/ИМЯ_ФАЙЛА.PNG') no-repeat center;
    vertical-align: text-bottom;
}


Первый фрагмент кода скрывает отображение картинки с иконкой. Вместо этого мы применим правильную CSS-технику с картинкой в фоне.

Бонус: при копировании текста и вставке, например, в "Ворд", фантомный IMG больше не будет преследовать вас.

Кстати, работает не только абсолютный путь, но и урлы в интернете -- можно грузить иконки с серверов, например вот: Image. Разумеется, размеры в CSS надо приводить в соответствие. К сожалению, я не разобрался, можно ли положить иконку в какой-то из каталогов GD, чтобы прописать относительный путь. Для мобильной версии, к сожалению, трюки с CSS пока не актуальны :(

Если бы можно было еще как-то повлиять на логическую структуру HTML! Впрочем, даже скудные возможности тегов DSL позволяют делать, например, вот такие вещи:

Image

Правда, для этого приходится чистить код скачанных словарей регулярными выражениями и периодически отлавливать мелкие глючки, ну и извращаться с CSS.
Last edited by Novikov on Sun Feb 05, 2012 2:08 pm, edited 2 times in total.
Novikov
 
Posts: 164
Joined: Mon Jan 23, 2012 8:29 pm

Re: Иконка звука побеждена! Как самому заменить ее за 5 мину

Postby Tvangeste » Sun Feb 05, 2012 9:18 am

Novikov wrote:Если ваши глаза, как и мои, тоже не могут смириться с нынешней иконкой звука, есть способ заменить ее самому, не дожидаясь билда и не корежа файлы программы.

Ай, хорошо! Давно уже хотел тоже подобрать CSSку дабы можно было икноку звука менять по своему вкусу.

Novikov wrote: К сожалению, я не разобрался, можно ли положить иконку в какой-то из каталогов GD, чтобы прописать относительный путь.

После некоторых экспериментов, вот какая строка у меня смогла добиться правильной работы с относительным урлом:

Code: Select all
background: url('file:../GoldenDict/control_play.png') no-repeat center;

Этот код предполагает, что GoldenDict установлен в каталоге GoldenDict. :) И что файл control_play.png находится в корне каталога GoldenDict.

Избавиться от "../Goldendict" не смог, ибо без этого не работает почему-то. Ну да это уже не так важно. Главное, что относительные урлы в хоть каком-то виде работают, что было просто-таки необходимым для работы в портабельном режиме.
Tvangeste
 
Posts: 893
Joined: Thu Jun 02, 2011 11:42 am

Re: Иконка звука побеждена! Как самому заменить ее за 5 мину

Postby Novikov » Sun Feb 05, 2012 11:16 am

О, отлично, спасибо! :)
Novikov
 
Posts: 164
Joined: Mon Jan 23, 2012 8:29 pm

Re: Иконка звука побеждена! Как самому заменить ее за 5 мину

Postby Novikov » Sun Feb 05, 2012 2:00 pm

Для портативной версии я написал, внимание... векторную масштабируемую иконку! :shock:

"Написал" -- не потому, что типа великий художник написал полотно, а потому, что написал ее на чистом CSS, без единой картинки, и вот как она выглядит при разных увеличениях:

Image
Маленькая аккуратная иконочка.

Image
Кнопочка может реагировать на наведение мыши! Шок! Видео!

Image
При увеличении масштаба роскошные CSS-иконки не теряют качества, в то время как их растровые сестренки покрываются пикселями.

Ну и, разумеется, код (простите, сортировать CSS-свойства сейчас времени нет)!
Code: Select all
.dsl_s_wav img {
    display: none;
}

.dsl_s_wav a {
    display: inline-block;
    vertical-align: text-bottom;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 100px;
    border: 1px solid #555;
    cursor: pointer;
    padding: 0;
    background: #2C99DE;
    -webkit-box-shadow: 1px 1px #999, inset 1px 1px #33b0ff, inset -1px -1px #1c618c;
    color: #FFF;
    margin: 0 2px;
    background-image: -webkit-gradient(
   linear,
   left top,
   right bottom,
   color-stop(0.25, rgb(44,154,222)),
   color-stop(0.75, rgb(35,109,140))
    );
    -webkit-user-select: none;
}

.dsl_s_wav a:after {
    content:"\266a  ";
    margin: -5px 0 0 5px;
    width: 10px;
    height: 10px;
    display: inline-block;
    background: none;
    font-size: 18px;
}

.dsl_s_wav a:hover {

    -webkit-box-shadow: inset 1px 1px #1c618c, inset -1px -1px #2ea1e9;
}


:arrow: Итак, что имеем в итоге:
  • Независимость от картинок, возможность работы с портативной версией.
  • Масштабируемость без потери качества.
  • Полная настраиваемость: можно менять размеры, цвета, значок, положение по отношению к тексту, поведение при наведении и нажатии и многое другое. Вы можете даже сделать кнопку квадратной! Или вытянутой. Или как в словаре Макмиллиана, с надписью:
    Image
  • Образец моего нестандартного подхода к решению задач.
  • Образец моего тщеславия.
Novikov
 
Posts: 164
Joined: Mon Jan 23, 2012 8:29 pm

Re: Иконка звука побеждена! Как самому заменить ее за 5 мину

Postby Novikov » Sun Feb 05, 2012 5:18 pm

Желающим выпендриться с градиентами, бликами и тенями, дарю код для вот такой стеклянной кнопочки:

Image

Code: Select all
.dsl_s_wav img {
    display: none;
}

.dsl_s_wav a {
    text-decoration: none;
    -webkit-user-select: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 100px;
    margin: 0 2px;
    vertical-align: text-bottom;   
}

.dsl_s_wav a {   
    color: #FFF;
    border: 1px solid #798415;   
    -webkit-box-shadow: 1px 1px #CCC,  inset -1px -1px #4E7500;

    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1)));
}

.dsl_s_wav a:hover {
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043));

    border: 1px solid #A2B01C;
    -webkit-box-shadow: 1px 1px #CCC, inset -1px -1px #8A991A;
}

.dsl_s_wav a:active {
    -webkit-box-shadow: 1px 1px #CCC, inset 1px 1px #B1C421;
}

.dsl_s_wav a:after {
    display: inline-block;
    font-family: "Webdings";
    content:"X";
    margin: -4px 0 0 4px;
    width: 20px;
    height: 20px;
    font-size: 18px;
    vertical-align: center;
   
    -webkit-background-clip: text;
    color: #E6EF8F;
    -webkit-text-stroke: 1px #51580E;
}

.dsl_s_wav a:hover:after {
    -webkit-text-stroke: 1px #656E11;
}


Пара нюансов: этот значок -- из шрифта Webdings, а при некоторых масштабах страниц у некоторых символов Webkit иногда на пиксель смещение делает.
Novikov
 
Posts: 164
Joined: Mon Jan 23, 2012 8:29 pm

Re: Иконка звука побеждена! Как самому заменить ее за 5 мину

Postby oracle » Sun Mar 25, 2012 11:49 am

Очень КРАСИВО!!! стильно и аккуратно!!!

Novikov можно ли получить твой полный CSS-код (article-style.css).

Заранее благодарю !
oracle
 
Posts: 1
Joined: Sun Mar 25, 2012 11:18 am


Return to Общий

Who is online

Users browsing this forum: No registered users and 2 guests