A picture window blogger theme with neat-dropdown-menu and google-code-prettify
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
PictureWindowWithSimpleTabs.xml
README.md
bootstrap-table.css

README.md

What is this?

This is the theme for my blog.

It is based on the default "Picture Window" template from blogger, with some modification:

  • Added a neat Dropdown menu tabs modified from helplogger.

  • Added google-code-prettify code highlight, and a customized CSS snippet modified from this blog.

  • Added customized CSS(Table, Blockquote) modified from Bootstrap.

  • Added related articles widget from WFU blog.

  • <a> links in posts will be opened at new tabs. TOCs will not be effected. As described in this article.

  • The width, layout, font-size, font-family, and others have also been modified based on my own preference.

Customized Neat-Menu

Customized CSS Neat-Menu is just above ]]></b:skin>, or you can search for: <!-- neatMenu CSS starts -->

To modify items of neat-menu(e.g. add tabs, add dropdown lists), go to Layout, click Neat Menu, then edit HTML.

<div id='contact-links'>
    <div id='menu-container'>
        <nav id='neat-menu'>
          <ul>
            <li><a href='/'>Home</a></li>
            <li><a href='linkToYourPage'>My Page</a></li>
            <li><a>Dropdown lists ▼</a>
                <ul>
                    <li><a href='#'>Item 1</a></li>
                    <li><a href='#'>Item 2</a></li>
                    <li><a href='#'>Item 3</a></li>
                </ul>
            </li>
            <li><a href='#'>Another Page</a></li>
          </ul>
        </nav>
    </div>
</div>

Customized Google Code Prettify

Customized Google Code Prettify can be located under:

  • <!-- googleCodePrettify CSS starts -->
  • <!-- googleCodePrettify javascript starts -->

Customized Bootstrap-Style CSS

Customized Bootstrap-Style Table can be located under:

  • <!-- bootstrapTable javascript starts -->

It uses the style from bootstrap-table.css in this repository.

Related Articles Widget

CSS: search for /* 相關文章2 */

js: search for <!-- 相關文章2 start -->

Open links in new tabs

    // 將所有在 .post-body.entry-content 文章內的連結都設定為 target = _blank
    $(&quot;.post-body.entry-content a&quot;).attr(&#39;target&#39;, &#39;_blank&#39;);
    // 但是目錄 TOC 的連結不要
    $(&quot;.toc a&quot;).attr(&#39;target&#39;, &#39;&#39;);

Other Modification Notes

.post-body { font-size: 130%; }

.content-outer{ font-size: 90%; }