AJ's Building Supplies

Removing Google from the Navbar

2009-02-05T17:53:26+01:00

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.

Comments

Integrating the Navbar

2009-02-05T17:49:30+01:00

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.

Comments

Further Navbar text Edits

2009-02-05T17:43:37+01:00

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!

Comments

Changing your topnavbar

2009-02-05T13:45:36+01:00

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

Comments

Code guide...

2009-01-02T14:04:06+01:00

Click HERE for a quick guide to entering the codes.

Comments

New smiley codes and a few ascii entries...

2009-01-02T13:00:05+01:00

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;

• = & bull;

† = & dagger;

← = & larr;

→ = & rarr;

↑ = & uarr;

↓ = & darr;

↔ = & harr;

¼ = & frac14;

½ = & frac12

¾ = & frac34;

And... I'm spent...

Comments

How to cure Blogthings code...

2007-05-06T09:54:02+02:00

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 )

Comments

Formatting shortcuts

2006-06-16T07:15:46+02:00

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.

Comments

Linking

2006-03-06T22:44:42+01:00

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]

Comments

Linking from images

2006-03-03T22:20:34+01:00

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!!!! >" class="middle" border="0">

Comments

Table colouring

2006-03-01T22:49:49+01:00

Inspired by Mr G here's a little look at making multicoloured tables.

If you're new it might be an idea to read the previous posts, when you hear THIS noise *BING* it's time to turn the page.

Here we look at how to make this...

Top Left Top Right Bottom Left Bottom Right

You KNOW you want to... Now, heres the code we used for the previous table with []s replacing the triangle brackets:

[table width="200" border="1" align="center" cellpadding="3" cellspacing="3" bgcolor="#cccccc"]
[tr]
[td]top left[/td]
[td]top right[/td]
[/tr]
[tr]
[td]bottom left[/td]
[td]bottom right[/td]
[/tr]
[/table]

To colour a row or individual cells we only need to add one thing, the colour in one of two places.

To colour an entire row add it after the tr:

[tr bgcolor="#0000FF"]
[td]top left[/td]
[td]top right[/td]
[/tr]

To colour an individual cell, place the code in the td area:

[tr]
[td bgcolor="#0000FF"]top left[/td]
[td]top right[/td]
[/tr]

So the code for our multicoloured table is:

[table width="200" border="1" align="center" cellpadding="3" cellspacing="3" bgcolor="#cccccc"]
[tr]
[td bgcolor="#0000FF"]Top Left[/td]
[td bgcolor="#FF0000"]Top Right[/td]
[/tr]
[tr]
[td bgcolor="#FFFF00"]Bottom Left[/td]
[td bgcolor="#00FF00"]Bottom Right[/td]
[/tr]
[/table]

Gawd I hope that makes sense...

Comments

Text colouring

2006-02-28T21:44:13+01:00

NOTE: Ths isn't for use in comments, just posts and header text.

Did you know it's possible to colour your text?

Yes it is!

Now, take a look at the post on text sizes because the coding is much the same.

[font size="3"][/font] gives a size three font.

[font size="3" color="#ff0000"][/font] gives a size three font in red.

See, here it is.

All colours need to be put in as hexidecimal, to help take a look at this excellent colour picking site.

A little personal note... Be a little careful with what you colour, red on green, yellow or purple on pink, all can clash and it's a proven fact that some colour combinations make it nigh on impossible for dyslexics or people with a visual impairment to read.

Comments

Tables - Aligning entries.

2006-02-28T15:06:16+01:00

OK, I promise this is the final one for now to save ALL of us from going insane! (It's taxing my brain writing these, I'l tell ya!)

The text in each cell auto aligns to the eft hand side but you can align it to the centre or the right.

[tr]
[td]top left[/td]
[td]top right[/td]
[tr]

was the top half of the table from my prevoius posts, now lets fiddle the text by adding div code.

