Customizing your blog theme

[Daedalus]

I finally managed to get my blog setup and thought that my experience might help others who wish to do the same. Now I am not going to go into details on setting your site title and tagline. You can find those things very easily in your dashboard under settings->general. The purpose of this post is to explain how you can use CSS code to customize a Fusion 3.1 theme.

 

First, you need to go to your dashboard and click "appearance->themes". Then, you will need to browse for the theme titled Fusion 3.1 by digitalnature. Once you have found the theme, you will want to click the "activate" link to set it as your blog theme.

 

Now that you have Fusion 3.1 activated, you need to click "appearance->fusion settings". This option is only available for the Fusion theme. When the Fusion theme setting page loads, scroll to the very bottom. You should see a section titled "User CSS code". This allows you to override the appearance of your blog by inserting your own custom CSS code into this section. It is important to note that you are only overriding existing styles that are part of the theme.

 

The reason I wanted to do this is because even though I liked the theme, there were a few things I didn't like about it. The tagline was displayed above the title and was obscurred by the menu at the top. I also didn't like the widget panel overlapping the header. So I decided to change these things. I searched the internet for the appropriate CSS code that would override those styles and managed to accomplish exactly what I wanted. I moved the tagline and resized the text so that it rendered under my site title. I also moved the widget panel down so that it was flush with the bottom of the header. I then removed the shadow around the widget panel so that it would blend nicely with the background. The following code snipet will allow you to have the same look:

 

/* Reposition the tag line text and increase its size */

#topnav, #topnav a
{
  font-size: 130%;
  padding-top: 140px;
}

/* Reposition the sidebar and remove the shadow */

#sidebar-wrap1
{
  background:none;
  margin-top: 200px;
}

#sidebar-wrap2
{
  background:none;
}

 

The next thing I wanted to do was use LaTeX in my blog. I searched our forums and couldn't find anything about using LaTeX in a blog post. So, I decided to give Google a try. It didn't take long to discover that instead of using the [ math ]...[ /math ] tags, you need to begin your LaTeX code with $latex and end with $. The following is an example of displaying a fraction in a blog post:

 

$latex \frac{a}{b}$

 

which renders as:

 

[math]\frac{a}{b}[/math]

 

That's it for now on customizing the Fusion 3.1 theme. You can check out my blog by clicking the following link:

 

http://blogs.science...s.net/Daedalus/

 

I hope this was helpful for those who want to customize their blog and use LaTeX in their posts : )

Edited November 18, 2011 by Daedalus