Costomizing FC2 Blog Templates |www.Learn92.tk

FC2 has a wide range of pre-designed official and user templates available. Users are able to select their favorite design from a simple lineup and apply it to their blog whenever they like. However, sometimes users may want to tweak their blog or even completely redo it all together. This can be done simply by editing the template HTML and/or CSS. So what are these two files?

HTML refers to the content on your page.
CSS refers to the the design of the content on your page.

*PLEASE NOTE: FC2 does not support any questions about template editing.
**This manual uses the "Sample" template as a base.
***Login > Templates > Add FC2 Template > Template Name [Sample]

How to Edit Templates

Click the Template button after logging in and then select the Template name you want to edit. Finally, click the Update button to save any changes.

Changing Font Size

The font size on your blog can be easily changed by editing the stylesheet (CSS).
Let's first change the font size of a main header (H1 tag).
Let's say that the following HTML is in your Blog Template.

<h1>Blog Title</h1>

This means that the words "Blog Title" will be in a Header (H1 class).
The CSS will define exactly what the HTML tags do. Inside the CSS, there will be something like the following.

h1 {
font-size : 120%;
}

This tells the H1 tag in the HTML what to do.
By editing this CSS data, the H1 tag will behave differently. By changing the 120% to something else all the H1 tags will change font-size.

h1 {
font-size : ~~120%~~180%;
}

Now any content in your HTML surrounded by <h1></h1> tags will no longer be 120% size, but instead 180%.

Value + Unit

When editing the CSS, you will need to enter a positive value and a unit.
Supported units are px, em, ex, in, cm, mm, pt & pc.

px = Pixels
em = Font Size
ex = Font Sized (Based on Vertical Height *Rarely Used)
in = Inches (*Not recommended)
cm = Centimeters (*Not recommended)
mm = Millimeters (*Not recommended)
pt = Points (*Not recommended)
pc = Pica (*Not recommended)

Using %

A percentage of the font size.

Keywords

Comparative Keywords

smaller | larger
Using this element causes the font size to grow or shrink by 1 size.

Changing Font Color

One can change the font color of text simply by adjusting the color property.
In the following example we will look at changing the color of the entire body of text.

HTML

<html>
    <head>
        <meta>
        <title></title>
    </head>
    <body>
        <h1>This is the Title</h1>
        <p>This is the text in a paragraph.</p>
    </body>
</html>

CSS

body {
color : #000000;
}

By simply changing the "#000000" (which represents black) value, you can change the color of the text for everything within the <body>~~</body> tags.

If you want to change the color (or adjust a similar property) of just the title (<h1>~~</h1>) or the paragraphs (<p>~~</p>), for example, you can also similarly designate them in the CSS.

Basic Selectors

Selectors are the parts of CSS which select the parts of the HTML to adjust.

Elements
Basic Element Selector
An element is the simplest way to select an area of HTML.
The following CSS will edit the "h1" (Title) area of your blog.

h1 { ... }

*(Asterisk)
Universal Selector
Attaching an asterisk makes the element universal. It is in effect a wild-card, and will affect anything that could potentially be entered in it's place.
The following are two examples.

*.MyClass { ... }

*#IDName { ... }

Element Name#IDName

ID Selector
This is used to select certain elements with certain ID's.
For example, you could change the font color of particular paragraphs by giving each paragraph an ID. An ID can only be used once per page.
Example HTML:

    <body>
        <p id="first">This is the first paragraph.</p>
        <p id="second">This is the second paragraph.</p>
        <p id="third">This is the third paragraph.</p>
    </body>

Then each paragraph can be given a different color by selecting it with the CSS in the following fashion.
Example CSS:

p#first { ... }
p#second { ... }
p#third { ... }

Element Name.ClassName
Class Selector
Classes are similar to IDs except classes can be used on multiple elements.

Example HTML:

    <body>
        <p class="one">This is the first paragraph.</p>
        <p class="two">This is the second paragraph.</p>
        <p class="two">This is the third paragraph.</p>
    </body>

