Изменение стиля оформления страницы "Содержание блога"

В предыдущей статье перечислены несколько способов оформления страницы "Содержание" в блоге. Иногда попадаются интересные варианты, однако не всегда их стиль оформления соответствует дизайну вашего блога. Эту проблему можно решить, введя некоторые изменения в файл CSS, прописанный в коде.
Для примера посмотрим, как будет выглядеть страница "Содержание" до и после внесения подобных изменений в файл CSS.
Источник кода взят в статье "Tabbed Table of Contents for Blogger".

Отображение страницы "Содержание":
слева - исходный вариант, справа - изменённый вариант

Исходный код (красным подчёркнут файл CSS, с которым будем работать):

Исходный код

Откроем файл CSS в браузере, скопируем его на свой компьютер, введём необходимые изменения и сохраним под новым именем. А чтобы дать ссылку в коде на изменённый файл CSS, сохраним его в папке Public в своём Dropbox и скопируем эту ссылку.
Исходный файл CSS после внесения мною некоторых изменений приобрёл такой вид:

 /* Skin for Blogger Tabbed Layout TOC */
#tabbed-toc {
  margin:0 auto;
  background-color:#004c00; /* цвет фона левого столбца */
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#333333;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 10px Arial,Sans-Serif;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Arial,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#e0e0e0; /* цвет букв текста левого столбца */
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#008000; /* цвет фона строчек левого столбца */
  color:white;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#008000; /* цвет фона строки левого столбца при наведении курсора */
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #008000; /* цвет рамки выделенной строки левого столбца */
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Arial,Sans-Serif;
}
#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#004c00; /* цвет букв текста правого столбца */
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666666;
  float:right;
}
#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #008000; /* цвет рамки левого столбца */
  overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color:#e5ffe5; /* цвет фона чередующихся строчек в правом столбце */
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#333333;
  color:white;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222222;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#004c00; /* цвет фона левого столбца */
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}

Пояснения к файлу CSS:
1) В выделенных синим цветом примечаниях отмечены те цвета, которые были изменены в исходном файле CSS.
2) Красным цветом выделены изменённые коды цвета.

Кроме того, допишем в исходный код маленький фрагмент для того, чтобы расширить левый столбец таблицы (взят из комментария к статье).

Код для изменения ширины левого столбца

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

<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/54357058/tabbed-toc-skin-m4.css" type="text/css" media="screen" />
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.allbloggertricks.com/" title="Tabbed TOC">All Blogger Tricks</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://exp13blog.blogspot.com", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script type="text/javascript" src="http://dl.dropboxusercontent.com/u/54357058/tabbed-toc.js"></script>
<style>
#tabbed-toc .toc-content, #tabbed-toc .divider-layer{
width: 65% !important;
}
#tabbed-toc .toc-tabs {
width: 35% !important;
}
</style>

Пояснения к коду:
1) вместо строчки  https://dl.dropboxusercontent.com/u/54357058/tabbed-toc-skin-m4.css - вставить один из вариантов файла CSS:

• чёрно-белый вариант - https://dl.dropboxusercontent.com/u/54357058/tabbed-toc-skin-m5.css 
• синий вариант - https://dl.dropboxusercontent.com/u/54357058/tabbed-toc-skin-m3.css
• зелёный вариант - https://dl.dropboxusercontent.com/u/54357058/tabbed-toc-skin-m4.css
• исходный вариант (автора кода) - https://dl.dropboxusercontent.com/u/54357058/tabbed-toc-skin.css

2) http://exp13blog.blogspot.com - адрес вашего блога
3) 65 % - ширина правого столбца таблицы, 35 % - ширина левого столбца таблицы. Эти значения можно изменять, но так, чтобы в сумме они давали 100 %.

Варианты оформления страницы "Содержание" (чёрно-белый и синий):

Примечание:
Для подбора цветов и оттенков очень рекомендую приложение к Google Chrome - Chroma, краткий обзор которого можно прочесть в статье "Подбор цвета с помощью Chroma".

Поделиться в соц. сетях: