Octopress theme style modifications

Recommended for you: Get network issues from WhatsUp Gold. Not end users.
original link:http://812lcl.github.io/blog/2013/10/27/octopresszhu-ti-yang-shi-xiu-gai/
written by 812lcl posted at http://812lcl.github.io

An articleWrite a lot of sidebars and social commentary share system customization, now say, theme style changes.

1. Header, Navigation, footer

This part is often need to customization, has its counterpart in source/_includes in the HTML file, which is the subject of the default file, change the subject, update octopress will be covered, so should edit source/_includes/custom file to modify.

1.1 Header (title)

The title bar shows the contents of the implementation of /source/_includes/custom/header.html, where title and subtitle are defined in _config.yml, you can make proper modifications:
1
2
3
4
5
6
<hgroup>
  <h1><a href="{{ root_url }}/">{{ site.title }}</a></h1>
  {% if site.subtitle %}
    <h2>{{ site.subtitle }}</h2>
  {% endif %}
</hgroup>

1.2 Navigation (navigation)

Can be for the navigation bar to add items, links to different pages, editing in /source/_includes/custom/navigation.html.
1
2
3
4
5
6
<ul class="main-navigation">
  <li><a href="{{ root_url }}/">The blog home page</a></li>
  <li><a href="{{ root_url }}/blog/archives">The article list</a></li>
  <li><a href="{{ root_url }}/category-cloud">Classification of cloud</a></li>
  <li><a href="{{ root_url }}/about">About</a></li>
</ul>

When you want to add some pages, such as "about" page, you can test the rake new_page['name'] command to create, such as rake new_page['about'], a source/about/index.html file, this file to edit, add their own want to display content, and then add the correct path in navigation.html, such as<li><a href="/about">About</a></li>.

1.3 footer (tail section)

Edit the tail bar in source/_includes/custom/footer.html:
1
2
3
4
5
6
7
<p>
  Copyright &copy; {{ site.time | date: "%Y" }} - {{ site.author }} -
  <span class="credit">
          Powered by
          <a href=" ">Octopress</a>
  </span>
</p>

The default display Copyright@2013 - Author - Powered by Octopress, you can add you want to display in the tail bar thing, traffic statistics third party statistical tools can also be added to this, such as CNZZ, Google analytics and Baidu statistics, these tools can be used for more detailed analysis of site traffic, improve drainage measures, improve the site, the concrete adding the method seeStatistical tools and SEO.

The 2 style modifications

Add or modify the control style, need to edit the sass/custom/_styles.scss blog, all color control settings in /sass/base/_theme.scss. Customize your own color, edit sass/custom/_colors.scss. See the HSL COLOR PICKER, to help you choose the color of love.
To modify the layout, need to edit the sass/base/_layout.scss, you can modify the width of each part.

2.1 add a background picture

Add in sass/custom/_styles.scss:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html {
        background: #555555 url("/images/bg3.jpg");
        //background: #555555;
}

body > div {
        background-image: none;
        //background: #F5F5D5
} //The sidebar

body > div > div { //The contents of the article
        background-image: none;
        //background: #F5F5D5; 
        //background: url("/images/bg.jpg");
}

The background image in the source/images/, modify the code path pointing to the picture, you can change the blog, sidebar or the background picture. Blog using background images, and the Header area not harmonious, so I in /sass/base/_theme.scss header-bg set transparent color.

2.2 LOGO images

I said logo picture has two kinds, one is to open a Webpage, small pictures show the tab bar. There is a title bar main title next picture.
First for the first kind can select the picture you like (medium size), replace the source directory of the favicon.png.
Or will logo image into source/images, source/_includes/head.html, and then modify the favicon.png, modify the path to your images to.
The main title beside the picture need to fill the following statements in sass/custom/_styles.scss:
1
2
3
4
5
6
7
8
9
10
//Blog logo pic
@media only screen and (min-width: 550px) {

        body > header h1{
                background: url("/images/logo1.png") no-repeat 0 1px;
                padding-left: 65px;
        }

        body > header h2 { padding-left: 65px; }
}

Can be modified according to their own circumstances.

The 2.3 navigation bar fillet

I set the header transparent color, so the navigation bar right some sharp, add the following statements in sass/custom/_styles.scss, it is changed to fillet:
1
2
3
4
5
6
7
8
9
10
//Fillet
@media only screen and (min-width: 1040px) {
        body > nav {
                @include border-top-radius(.4em);
        }

        body > footer {
                @include border-bottom-radius(.4em);
        }
}

The 3 sliding back top button

When the article is longer, usually want a return to the top of the button, the following method can add a return to the top of the picture button on the top of the page below, click slide back to top.
First create the source/javascripts/top.js, the sliding back top effect, add the following code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function goTop(acceleration, time)
{
        acceleration = acceleration || 0.1;
        time = time || 16;

        var x1 = 0;
        var y1 = 0;
        var x2 = 0;
        var y2 = 0;
        var x3 = 0;
        var y3 = 0;

        if (document.documentElement)
        {
                x1 = document.documentElement.scrollLeft || 0;
                y1 = document.documentElement.scrollTop || 0;
        }
        if (document.body)
        {
                x2 = document.body.scrollLeft || 0;
                y2 = document.body.scrollTop || 0;
        }
        var x3 = window.scrollX || 0;
        var y3 = window.scrollY || 0;

        var x = Math.max(x1, Math.max(x2, x3));
        var y = Math.max(y1, Math.max(y2, y3));

        var speed = 1 + acceleration;
        window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

        if(x > 0 || y > 0)
        {
                var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
                window.setTimeout(invokeFunction, time);
        }
}

Then create the source/_includes/custom/totop.html, set to return to the top button style and location, the code as follows:
1
2
3
4
5
6
<!Back to top,>
<div id="full" style="width:0px; height:0px; position:fixed; right:180px; bottom:150px; z-index:100; text-align:center; background-color:transparent; cursor:pointer;">
        <a href="#" onclick="goTop();return false;"><img src="/images/top.png" border=0 alt="Back to top"></a>
</div>
<script src="/javascripts/top.js" type="text/javascript"></script>
<!Back to top end -->

Finally, there is also a need to return to the top of the picture into the source/images, named top.png (or modify the totop.html picture path).

4 dimensional code display

In the two-dimensional code on the page or column can show your personal blog, convenient mobile terminal scanning visit your blog, the plugin page click here.
In a sidebar display, the qrcode.html in the source/_includes/custom/asides/, add the default_asides in _config.yml custom/asides/qrcode.html to display.
Or add the qrcode.html code to the page or you want to show in the HTML file.
Reference article:
Octopress modify the theme and custom styles
Octopress transformation
Using JavaScript to achieve transmission back to the top
original link:http://812lcl.github.io/blog/2013/10/27/octopresszhu-ti-yang-shi-xiu-gai/
written by 812lcl posted at http://812lcl.github.io
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Cecil at December 14, 2013 - 8:23 AM