Tag Archives: image

Improving my blog – 7 Insights you can use NOW

First off, thanks for visiting my brand new blog. That’s what I think of it. The design is different, plugins have made it a better experience for you. And I am really happy for the blog and the future of it.

So what have I done to it?

1. Theme

I changed from the theme called Max Magazine by Sami Ch. It’s probably a good theme, but my modifications in the past made it look ugly and not good. I didn’t like it anymore, in addition to that I haven’t worked for the past few months, CSS didn’t load and the images on the front page didn’t show up.

Back to basics. What’s new with the Twenty Twelve theme from the WordPress team? It looks good, had to update the theme to get it to the latest version, no hassle just plain and simple update.

But I didn’t like it the standard way. I wanted to put in a new header, change the placement of the menu and some appearance.

2. Header

Made a new logo as you can see on the top, name of the blog and some icons to represent what I want to write about. Did it with a logo creation software I use and modified it further in Photoshop to get the whole header good looking. Not 100% satisfied with it, but maybe time will tell me what to do with it.

Untitled-4.jpg

Had to crop it to 960 x 250 pixels in Photoshop before I uploaded it. After I saw it on the blog, it didn’t look good. Lots of whitespace around it, and far away from the top. It was also placed under the menu. Not good.

MENU

To move the menu beneath the header you have to change a theme file.

You need to find this part of code in the Twenty Twelve theme file header.php:

<?php $header_image = get_header_image();

                               if ( ! empty( $header_image ) ) : ?>

                                               <a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”><img src=”<?php echo esc_url( $header_image ); ?>” class=”header-image” width=”<?php echo get_custom_header()->width; ?>” height=”<?php echo get_custom_header()->height; ?>” alt=”” /></a>

                               <?php endif; ?>

And move it right above the part “<nav id=”site-navigation” class=”main-navigation” role=”navigation”>

Then the menu and header switched places. All good, but what about all that whitespace around it?

In some themes you have a special CSS field under Appearance in WordPress. Here you can put custom CSS settings, that override the theme settings, since it is loaded after everything else.

My custom CSS settings look like this now:

img.header-image {

                margin-left: -40px;

                margin-top: -24px;

                width: 1040px;

                max-width: none;

}

h1 {

                color: #ff8b02;

                font-weight: bold;

}

a {

                color: #ff8b02;

}

body {

                font-family: “Calibri”, Verdana, serif;

}

The img.header-image is for the header. Set a margin left to -40 pixels, margin to the top by -24 pixels and a width of 1040 pixels. Making it fit perfectly in the content area. But then the image was blurry, because of the 960 pixels it recommended. So I had to go back to Photoshop and get a new one like the header is today. So it’s now 1040 x 114 pixels. Perfect match.

Then I added a new color to h1 tags and links, to go away from the standard blue to more of an orange color, just to stand out of the crowd.

But still there was a gap between the content area and browsers top. I found out that in the style.css file of the theme there was a setting I could change.

This part here:

body .site {

                               padding: 0 40px;

                               padding: 0 2.857142857rem;

                               margin-top: 0px;

                               margin-top: 0rem;

                               margin-bottom: 48px;

                               margin-bottom: 3.428571429rem;

                               box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);

                }

I changed margin top to ZERO pixels and the same for the margin top rem to zero. Then the gap was gone.

The design of the blog is starting to be as I wanted it in the first place.

3. Picture of me

matsofmatsholmvik.com

Lots of bloggers like to post pictures of themselves. It’s not because they like themselves so much, but more that you can relate to them and see who is behind all these words and pictures.

I found a normal looking picture of myself from a holiday in Christmas. Used Photoshop to crop it, make a black line around it, stronger colors and added some friendly text on it. Doesn’t it look nice on the sidebar?

You can add images to the sidebar by going into the Widgets part in WordPress admin, and there should be a widget to add images in the sidebar.

4. More sidebar

My sidebar had an outdated Twitter plugin to collect my tweets and that was almost it. So I added some stuff to make the site more alive and interesting to your readers. Like adding my top posts, a search field, recent comments and my own little tag cloud so you can see what I write most about. I hope it will be useful to you.

5. Updates – damn those updates

I will recommend everyone to check on their blogs to see if there is some updates to WordPress, themes and plugins. Most of them are updated regularly and will prevent your site from crashing or be hacked. So do it today, go update. I had about 17 plugins to be updated, along with my themes and WordPress. But it went smooth, but in case something go wrong when you do it, remember to backup everything before you start. I once had to manually put in every post after a crash in the early days of WordPress, which is not fun.

6. Plugins

I missed some parts of the blog that I have on my Norwegian blogs. So I compared the plugins, and found some I had forgotten.

WordPress RelatedPosts – to get some related posts showing under the post you are reading

WPtouch – to get your blog to look good on mobile devices

ShareThis – To add sharing buttons to social media under your posts, and on the right side of the browser.

Google XML Sitemap – more about this in the nest section.

As you can see, these plugins make the site overall a much better experience to visitors, like you.

7. Sitemap

Since I found out that I had forgotten to add Google XML Sitemap, I wondered if posts even got added to the search engines. I published a post earlier today, which was in Google about 30 seconds later, which is pretty good. So no worries about that.

I made the correct changes to the plugin, so my sitemaps for pages, posts and categories was created.

Then I headed over to Bing Webmaster tools and Google Webmaster tools. I had to add my site to both places, since I hadn’t done it before. Verified my pages, so they know I own them. Then started to add all my sitemaps to them to get indexed.

I also created a Sitemap link in the footer of the page to notify other search engines about it if they want it. You can do this in the Appearance -> Editor and find the file footer.php. In the file find the part in the theme Twenty Twelve where it says “</div><!– .site-info –>” and add this text right above it “ | <a href=”http://www.matsholmvik.com/sitemapindex.xml”>Sitemap</a>“. But remember to change the href link to your sites Sitemap.

Done for today

I hope you got some insights in what can be done with your site. If there is some parts that lacks explaining, just hit me up with a comment and I will try to help you. Have a great day!

Discoverys on a Sunday

Today I had a really slow day. Just playing with my new Macbook Air 2011 and coming up with some things I needed, and something you maybe need to make easier use of your mac.

1. Rip DVDs with RipIT

I had the need to get rid of some CD/DVDs, so I though I would just put them on the harddrive. I was looking for an easy to use ripping software, what I found is RipIt, which is a software from a little company that sells it for about $20. Its really easy to use, and makes a copy of the entire DVD not any loss in quality to the movie. After you install it, a little window shows up, put in your DVD and click on rip it! Thats it! Cant be easier than this.

(Illustration of RipIt before you put in a CD/DVD)

2. Putty for Mac OS? Does it exist?

I needed to get into a server with SSH. I first thought about Putty that I use in windows to accomplish tasks through SSH. Then I found out that the Terminal in Mac OS can be used for this task. Just type in “Terminal” in  Spotlight, click on it when it shows up, and write the following to connect to the server with SSH: ssh -X username@address. Then you put in your password and is ready to do what you want.

3. Mind mapping

I use MindMeister on my iPad but wanted to test some new mind mapping software to use on my Mac. I found this site: http://mac.appstorm.net/roundups/graphics-roundups/9-mind-mapping-tools-for-mac/ I explains a little about some different types and I tested the free one called FreeMind and MindNode2, of those to I got stuck using MindNode2 as it is easier to a Mac user than the other one, it blends more in and gives a cleaner look, FreeMind has some limitations that makes it unusable to me. Test the ones out at the page above to find your favorite.

I hope you enjoy my findings this sunday evening. If you got some great tips yourself on how to easy your life on the Mac, share it below in the comments and take care!