Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

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%; }

About

A picture window blogger theme with neat-dropdown-menu and google-code-prettify

Resources

Releases

No releases published

Packages

No packages published