AJ's Building Supplies

OK, this may not be of interest to most people but I'm not that bothered at having the Google Searchbox up in my Navbar...

So, removing it is as simple as putting this into your CSS section of the blog design:

#topnavbar .gsearch {
display:none;
}

#topnavbar .gsubmit {
display:none;
}

#topnavbar #topnavSearch{
display:none;
}

#linkSearch fieldset {
display:none
}

Bingo, bye, bye Google, altough I'll admit this may not be for some!

Oh... and if you're as OCD as me the removal of your Google searchbar will make the bar look a little lopsided... so you can move your "Create new blog|flag blog" section over towards the left to centralise it a little more.

The code for that is:

#topnavbar #top_blogOptions {
position:absolute;
right:42%;
}

Or if you've used the background removal:

#topnavbar #top_blogOptions {
position:absolute;
right:42%;
background:none;
}

Just change the percentage until you're happy with positioning, I found 42% to be right, yours might be different.

In the last couple posts I did the code for changing the text in the Navbar, now I'll show you how to make it integrate better into your blog...

To make the dividers, Next Blog arrow and background dissapear you need quite a lot of code, all of which needs to be entered into the CSS section of your blog design...

#topnavbar {
border-bottom:none;
background:none;
}

#topnavbar #linkSearch {
background:none;
}

#topnavbar #top_blogOptions {
background:none;
}

#topnavbar #top_userOptions {
background:none;
}

#topnavbar #top_userOptions a {
background:none;
}

#topnavbar ul, #topnavbar p, #topnavbar fieldset {
background:none;
}

#topnavbar li {background:none;}

#topnavbar li.last {background:none;}

#topnavbar .nextBlog a {
background:none;
}

#topnavbar #top_flagBlog ul li {
background-image: none;
}

Putting all that into CSS will vanish all the default design elements from the Navbar and make it use your blog design for it's backing.

This can be an issue with a very complicated background designs but with simpler ones, should work fine.

Remember to double check your font colour to make sure it's readable over the background.

In the previous post I did the code for changing the text colour in the navbar.

Now I'll do the code for changing the font and size of the text...

If you put this code into the CSS section in your design window it just takes a couple edits to change the font further:

#topnavbar * {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

To change the font family simply add in the font you wish to use, then select how big you want the font to be by changing the font size attribute.

Again this will look out of place if the dividers, arrow and background are in, so the next post will be how to get rid of them!

At the to of each blog is the header navbar, this can now be changed or removed if you're a Pro user by putting some code into your CSS section in your blog design.

To make it vanish altogether simply put:

#topnavbar {display:none}

But to be honest, the navbar is helpful so you might prefer to just... change it a little.

Here's the first of a few little codes to help make it look a bit prettier.

Changing the text colour:

To change the text colour insert this line:

#topnavbar a:link, #topnavbar a:visited {
color:#b10910;
}

Simply change the hex value #b10910 into the value for the colour of your choice... to pick one you like you can go HERE.

This, however, ONLY changes the text colour, not the Next Blog arrows or the dividers... that will come later

OK, Subs just posted her brilliant HTML guide HERE for smiley codes and extras... and it reminded me I hadn't done a post on here in too long, so heres a couple more extras...

Firstly, the locations of all the new smilies available in the new editor, so if you're using the old editor you can put them in with the insert image command or even post them in comments by typing img src="insert location of smiley here" inside triangle brackets, the one's above , and . by the M key.

= http://www.blog.co.uk/image/smileys/icon_cheeze.gif

= http://www.blog.co.uk/image/smileys/smiley-cool2.gif

= http://www.blog.co.uk/image/smileys/smiley-cry2.gif

= http://www.blog.co.uk/image/smileys/smiley-embarassed.gif

= http://www.blog.co.uk/image/smileys/smiley-foot-in-mouth.gif.gif

= http://www.blog.co.uk/image/smileys/smiley-frown.gif

= http://www.blog.co.uk/image/smileys/smiley-innocent.gif

= http://www.blog.co.uk/image/smileys/smiley-kiss.gif

= http://www.blog.co.uk/image/smileys/smiley-laughing.gif

= http://www.blog.co.uk/image/smileys/smiley-money-mouth.gif

= http://www.blog.co.uk/image/smileys/smiley-sealed.gif

= http://www.blog.co.uk/image/smileys/smiley-smile2.gif

= http://www.blog.co.uk/image/smileys/smiley-surprised2.gif

= http://www.blog.co.uk/image/smileys/smiley-tongue-out.gif

= http://www.blog.co.uk/image/smileys/smiley-undecided.gif

= http://www.blog.co.uk/image/smileys/smiley-wink2.gif

= http://www.blog.co.uk/image/smileys/smiley-yell.gif

= http://www.blog.co.uk/image/smileys/smileys21.gif

= http://www.blog.co.uk/image/smileys/smileys30.gif

= http://www.blog.co.uk/image/smileys/smileys60.gif

= http://www.blog.co.uk/image/smileys/smileys77.gif

= http://www.blog.co.uk/image/smileys/animesweat.gif

= http://www.blog.co.uk/image/smileys/blueeek.gif

= http://www.blog.co.uk/image/smileys/rolleyes.gif

= http://www.blog.co.uk/image/smileys/saddrunk.gif

Oh, and have some html ascii characters too... simply type the code without the space between the ampersand (&) and text... (PS, the semi colon ; is part of the code.)

♠ = & spades;

♣ = & clubs;

♥ = & hearts;

♦ = & diams;

© = & copy;

• = & bull;

† = & dagger;

← = & larr;

→ = & rarr;

↑ = & uarr;

↓ = & darr;

↔ = & harr;

¼ = & frac14;

½ = & frac12

¾ = & frac34;

And... I'm spent...

We've all seen the memes from Blogthings and we've all seen the various comments saying "the damn code didn't work".

So here it is, the one step trick to fixing most blogthings code...

Commas.

Yep, that's all it needs, you see HTML uses commas to mark out settings, those commas aren't in the blogthings code so it goes floopy (technical term)

So, all you need to do is make your code look like this (with the triangle brackets kept in place replacing the [] I've put in to mark the spots...)

[table width='350' align='center' border='0' cellspacing='0' cellpadding='2'][tr][td bgcolor="#96D6C5" align='center']

See, like Superman taking out an ad in the Daily Planet telling everyone he's killed by Kryptonite there is my biggest code fixing trick, commas!

If you ever do a blogthings remember this post and pass it on! (and not just to get me hits )

There are a couple shortcuts to the most used text formatting options.

A double asterisk before and after a word replaces the 'strong' command.

so * *strong text* * when the spaces are removed becomes strong text.

Also a pair of \ marks either side create italicised:

\ \italic text\ \ without the spaces becomes italic text.

Following on from the last post, another quickie simple one, how to link text etc.

Simple wrap whatever you want to link from inside:

[a href="SITE"] [/a]

Nice simple one this...

Added a photo earlier and wanted the photo to link to a website instead of to the blog media page.

It's very easy and only needs one change in code, it should even work with images you're importing from another site as well rather than uploading.

When you upload it it gives you this as the begining of the code:

a href='http://www.blog.co.uk/srv/media/media_item.php?item_ID=397422'

So all I did was replace the link with the one from the site I wanted the image to link to...

a href='http://www.hammacher.com/publish/72824.asp'

TA-DA!!!!