Версия сайта для слабовидящих CSS

Здравствуйте, дорогие мои читатели и гости блога. У меня сегодня для вас ещё один вариант версии сайта для слабовидящих. Тема остаётся актуальной для блогов с определённой тематикой. И чтобы не повторяться, попрошу вас перейти по этой ссылке, где об этом более подробно написано. И также были предложены 2 способа установки такой версии в блоге.

Преимущества гаджета, который хочу предложить вам сейчас - выбор фона страницы, размер и цвет шрифта. Код совершенно простой, без сторонних ссылок. Устанавливается в блоге в гаджет HTML/JavaScript и прекрасно вписывается в дизайн. Посмотрите рабочий вариант такой версии для слабовидящих на тестовом блоге и заодно поиграйтесь с ней.

Вот сам код.

<style>
#styleSwitcher {
  border:none;
  margin:0 0;
  padding:0 0;
  width:98%;
  text-align:left;
  font:normal 11px Tahoma,Arial,Sans-Serif;
  border-collapse:collapse;
}

#styleSwitcher th,
#styleSwitcher td {
  vertical-align:middle;
  border:none !important;
  padding:2px 10px;
}

#styleSwitcher th.title {
  background-color:#ccc;
  padding:5px 10px;
  margin:0 0 10px;
  text-transform:uppercase;
  font-size:12px;
  font-family:Arial,Sans-Serif;
}

#styleSwitcher select,
#styleSwitcher input[type="text"] {
  width:130px;
  border:2px solid #bbb;
  background-color:#333;
  padding:2px;
  font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;
  color:#999;
  display:block;
  margin:0 0 0;
  height:24px;
}

#styleSwitcher select option {
  color:white;
  padding:5px 10px;
  cursor:pointer;
}

#styleSwitcher button {
  font:normal 11px Tahoma,Arial,Sans-Serif;
  padding:3px 5px;
  cursor:pointer;
}

#styleSwitcher #bgColorer {
  overflow:hidden;
  margin:10px 0 10px;
}

#styleSwitcher #bgColorer span {
  display:block;
  float:left;
  width:20px;
  height:20px;
  border:1px solid black;
  margin:0 5px 0 0;
  cursor:pointer;
}

#styleSwitcher input[type="text"] {
  width:118px !important;
  padding:4px !important;
  height:auto !important;
}
</style>
<table border="0" id="styleSwitcher">
    <tr><th class="title" colspan="2">настройте шаблон на свой вкус</th></tr>
    <tr>
        <td colspan="2">
            <div id="bgColorer">
                <span style="background-color:#523690;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#248bcb;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#fed100;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#c91212;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#3a9838;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#36404a;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#ffffff;" onclick="bgSwitch(this.style.backgroundColor);"></span>
            </div>
        </td>
    </tr>
    <tr><th>Подберите нужный шрифт</th>
        <td>
            <select onchange="fontSwitch(this.value);">
                <option selected />--
                <option value="&#39;Book Antiqua&#39;,Serif" />Book Antiqua
                <option value="&#39;Times New Roman&#39;,Serif" />Times New Roman
                <option value="Georgia,Serif" />Georgia
                <option value="Arial,Sans-Serif" />Arial
                <option value="Tahoma,Verdana,Arial,Sans-Serif" />Tahoma
                <option value="&#39;Trebuchet MS&#39;,Arial,Sans-Serif" />Trebuchet
                <option value="Verdana,Arial,Sans-Serif" />Verdana
                <option value="&#39;Century Gothic&#39;,Tahoma,Verdana,Arial,Sans-Serif" />Century Gothic
                <option value="&#39;Comic Sans MS&#39;,Serif" />Comic Sans
            </select>
        </td>
    </tr>
    <tr><th>Выберите цвет шрифта</th>
        <td><input type="text" id="fontColorer" value="#000000" onkeyup="fontColor(this.value);"/></td>
    </tr>
    <tr><th>Размер шрифта</th>
        <td><input type="text" id="Размер шрифта" value="12" maxlength="3" onkeyup="changeFontSize(this.value);"/></td>
    </tr>
    <tr><th></th>
        <td><button onclick="resetStyle();">Вернуться в обычный режим</button></td>
    </tr>
</table>

Никаких пояснений, думаю, здесь не нужно. Разве что захотите поменять пояснительный текст на свой. Я отметила эти строчки синим цветом. Вот и всё.

Пост сегодня коротенький и надеюсь, что окажется для кого-то полезным. Желаю вам хорошего настроения и отдыха. Спасибо, что читаете мои шпаргалки. До встречи.
  

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email