the way of writing this is to put [div align=left"/"center"/"right"] and [/div] codes before and after the text, with triangular brackets of course. (you're all gonna tell me where to stick my triangular brackets aren't you...)

So if we changed that chunk of the code to read...

[tr]
[td][div align="center"]top left[/div][/td]
[td][div align="right"]top right[/div][/td]
[tr]

We get:

top left top right bottom left bottom right

I've lost it haven't I...

Comments

Tables - Extras

2006-02-28T14:50:49+01:00

There's some extra code you can put in for tables in the very first line.

[table border="1"] was our first line but here's some changes we can make, they're all put inside the triangular brackets and with spaces between.

Adding width="(number)" can size our table. In a standard table the cells expand and contract to fit the text, this means we can have a table sized how we want. Therefore having

[table border=1 width="200"]

makes the table:

top left top right bottom left bottom right

we can align the table by adding in align="left"/"right"/"center"

So [table width="200" border="1" align="center"] becomes:

top left top right bottom left bottom right

Other codes change the look of the table by:

cellpadding="1" - expands the size of the cell around the text.
cellspacing="1" - expands the gap between cells.
bgcolor="#cccccc" - changes the colour of the table.

Obviously the numbers and the colour can be changed for personal preference!

So, using:

[table width="200" border="1" align="center" cellpadding="3" cellspacing="3" bgcolor="#cccccc"]

gives us:

top left top right bottom left bottom right

Now, hands up who's still awake and caring...

Comments

Tables - simple

2006-02-28T14:21:31+01:00

OK, bit complicated this one so stick with me and I'm hoping I'll make some sense...

It's possible to use standard table codes in your blog to make something like this:

top left top right bottom left bottom right

Now, here's the coding for this but with [] brackets replacing the needed triangle brackets.

[table border="1"]
[tr]
[td]top left[/td]
[td]top right[/td]
[/tr]
[tr]
[td]bottom left[/td]
[td]bottom right[/td]
[/tr]
[/table]

As you can see, the table starts and ends with (unsurprisingly) the 'table' code then tr gives a table row and td makes a table column.

To add a row simply use:

[tr]
[/tr] - again replacing the [] with triangular brackets.

Then, between those two add in as many [td][/td]s as you want columns in that row.

Border width can obviously be changed to suit your own preferences, I merely added a 1 border to show where the table was.

Comments

Lines

2006-02-27T22:08:41+01:00

Here's another quicky

hr - surrounded by the triangular brackets of course, gives you:

It's a single code like the break, it only needs that one piece of code.

Comments

Text codes.

2006-02-27T21:48:46+01:00

A few handy codes for formatting text.

All codes need to be put in in the normal way, inside triangle brackets

em - /em = Gives you this

strong - /strong = Gives you this

sub - /sub = _{Gives you this}

sup - /sup = ^{Gives you this}

big - /big = Gives you this

small - /small = Gives you this

b - /b = Gives you this

i - /i = Gives you this

tt - /tt = Gives you this

center - /center = Gives you this

ins - /ins = Gives you this

s - /s = Gives you this

Comments

Font Sizes

2006-02-27T21:07:24+01:00

A post for CJ, although I'm sure he won't mind the rest of you reading

You can edit font sizes in your header and in posts (but not comments) by using

font size="(number)"

and

/font

bookending the text you want to size.

Obviously usual code rules apply to wrap them in triangular brackets.

As a clue to sizing 2 is normal font size.

The numbers you can add are:

1
2
3
4
5
6
7

Comments

A quicky

2006-02-27T18:57:28+01:00

Did you know that you can put breaks in your header text simply by adding the br (line break) or p (paragraph break) command once?

It's a one off and doesnt need any second / part.

Comments

Blockquotes in comments.

2006-02-27T18:38:41+01:00

We know we can do a blockquote in a post but you can also do it in a comment.

Write 'blockquote' before and after the quote, inside triangular brackets (shift and , or . on a normal keyboard) and with a / preceding the one at the end.

To get a blockquote.

Comments

Lists.

2006-02-27T18:36:12+01:00

Ever want to do a list in your blog or a comment? Here's how.

ul and ol: lists. ul will give you an unordered (bulleted) list, ol gives and ordered (numbered) list.

li: this then sits inside the list to make a list element, it needs to go before and after EACH entry.

Example of an unordered list

Example of an ordered list

Click HERE for a quick guide to entering the codes.

Comments