BlogToc v1.6.3

Custom Theme

Extends BlogToc with your own custom theme.
Loading 0 %

Code Example

  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <title>Custom Theme</title>
  5.     <link href="custom.css" rel="stylesheet" />
  6.   </head>
  7.   <body>
  8.     <div id="content"></div>
  9.     <script src="blogtoc.js"></script>
  10.     <script src="app.js"></script>
  11.   </body>
  12. </html>
  1. BlogToc( document.getElementById('content') ).build({
  2.   extendClass: {
  3.     "blogtoc_id": "custom",
  4.     "blogtoc_pagination current": "active",
  5.     "blogtoc_pagination disabled": "disabled"
  6.   },
  7.   label: {
  8.     showLabel: false,
  9.     showAlphabetLabel: true,
  10.     cloudAlphabetLabel: true
  11.   },
  12.   search: {
  13.     markerRender: function( match ) {
  14.       return '<b><i>'+ match +'</i></b>';
  15.     }
  16.   },
  17.   table: {
  18.     commentWidthPoint: 9,
  19.     authorWidthPoint: 11
  20.   },
  21.   theme : {
  22.     setup: "custom"
  23.   },
  24.   thumbnail: {
  25.     size: 48,
  26.     authorSize: 24
  27.   }
  28. });
  1. .custom {
  2.   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  3.   font-size: 13px;
  4.   line-height: 1.428571429;
  5.   color: #333;
  6. }
  7. .custom a {
  8.   color: #4183C4;
  9.   text-decoration: none;
  10. }
  11. .custom a:hover {
  12.   color: #3269a0;
  13. }
  14. .custom input[type="text"],
  15. .custom select {
  16.   margin: 0;
  17.   width: auto;
  18.   height: auto;
  19.   vertical-align: middle;
  20.   background-color: #f8f8f8;
  21.   -webkit-box-shadow: 0 1px 0 #FFF;
  22.   -moz-box-shadow: 0 1px 0 #FFF;
  23.   box-shadow: 0 1px 0 #FFF;
  24.   -webkit-transition: -webkit-border-color ease-in-out .15s -webkit-box-shadow ease-in-out .15s;
  25.   -moz-transition: -moz-border-color ease-in-out .15s -moz-box-shadow ease-in-out .15s;
  26.   -o-transition: border-color ease-in-out .15s box-shadow ease-in-out .15s;
  27.   -ms-transition: border-color ease-in-out .15s box-shadow ease-in-out .15s;
  28.   transition: border-color ease-in-out .15s box-shadow ease-in-out .15s;
  29.   display: inline-block;
  30.   padding: 3px 10px;
  31.   line-height: 18px;
  32.   color: #808080;
  33.   border: 1px solid #ddd;
  34.   border-bottom: 1px solid #c5c5c5;
  35.   -webkit-border-radius: 4px;
  36.   -webkit-background-clip: padding-box;
  37.   -moz-border-radius: 4px;
  38.   -moz-background-clip: padding;
  39.   border-radius: 4px;
  40.   background-clip: padding-box;
  41.   outline: 0;
  42.   -webkit-box-sizing: border-box;
  43.   -moz-box-sizing: border-box;
  44.   box-sizing: border-box;
  45. }
  46. .custom input[type="text"]:focus,
  47. .custom select:focus {
  48.   background-color: #fcfcfc;
  49.   border-color: #aaa;
  50.   -webkit-box-shadow: 0 1px 0 #FFF, 0 0 8px #dce1e5;
  51.   -moz-box-shadow: 0 1px 0 #FFF, 0 0 8px #dce1e5;
  52.   box-shadow: 0 1px 0 #FFF, 0 0 8px #dce1e5;
  53. }
  54. .custom select,
  55. .custom label {
  56.   cursor: pointer;
  57.   margin: 0;
  58. }
  59. .custom .blogtoc_content {
  60.   padding: 3px;
  61.   background: #eee;
  62.   -webkit-border-radius: 4px;
  63.   -webkit-background-clip: padding-box;
  64.   -moz-border-radius: 4px;
  65.   -moz-background-clip: padding;
  66.   border-radius: 4px;
  67.   background-clip: padding-box;
  68. }
  69. .custom .blogtoc_header,
  70. .custom .blogtoc_filter {
  71.   border-top: 1px solid #cdcdcd;
  72. }
  73. .custom .blogtoc_filter span {
  74.   font-size: 12px;
  75.   font-weight: bold;
  76. }
  77. .custom .blogtoc_footer,
  78. .custom .blogtoc_copyright {
  79.   border-bottom: 1px solid #cdcdcd;
  80. }
  81. .custom .blogtoc_header,
  82. .custom .blogtoc_filter,
  83. .custom .blogtoc_footer,
  84. .custom .blogtoc_copyright {
  85.   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQtdWNnZy1nZW5lcmF0ZWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI0Y1RjRGOSIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjRUNFQUYzIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+PC9zdmc+);
  86.   background-image: -moz-linear-gradient(top, #F5F4F9 0%, #ECEAF3 100%);
  87.   background-image: -webkit-linear-gradient(top, #F5F4F9 0%, #ECEAF3 100%);
  88.   background-image: -o-linear-gradient(top, #F5F4F9 0%, #ECEAF3 100%);
  89.   background-image: linear-gradient(to bottom, #F5F4F9 0%, #ECEAF3 100%);
  90.   -webkit-box-shadow: inset 0 1px 0 #fff;
  91.   -moz-box-shadow: inset 0 1px 0 #fff;
  92.   box-shadow: inset 0 1px 0 #fff;
  93.   text-shadow: 0 1px 1px #fff;
  94.   padding: 8px;
  95.   color: #666;
  96.   font-size: 12px;
  97.   font-weight: bold;
  98.   border-left: 1px solid #cdcdcd;
  99.   border-right: 1px solid #cdcdcd;
  100. }
  101. .custom select.blogtoc_label,
  102. .custom select.blogtoc_alphabet {
  103.   width: 100%;
  104. }
  105. .custom div.blogtoc_label,
  106. .custom div.blogtoc_alphabet,
  107. .custom div.blogtoc_copyright {
  108.   text-align: center;
  109. }
  110. .custom div.blogtoc_label button,
  111. .custom div.blogtoc_alphabet button,
  112. .custom div.blogtoc_copyright button {
  113.   margin: 0 2px;
  114.   position: relative;
  115.   display: inline-block;
  116.   color: #666;
  117.   font-size: 13px;
  118.   font-weight: bold;
  119.   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  120.   text-decoration: none;
  121.   white-space: nowrap;
  122.   background-image: -moz-linear-gradient(#fafafa, #eaeaea);;
  123.   background-image: -webkit-linear-gradient(#fafafa, #eaeaea);;
  124.   background-image: -o-linear-gradient(#fafafa, #eaeaea);;
  125.   background-image: linear-gradient(#fafafa, #eaeaea);;
  126.   -webkit-border-radius: 3px;
  127.   -webkit-background-clip: padding-box;
  128.   -moz-border-radius: 3px;
  129.   -moz-background-clip: padding;
  130.   border-radius: 3px;
  131.   background-clip: padding-box;
  132.   border: 1px solid #ddd;
  133.   border-bottom: 1px solid #c5c5c5;
  134.   vertical-align: middle;
  135.   cursor: pointer;
  136.   outline: none;
  137.   padding: 0 10px;
  138.   line-height: 24px;
  139.   -webkit-box-sizing: border-box;
  140.   -moz-box-sizing: border-box;
  141.   box-sizing: border-box;
  142. }
  143. .custom div.blogtoc_label button:not([disabled]):hover,
  144. .custom div.blogtoc_alphabet button:not([disabled]):hover,
  145. .custom div.blogtoc_copyright button:not([disabled]):hover,
  146. .custom div.blogtoc_label button:not([disabled]):active,
  147. .custom div.blogtoc_alphabet button:not([disabled]):active,
  148. .custom div.blogtoc_copyright button:not([disabled]):active {
  149.   background-image: -moz-linear-gradient(#eaeaea, #dadada);
  150.   background-image: -webkit-linear-gradient(#eaeaea, #dadada);
  151.   background-image: -o-linear-gradient(#eaeaea, #dadada);
  152.   background-image: linear-gradient(#eaeaea, #dadada);
  153.   border-color: #ccc #ccc #b5b5b5;
  154. }
  155. .custom div.blogtoc_label button:not([disabled]):active,
  156. .custom div.blogtoc_alphabet button:not([disabled]):active,
  157. .custom div.blogtoc_copyright button:not([disabled]):active {
  158.   background-color: #dadada;
  159.   background-image: none;
  160.   border-color: #b5b5b5;
  161.   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);
  162.   -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);
  163.   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);
  164. }
  165. .custom div.blogtoc_label button:focus,
  166. .custom div.blogtoc_alphabet button:focus,
  167. .custom div.blogtoc_copyright button:focus {
  168.   border-color: #51a7e8;
  169.   -webkit-box-shadow: 0 0 5px rgba(81, 167, 232, 0.5);
  170.   -moz-box-shadow: 0 0 5px rgba(81, 167, 232, 0.5);
  171.   box-shadow: 0 0 5px rgba(81, 167, 232, 0.5);
  172. }
  173. .custom div.blogtoc_label button[disabled],
  174. .custom div.blogtoc_alphabet button[disabled],
  175. .custom div.blogtoc_copyright button[disabled] {
  176.   cursor: not-allowed;
  177.   -webkit-opacity: 0.3;
  178.   -moz-opacity: 0.3;
  179.   opacity: 0.3;
  180. }
  181. .custom .blogtoc_display,
  182. .custom .blogtoc_result {
  183.   display: inline-block;
  184. }
  185. .custom .blogtoc_search,
  186. .custom .blogtoc_pagination {
  187.   float: right;
  188. }
  189. .custom .blogtoc_query {
  190.   margin-left: 5px !important;
  191. }
  192. .custom .blogtoc_table {
  193.   background-color: #f8f8f8;
  194.   border-collapse: collapse;
  195.   border-spacing: 0;
  196.   border: 1px solid #ccc;
  197.   border-top-width: 0;
  198.   border-right-width: 0;
  199.   border-left-width: 0;
  200.   width: 100%;
  201. }
  202. .custom .blogtoc_table th {
  203.   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQtdWNnZy1nZW5lcmF0ZWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI0Y1RjRGOSIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjRUNFQUYzIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+PC9zdmc+);
  204.   background-image: -moz-linear-gradient(top, #F5F4F9 0%, #ECEAF3 100%);
  205.   background-image: -webkit-linear-gradient(top, #F5F4F9 0%, #ECEAF3 100%);
  206.   background-image: -o-linear-gradient(top, #F5F4F9 0%, #ECEAF3 100%);
  207.   background-image: linear-gradient(to bottom, #F5F4F9 0%, #ECEAF3 100%);
  208.   -webkit-box-shadow: inset 0 1px 0 #fff;
  209.   -moz-box-shadow: inset 0 1px 0 #fff;
  210.   box-shadow: inset 0 1px 0 #fff;
  211.   height: auto;
  212.   font-size: 10px;
  213.   text-align: center;
  214.   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  215.   color: #666;
  216.   vertical-align: middle;
  217.   padding: 8px;
  218.   line-height: 1.428571429;
  219.   border: 1px solid #ddd;
  220.   border-bottom-width: 2px;
  221. }
  222. .custom .blogtoc_table th a {
  223.   color: #666;
  224.   text-decoration: none;
  225.   display: block;
  226. }
  227. .custom .blogtoc_table th span {
  228.   color: #666;
  229.   padding-top: 3px;
  230.   display: block;
  231.   float: right;
  232. }
  233. .custom .blogtoc_table th:first-child {
  234.   border-left: 1px solid #cdcdcd;
  235. }
  236. .custom .blogtoc_table th:last-child {
  237.   border-right: 1px solid #cdcdcd;
  238. }
  239. .custom .blogtoc_table tr:nth-child(odd) td {
  240.   background-color: #fcfcfc;
  241. }
  242. .custom .blogtoc_table tr:hover td {
  243.   background-color: #f5f9fc;
  244. }
  245. .custom .blogtoc_table tr td {
  246.   vertical-align: middle;
  247.   padding: 8px;
  248.   line-height: 1.428571429;
  249.   border: 1px solid #ddd;
  250. }
  251. .custom .blogtoc_table tr td:first-child {
  252.   border-left: 1px solid #cdcdcd;
  253. }
  254. .custom .blogtoc_table tr td:last-child {
  255.   border-right: 1px solid #cdcdcd;
  256. }
  257. .custom .label {
  258.   display: inline-block;
  259.   background-color: #5BC0DE;
  260.   font-size: 11px;
  261.   font-weight: bold;
  262.   color: #fff;
  263.   text-align: center;
  264.   white-space: nowrap;
  265.   vertical-align: middle;
  266.   -webkit-border-radius: 3px;
  267.   -webkit-background-clip: padding-box;
  268.   -moz-border-radius: 3px;
  269.   -moz-background-clip: padding;
  270.   border-radius: 3px;
  271.   background-clip: padding-box;
  272.   padding: 0 5px;
  273.   margin-left: 5px;
  274.   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 #FFF;
  275.   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 #FFF;
  276.   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 #FFF;
  277. }
  278. .custom .blogtoc_norecords {
  279.   text-align: center;
  280. }
  281. .custom .blogtoc_thumbnail img {
  282.   display: inline-block;
  283.   margin-left: 50%;
  284. }
  285. .custom .blogtoc_authorthumbnail img {
  286.   margin-right: 5px;
  287. }
  288. .custom .blogtoc_authorthumbnail span {
  289.   vertical-align: middle;
  290. }
  291. .custom .bt-thumb {
  292.   cursor: pointer;
  293.   vertical-align: middle;
  294.   border: 1px solid #ddd;
  295.   -webkit-border-radius: 3px;
  296.   -webkit-background-clip: padding-box;
  297.   -moz-border-radius: 3px;
  298.   -moz-background-clip: padding;
  299.   border-radius: 3px;
  300.   background-clip: padding-box;
  301.   -webkit-transition: all 0.2s ease-in-out;
  302.   -moz-transition: all 0.2s ease-in-out;
  303.   -o-transition: all 0.2s ease-in-out;
  304.   -ms-transition: all 0.2s ease-in-out;
  305.   transition: all 0.2s ease-in-out;
  306. }
  307. .custom .bt-thumb:hover {
  308.   border-color: #aaa;
  309.   -webkit-box-shadow: 0 0 8px #dce1e5;
  310.   -moz-box-shadow: 0 0 8px #dce1e5;
  311.   box-shadow: 0 0 8px #dce1e5;
  312. }
  313. .custom .blogtoc_result b {
  314.   color: #000;
  315. }
  316. .custom .blogtoc_pagination ul {
  317.   display: inline-block;
  318.   padding-left: 0;
  319.   margin: -3px 0 0;
  320.   -webkit-border-radius: 4px;
  321.   -webkit-background-clip: padding-box;
  322.   -moz-border-radius: 4px;
  323.   -moz-background-clip: padding;
  324.   border-radius: 4px;
  325.   background-clip: padding-box;
  326. }
  327. .custom .blogtoc_pagination ul li {
  328.   display: inline;
  329. }
  330. .custom .blogtoc_pagination ul li:first-child a,
  331. .custom .blogtoc_pagination ul li:first-child span {
  332.   margin-left: 0;
  333.   -webkit-border-radius: 4px 0 0 4px;
  334.   -webkit-background-clip: padding-box;
  335.   -moz-border-radius: 4px 0 0 4px;
  336.   -moz-background-clip: padding;
  337.   border-radius: 4px 0 0 4px;
  338.   background-clip: padding-box;
  339. }
  340. .custom .blogtoc_pagination ul li:last-child a,
  341. .custom .blogtoc_pagination ul li:last-child span {
  342.   margin-right: 0;
  343.   -webkit-border-radius: 0 4px 4px 0;
  344.   -webkit-background-clip: padding-box;
  345.   -moz-border-radius: 0 4px 4px 0;
  346.   -moz-background-clip: padding;
  347.   border-radius: 0 4px 4px 0;
  348.   background-clip: padding-box;
  349. }
  350. .custom .blogtoc_pagination ul li.active span {
  351.   z-index: 2;
  352.   color: #fff;
  353.   background-image: -moz-linear-gradient(#767676, #9E9E9E);
  354.   background-image: -webkit-linear-gradient(#767676, #9E9E9E);
  355.   background-image: -o-linear-gradient(#767676, #9E9E9E);
  356.   background-image: linear-gradient(#767676, #9E9E9E);
  357.   border-color: #686868;
  358.   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  359. }
  360. .custom .blogtoc_pagination ul li.disabled span {
  361.   z-index: 2;
  362.   -webkit-opacity: 0.3;
  363.   -moz-opacity: 0.3;
  364.   opacity: 0.3;
  365. }
  366. .custom .blogtoc_pagination ul li:hover a,
  367. .custom .blogtoc_pagination ul li:active a {
  368.   z-index: 2;
  369.   color: #fff;
  370.   background-image: -moz-linear-gradient(#599BDC, #3072B3);
  371.   background-image: -webkit-linear-gradient(#599BDC, #3072B3);
  372.   background-image: -o-linear-gradient(#599BDC, #3072B3);
  373.   background-image: linear-gradient(#599BDC, #3072B3);
  374.   border-color: #2A65A0;
  375.   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  376. }
  377. .custom .blogtoc_pagination ul li:active a {
  378.   background-image: -moz-linear-gradient(#3072B3, #599BDC);
  379.   background-image: -webkit-linear-gradient(#3072B3, #599BDC);
  380.   background-image: -o-linear-gradient(#3072B3, #599BDC);
  381.   background-image: linear-gradient(#3072B3, #599BDC);
  382. }
  383. .custom .blogtoc_pagination ul li a,
  384. .custom .blogtoc_pagination ul li span {
  385.   position: relative;
  386.   float: left;
  387.   padding: 3px 10px;
  388.   margin-left: -1px;
  389.   line-height: 1.428571429;
  390.   color: #666;
  391.   text-decoration: none;
  392.   background-image: -moz-linear-gradient(#fafafa, #eaeaea);;
  393.   background-image: -webkit-linear-gradient(#fafafa, #eaeaea);;
  394.   background-image: -o-linear-gradient(#fafafa, #eaeaea);;
  395.   background-image: linear-gradient(#fafafa, #eaeaea);;
  396.   border: 1px solid #ddd;
  397.   border-bottom: 1px solid #c5c5c5;
  398. }
  399. .custom .blogtoc_pagination ul li a:focus,
  400. .custom .blogtoc_pagination ul li span:focus {
  401.   border-color: #51a7e8;
  402.   -webkit-box-shadow: 0 0 5px rgba(81, 167, 232, 0.5);
  403.   -moz-box-shadow: 0 0 5px rgba(81, 167, 232, 0.5);
  404.   box-shadow: 0 0 5px rgba(81, 167, 232, 0.5);
  405. }