Then each paragraph can be given a different color by selecting it with the CSS in the following fashion.
Example CSS:

p.one { ... }
p.two { ... }

Now, let's apply this to an FC2 Blog.
Please note: The areas in bold are simply there for reference purposes.

<div class="section" id="a<%topentry_no>">
    <h2 class="entry-header"><a href="<%topentry_link>" title="<%topentry_title> permanent URI"><%topentry_title></a></h2>
    <div class="entry-body">
        <%topentry_body>
        
        <p class="entry-more"><a href="<%topentry_link>" title="Continue reading <%topentry_title>">Continue Reading ≫</a></p>
        
        
        <%topentry_more>
        
    </div>
    <ul class="entry-footer">
        <li class="date">| <%topentry_year>-<%topentry_month>-<%topentry_day> | </li>
        <li class="category"><a href="<%topentry_category_link>" title="Category <%topentry_category> List."><%topentry_category></a> | </li>
        <li class="com">
            
            <a href="<%topentry_link>#comment-top" title="<%topentry_title> comments ">Comment: <%topentry_comment_num></a>
            
            － |
        </li>
        <li class="trk">
            
            <a href="<%topentry_link>#trackback-top" title="<%topentry_title> Trackbacks">Trackback: <%topentry_tb_num></a>
            
            － |
        </li>
    </ul>
</div>

One can change the properties of several areas by selecting them with CSS.
For example, you can change the properties of the H2 header (and only the H2 header with a class of "entry-header") by finding it and editing it in the CSS.

h2.entry-header {
color : #f00;
}

Similarly one could change the font within the <div class="entry-body">~~</div>.

div.entry-body {
color : #000;
}

Changing the Background Color

One can similarly change the background color by using a different property. The background color property in CSS is "background-color".
For instance you could change the Body's background color with the following CSS.

body {
background-color : #fff;
}

Similarly the Header (H1) can be designated.

h1 {
background-color : #fff;
}

Setting up Background Images

Background images can also be set. Setting a background image may require that you also set other properties such as whether or not the image repeats, its positionand how it is attached to your page.

body {
background-image : url("http://.....image.png");
background-repeat : repeat;
background-position : left top;
background-attachment : fixed;
}

We will now go into more detail about these properties.

background-repeat
repeat
Setting the background-repeat property to "repeat" makes it repeat.

repeat-x
The background image will repeat in the horizontal x axis.

repeat-y
The background image will repeat in the vertical y axis.

no-repeat
The background image not repeat.

background-position
The background position is defined by two values. The first value gives the position on the x-axis (horizontal), and the second value gives the position on the y-axis (vertical).

body {
background-position : left top;
}

*The first value defines the x-axis position (horizontal). The second value defines the y-axis position (vertical).

Numerical Value + Unit
A number and unit can be defined. For example, "30px".

Numerical Value + %
A number and a percentage can also be used. For example "30%" will move the position by 30% of the area.

left | center | right
top | center | bottom
This can also be used to define the image position.

background-attachment
fixed
The image will not move even if you scroll the page.

scroll
The image will move as you move around the page.

Changing the Background Color

body {
background-color : #fff;
}

Similarly the Header (H1) can be designated.

h1 {
background-color : #fff;
}

Setting up Background Images

Background images can also be set. Setting a background image may require that you also set other properties such as whether or not the image repeats, its positionand how it is attached to your page.

body {
background-image : url("http://.....image.png");
background-repeat : repeat;
background-position : left top;
background-attachment : fixed;
}

body {
background-position : left top;
}

Editing the Link Color

The link color can be similarly changed. There are four elements that can be designated, link, visited, hover and active, which should be written in the CSS in that order.
link→visited→hover→active

a:link
This element is used to designate the properties of links that you have not interacted with.

a:visited
This element is used to designate the properties of links that you have visited.

a:hover
This element is used to designate the properties of links that you have your mouse hover over.

a:active
This element is used to designate the properties of links that are currently activated.

/* Designating the font color for the entire page */

a:link {
color : #f60;
}
a:visited {
color : #00f;
}
a:hover {
color : #f00;
}
a:active {
color : #f00;
}

/* Designating the color for a specific class of link. */

a.MyClass:link {
color : #f60;
}
a.MyClass:visited {
color : #00f;
}
a.MyClass:hover {
color : #f00;
}
a.MyClass:active {
color : #f00;
}

/* Designating the color of links within a designated class. */

.MyClass a:link {
color : #f60;
}
.MyClass a:visited {
color : #00f;
}
.MyClass a:hover {
color : #f00;
}
.MyClass a:active {
color : #f00;
}

Putting Borders on Images - The Basics

Images that are used in your blog entries will be included automatically within the <div class="entry-body"> element. This means that you can change the properties of images in your blog entry simply by editing the CSS as such;

div.entry-body img {
border : 2px solid #000;
}

This will change the image in the following way.

Putting Borders on Images - The Basics

div.entry-body img {
border : 2px solid #000;
}

This will change the image in the following way.

Putting Borders on Images - Advanced

Similarly, you can create other more advanced styles for images.

div.entry-body img {
padding : 5px;
background-color : #fff;
border : 1px solid #000;
}

Also, you could surround your image in another elemet such as <p> & <span>.

<p><span><img src="IMAGE URL" width="IMAGE WIDTH" height="IMAGE HEIGHT" alt="IMAGE TEXT TO DISPLAY WHEN MOUSED OVER"></span></p>

This can then be altered with the following CSS;

p span img {
padding : 5px;
background-color : #fff;
border : 1px solid #000;
}

This will change the image in the following way.

Site Centering

Centering a site refers to making your site remain on center even when your blog is viewed on another resolution. This manual will explain the most typical method. Please note, depending on the template, some may already be centered.

The most typical way to center the content of your blog would be to automatically set your container's margin to "auto".

div#container {
width : 740px;
margin-left : auto;
margin-right : auto;
}

<body>
    <div id="container">

    </div>
</body>

Please note that older browsers and Windows' Internet Explorer in compatible mode, may not center your blog. To get around this you can use a bug in Internet Explorer.　This can be done with the text-align property.

body {
text-align : center;
}
div#container {
width : 740px;
margin-left : auto;
margin-right : auto;
text-align : left;
}

By doing this, your blog should appear centered even in older unsupported browsers.

Creating 2 Column Layouts

Here we will show how to create a simple 2 columned layout.

The stylesheet (CSS) is as below;

body {
text-align : center;
}
div#container {
width : 740px;
margin-left : auto;
margin-right : auto;
text-align : left;
}
div#primary-column {
float : left;
width : 500px;
}
div#secondary-column {
float : right;
width : 200px;
}
div#siteinfo-legal {
clear : both;
}

The HTML will be as below.

Incompatibility with Older Internet Explorer

Internet Explorer 4.0 to 5.5, and 6.0 in compatible mode. The reason for this is that the "width" and "height" properties include the padding and margins as well, while more recent browsers can.

Creating 3 Column Layouts

This is rather similar to creating 2-column layouts.
The following is a simple description.

The following is the CSS;

body {
text-align : center;
}
div#container {
width : 740px;
margin-left : auto;
margin-right : auto;
text-align : left;
}
div#wrapper {
float : left;
width : 540px;
}
div#primary-column {
float : right;
width : 340px;
}
div#secondary-column {
float : left;
width : 200px;
}
div#extra-column {
float : right;
width : 200px;
}
div#siteinfo-legal {
clear : both;
}

The following is the HTML;

<body>
    <div id="container">
        <div id="branding">Header Content</div>
        <div id="wrapper">
            <div id="primary-column">Article Content etc</div>
            <div id="secondary-column">Menu Content etc</div>
        </div>
        <div id="extra-column">Extra Content etc.</div>
        <div id="siteinfo-legal">Footer Content etc.</div>
    </div>
</body>