Posts Tagged ‘ CSS ’

NetBeans IDE Vs Eclipse PDT 2.0 IDE for PHP, Java script, CSS, HTML

NetBeans IDE 7.0M1:

  • Free IDE.
  • Support php, javascript, css, html, java, SVN and lots…
  • Common function of php will show automatically or by pressing ctrl + space.
  • For HTML, it checks div correctly, if there is any unmatched tag like then it will colored and show that problematic line. So you could easily fix that
  • If your file’s extension is .php but you write … netbeans automatically colored the css code in here according to css style.
  • Common javascript functions are shown correctly or using ctrl + space.
  • Indentation format is very good in netbeans. If you select a block of code, that may contains css, javascript, html or php code, netbeans format that code very clearly and placed indentation nicely.
  • Eclipse PDT 2.0

  • Free IDE.
  • Support php, javascript, css, html, java, SVN and lots…
  • Common function of php will show automatically or by pressing ctrl + space.
  • Eclipse couldn’t render div matching properly.
  • If your file’s extension is .php and in that file you write css code within …. eclipse couldn’t render that according to CSS color rather it shows only black color.
  • Common javascript functions are shown correctly or using ctrl + space.
  • Eclipse is not good as netbeans. Specially when you’ll mix html + php code Eclipse makes those more ugly.
  • Bookmark and Share

    Ref: http://mahmudahsan.wordpress.com/2009/01/25/eclipse-vs-netbeans-ide-for-php/

    Advertisements

    WordPress and CSS

    WordPress and CSS:

    The Header:
    weblog title:
    The CSS that controls how those words are displayed

    #header {
    background: #90a090;
    border-bottom: double 3px #aba;
    border-left: solid 1px #9a9;
    border-right: solid 1px #565;
    border-top: solid 1px #9a9;
    font: italic normal 230% ‘Times New Roman’, Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 15px 10px 15px 60px;
    }

    #header a {
    color: #fff;
    text-decoration: none;
    }

    #header a:hover {
    text-decoration: underline;
    }
    (I have highlighted in bold only that part which affects the appearance of ‘my weblog’ in the top statement.)

    the part in bold tells the font to be over double the normal size, that the font used should be Times New Roman, and the letters should be .2 of an ’em’ apart.

    The #header a says that the letters should be in white, and that even though it is a link, it must not be underlined normally.

    The #header a:hover bit tells the code to underline the link when it is hovered.

    You can alter what you want in those sections of css I have just described.
    The Header
    The Header box:
    Here’s some CSS again:
    #header {
    background: #90a090;
    border-bottom: double 3px #aba;
    border-left: solid 1px #9a9;
    border-right: solid 1px #565;
    border-top: solid 1px #9a9;
    font: italic normal 230% ‘Times New Roman’, Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 15px 10px 15px 60px;
    }
    From the top, it means;
    The background is that green / grey colour.
    The border at the bottom should be a double border, 3 pixels wide, and be the colour of #aba
    That the borders on the other three sides should be solid, 1 pixel wide and the colours described.

    The ‘margin’ line means there is no white space between the header box and the screen sides of your display.
    The ‘padding’ is the space that is automatically put between the weblog title and the sides of the box.
    Want to make the header thinner ? Make the first and the third number smaller. (The numbers for the padding refer to the space that should be inserted on the top, the right, the bottom and the left in that order).
    Want to make the header bigger ? Increase the first and third numbers.

    So you can change the font you want, you can alter it’s colour, and you can make the background a different colour too. Wonderful ! But you might want an image …….. so here’s how to do it.
    3: Putting an image into the header box.
    Before I start, one or two points:
    Although you may have a fast line, not all your viewers will. Try to keep image sizes to around 50K or less – it will save you bandwidth too.
    If you have changed the image, but it is not showing up, it could be an issue with your browser cache. Clear the cache and / or – on a Windows machine – press CTRL-F5. This will force a hard refresh. If this does not work, then check your image upload again.
    Okay, image time.
    Here’s that code again;
    #header {
    background: #90a090;
    border-bottom: double 3px #aba;
    border-left: solid 1px #9a9;
    border-right: solid 1px #565;
    border-top: solid 1px #9a9;
    font: italic normal 230% ‘Times New Roman’, Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 15px 10px 15px 60px;
    }
    The background has been set with a colour, but if we add an image statement after it, this will take over.
    You can leave the ‘background: #90a090;’ line in, comment it out, or delete it, or change the colour to that of your page. Your choice.

    Just under that line you need to add this line;
    background-image: url(”);
    and in between the ” goes the address of the image you are going to use.

    Unless you tell the CSS otherwise, it will repeat your image if there is any extra space in the header.
    If you are using an image that is smaller, you can add the following to the CSS to alter how it repeats: background-repeat: no-repeat; Image is displayed only once.
    background-repeat: repeat-x; Image repeats horizontally.
    background-repeat: repeat-y; Image repeats vertically.
    background-repeat: repeat; Image repeats constantly. Good for tiled images.

    Looks straightforward eh ? Hmmm … not quite 🙂

    The default header box is what ? around 50px tall ? If you load an image that is 1000px tall, all you will see is the top 50px of it (though why you would want a header picture that big is beyond me, but you see what I mean). The image properties matter not if the image is too big – the box will win the contest. So you have to alter the box – not the image.

    Let’s say you have an image that is the perfect width, but is slightly too tall. This is how we alter the box. Look at that ‘padding: 15px 10px 15px 60px;’ line – this is where we change things.
    (I’m assuming you have chosen an image and can see part of it on your weblog).
    Now we are going to alter the first and third numbers.
    Altering the first will make the box bigger, but will push your weblog title down.
    Altering the third will again make the box bigger, but your title will stay where it is.

    For now, increase the third number until the whole image appears in the box. If you are happy with how it looks, cool ! You’re done 🙂
    If you want the title to be at the bottom though, swap the first and third numbers around.
    If you want it in the middle, adjust those numbers to be the same.

    You may now want to either change the border colours to suit the image or your page, or lose the borders – just delete those lines in the latter case.

    With the example below, here is the CSS used to display it.
    #header {
    background: #fff;
    background-image: url(‘fisherman.gif’);
    background-repeat: no-repeat;
    border: solid 1px #000;
    font: italic normal 230% ‘Times New Roman’, Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 15px 10px 150px 60px;
    }
    One last thing …. the header box actually fits the whole screen width in a default install. And you may have an image that wide – and of course you want to see all of it. In this case, you need to bump the menu down.
    Here’s the menu CSS;
    #menu {
    background: #fff;
    border-left: 1px dotted #ccc;
    border-top: solid 3px #e0e6e0;
    padding: 20px 0 10px 30px;
    position: absolute;
    right: 2px;
    top: 0;
    width: 11em;
    }
    See the line ‘top: 0;’ ?
    Make the 0 into 100px, see where it goes, and then adjust it to suit.

    That’s how to add an image to your header.
    It does get a bit more complicated – but not that much – when you want to use an image that is smaller. If this is what you want, please head over to the WP Styles page and check out the other effects than can be achieved. Study the same part of their CSS as detailed above, and you should, knowing what you do now, be able to see how they did it.
    Removing the weblog title.

    If you have taken the time to create a new image for your weblog, you might not want the title to be written all over it.

    It’s easy enough to alter ‘index.php’ so that is not in the header id, but that removes an important part of your site’s navigation. If someone were to view a single post, or a category list of posts, they would have no easy way to return to your main page. So what is needed is for a way for your header image to act as the hyperlink, even without your weblog title there.

    The ‘#header’ and ‘#header a’ CSS needs replacing for this to happen.
    First, find the measurements of your header image in pixels.
    Then, in the CSS, find where #header is defined. It may look something like this if you already have an image there:
    #header {
    background: #fff;
    background-image: url(‘fisherman.gif’);
    background-repeat: no-repeat;
    border: solid 1px #000;
    font: italic normal 230% ‘Times New Roman’, Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 15px 10px 150px 60px;
    }
    Delete lines until you are left with this:
    #header {
    background-image: url(‘fisherman.gif’);
    background-repeat: no-repeat;
    border: solid 1px #000;
    margin: 0;
    }
    Now add the dimensions of your background image:
    #header {
    background-image: url(‘fisherman.gif’);
    background-repeat: no-repeat;
    border: solid 1px #000;
    margin: 0;
    height: 200px;
    width: 718px;
    }
    That now controls the image, but it doesn’t yet take the text away. To do this, find where ‘#header a’ is defined. In a default CSS, it looks like this:
    #header a {
    color: #fff;
    text-decoration: none;
    }
    Delete that. In it’s place, put this code:
    #header a {
    display:block;
    height:100%;
    text-indent:-500em;
    text-decoration:none;
    }
    Your text is actually still being displayed, but as it’s a couple of feet to the left of your monitor, you can’t see it. But, even though it is there, the code above causes the whole area to act as a hyperlink.
    So you now have an image that is a link, but without any writing on it, and without having to edit the index file.

    Post Content

    The date.
    This is styled from the following statement:
    h2 {
    border-bottom: 1px dotted #ccc;
    font: 80% “Times New Roman”, Times, serif;
    letter-spacing: 0.2em;
    margin: 15px 0 2px 0;
    padding-bottom: 2px;
    }
    If you don’t want the dotted line across your page, delete the ‘border-bottom’ line.
    If you want the gap between different days posts to be larger, increase the 15px in margin.
    If you want the font altering, either in size or family, help yourself.
    In a default install, the h2 tag is only used for the date. So if you want your date to appear on the right of the main area, just add:
    text-align: right;
    to the above definition.

    3. Your post title
    This has 3 elements of the CSS which affect it. They are;
    h3 {
    border-bottom: dotted 1px #eee;
    font-family: “Times New Roman”, Times, serif;
    margin-top: 0;
    }

    .storytitle {
    margin: 0;
    }

    .storytitle a {
    text-decoration: none;
    }

    From the top …. the border-bottom gives the line across the screen, and the #eee gives the colour of that line. The font-family is self-explanatory, and the margin-top stops the browser automatically putting a gap between the post title and whatever is above it (Browsers will do that with header tags).

    The two .storytitle statements .. the first one ensures no margins are added in any direction, and the second one makes sure that even though the post title is a link, it will not be underlined when hovered.

    To alter the colour of your post title, add
    color: #00ff00;
    just under the ‘text-decoration: none;’

    4. Post data
    This line is styled by the meta div
    .meta {
    font-size: .75em;
    }

    .meta, .meta a {
    color: #808080;
    font-weight: normal;
    letter-spacing: 0;
    }

    .meta ul {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
    }

    .meta li {
    display: inline;
    }

    Looks complicated …….. from the top it means;
    The font to be used should be smaller (.75em), the font colour should be grey (#808080), it should be a normal font, not a bold font, and the last two parts mean that because items could appear in this which would normally be put into a list, the display should keep them on the one line (a post could fit into different categories for instance).
    Seen that in the screenshot the word ‘General’ is underlined ? If you don’t want that to happen, add this line
    text-decoration: none;
    to the .meta a section.

    5. Blockquote
    As it is, your blockquote style consists of indented text with a grey bar down the left side. That code looks like this;
    blockquote {
    border-left: 5px solid #ccc;
    margin-left: 1.5em;
    padding-left: 5px;
    }
    The border is described – 5 pixels, solid grey – and the whole quoted part will be 1.5em’s in from the left with a padding of 5 pixels between the border and the words within it.

    In contrast, the blockquote style I have been using here is this;
    blockquote {
    border-top: 1px solid #000099;
    border-bottom: 1px solid #000099;
    border-left: 1px solid #000099;
    border-right: 1px solid #000099;
    margin-left: 1.5em;
    padding-left: 5px;
    background-color: #ccc;
    font-family: Arial;
    }
    You can see how that looks just by looking at the box that code is in.
    Everything there is up for alteration.

    Note:I have defined each border individually. This is to show you how to alter different borders if you wanted to. It is better, if using the same border all the way around, to just use one line to do this: border: 1px solid #000099;
    Want only 2 borders ? Then delete the ones you do not want.
    Want 3 borders ? Again, erase the unwanted line .
    Want dotted borders ? Change the word ‘solid’ to dotted’.
    Fancy a bolder background colour ? Drop the #ccc for your particular shade.
    And the font ? Up to you again.

    6. Your entry text
    The controlling CSS is
    p, li, .feedback {
    font: 90%/175% ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
    letter-spacing: -1px;
    }
    Changing the 90% will change the text size, while changing the 175% will change the text spacing.
    If you want to change the font, alter the 4 font names to your desired choice.
    Letter-spacing is self-explanatory, but try changing the value there just so you can see it’s effect.

    To alter the colour of your post text, add;
    color: #00ff00;
    just underneath the ‘letter-spacing: -1px;’ line,
    but read the part below first – this css statement affects 3 parts of your post. You may only want the colour in one.

    If you want to alter the colour of the background of the post, you need to add a colour to the content div.
    #content {
    margin: 30px 13em 0 3em;
    padding-right: 60px;
    background: #00ff00;
    }
    Will make your post background bright green. Unfortunately, this will clash with the rest of the background. If you need to alter that, then go to this page.

    7. .storycontent
    There is another tag that can control just the content of what you post – .storycontent
    It does not control the post title, or the post data, or the comment. It just covers what you have written in the main entry box when writing a post.

    Using this tag, you could have a separate font for your entries, or a separate background just for your entries. In fact, you will gain more control over how all aspects of your post appear if you take the time to define the different elements.

    So, what can you define then ?
    Here is a basic list: normal text, links, an ordered list, an unordered list, text indentation for paragraphs, link classes, how images appear. Of these, I will cover some examples.

    Normal Text
    You can define which font you use, the spacing between letters / lines.
    .storycontent p {
    text-indent: 3em;
    font: 100%/130% arial, verdana, ‘lucida sans unicode’, sans-serif;
    color: #ccc;
    }
    The above will automatically indent the first line of each paragraph.
    The font size is set at 100% of the VIEWERS browser setting. (This is important for accessibility reasons. Setting your font in point (pt) sizes is not recommended as they scale badly.)
    The line spacing is set at 130% of the original font size.
    The font is set with a selection of fonts and a generic last font.
    The colour of the text is #ccc (which is a light grey).
    If you wanted to increase the gap between lines of text, just increase the “130%” figure.
    If you wanted to increase the gap between individual paragraphs, add a line to the above definition: margin-top: 20px and then adjust from there.

    Links
    On your page, you have links in the header, for the title of your post, for some of the post data, in your menu, for the Comments link and in the footer. That’s a lot of links, and you can style how each of them appear and react when hovered. Other links will be mentioned elsewhere, but for links in your posts, read on.

    .storycontent a {
    color: #669933;
    border-bottom: dotted 1px #669933;
    }

    .storycontent a:hover {
    border-bottom: solid 1px #669933;
    }

    .storycontent a:visited {
    color: #669933;
    }
    From the top:
    .storycontent a – Links will be green, and have a green dotted underline.
    .storycontent a:hover – When the mouse goes over the link, the dotted line will become solid.
    .storycontent a:visited – Visited links will still be green, but there will be no underlines.

    Of course you can change the colours and underlining to whatever you want. See the page on Link Classes for more details on what you can do.

    An Ordered List
    1.A default ordered
    2.list will appear something like
    3.this. The numbers are roman, and you can see the indenting
    4.and the line spacing.
    But if you changed your CSS to this:
    ol li {
    list-style: lower-roman;
    margin-left: 5em;
    text-indent: 4em;
    }
    it would indent into the page a lot further, the list items would indent even further than that, and instead of 1,2,3 it would be i, ii, iii.
    Additionally, you might want an image to represent each item on the list.

    The CSS that produced that:
    ol li {
    list-style-image: url(‘bug.gif’);
    }
    Menu

    The menu itself is controlled by:
    #menu {
    background: #fff;
    border-left: 1px dotted #ccc;
    border-top: solid 3px #e0e6e0;
    padding: 20px 0 10px 30px;
    position: absolute;
    right: 2px;
    top: 0;
    width: 11em;
    }
    From the top again:
    The background is white
    If you do not want a border on the left, delete that line.
    If you want a thicker border, change the 1px to 2px (or 3px or 4px ..)
    If you want the border to be a solid line, use ‘solid’ not ‘dotted’
    Change the border colour by changing #ccc
    The same things apply to the border-top.

    Padding:
    This is the white space that surrounds the words inside the menu.
    There will be 20px (px=pixels) between the top of the menu and the start of the words, no space on the right, 10px space at the bottom, and the 30px mean that the text will be indented from the left side. This 30px applies to the link titles (Links, Categories etc)
    right: 2px; means position the menu 2px in from the right, and top: 0px; means put the menu right at the top of the screen.
    If you wanted to drop the menu, increase the top value.
    If you want the menu on the left, change right: 2px; to left: 2px; BUT!! you will also need then to alter the header and the content divs. (Please check the Index page for when this is added).
    1. The Link Title
    Controlled by:
    #menu ul li {
    font: italic normal 110% ‘Times New Roman’, Times, serif;
    letter-spacing: 0.1em;
    margin-top: 10px;
    padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
    }
    Change fonts and spacing here. To alter the colour of a link title, add
    color: #00ff00;
    to the above statement. (You can change the #00ff00 to a more subtle colour if you really want to !)

    The links themselves are controlled by:
    #menu ul ul li {
    border: 0;
    font: normal normal 70%/115% ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
    letter-spacing: 0;
    margin-top: 0;
    padding: 0;
    padding-left: 12px;
    }

    #menu ul ul li a {
    color: #000;
    text-decoration: none;
    }

    #menu ul ul li a:hover {
    border-bottom: 1px solid #809080;
    }

    Okay.. actually there is more css that affects them, but this lot will do for starters.
    Change the link font in the top part
    Change the normal link colour in the second part
    Change how the link acts when it is hovered in the third part.
    If you do not want it to be underlined, and just want it to change colour, make that line read:
    color: #00ff00;
    If you would rather have a dotted underline, and in bright green, make it:
    border-bottom: 1px dotted #00ff00;
    If you want the link to get bigger:
    font-size: 150%;

    This is an example of overkill!
    #menu ul ul li a:hover {
    font-size: 150%;
    border-bottom: 1px solid #809080;
    border-top: 2px dotted #00ff00;
    }
    But it should give you some idea of what you can mess with.

    2. Categories
    The same CSS as above applies here.
    If you want the number of posts in each category to be displayed though, edit your ‘index.php’ to read like this;

  • Categories:
    • If you would like drop-down categories, then put this into your index.php;
      <form action="” method=”get”>

      3. The Search Box

      First, instead of it being on 2 lines, with “Search” on a button below, how about making it one line only ?

      Add this to your style.css – it doesn’t matter where;
      form.searchform {display: inline;}
      Now edit your index.php, and you will see these lines;
      <form id="searchform" method="get" action="”>


      <input type="submit" name="submit" value="” />

      and delete the
      that is in bold.
      If that does not do the trick, see this part above ? size=”15″ />. Make that ’15’ into 5 and increase it by 1 to whatever your template will tolerate.
      If altering THAT doesn’t move things around, look inside the CSS:
      #menu input#s {
      width: 80%;
      And change the 80% to something smaller. That’s that done.

      Notice I changed the word from “Search” to “Go!” ? Put whatever you want of course.

      Colour the Search box.
      Add this to your css;
      #menu li form input{
      background-color: #ffff00;
      }

      #menu li form input#s{
      background-color: #ffff00;
      }

      That will give you a bright yellow background where your viewers can enter the text they wish to look for.

      Colour the Search button
      Add this to your css;
      #menu li form input.purple{
      background-color: #ff00ff;
      }
      and in your index.php, edit these lines to include what is in bold
      <form id="searchform" method="get" action="”>


      <input class="purple" type="submit" name="submit" value="” />

      That will give you a purple button. Again, use the colours you want, and what you call it does not matter – you could alter the background colour to whatever you want but still call it purple. It’ll work, though it is always better to use the name of a colour when using classes.

      Now … you may have a really nice colour button, but you now want to alter the text on it too, so let’s change that too.
      In the CSS you added above, make it like this;
      #menu li form input.purple{
      background-color: #ff00ff;
      font-size: 10px;
      font-weight: bold;
      color: #fff;
      }

      Again, you can change the font size, font weight, and text colour.

      Make the Search button an image

      First, go make your image. I’d recommend that you start with an image that is around 20 pixels square, no larger, and that it is a tranparent gif. This will merge well with your existing colour scheme.
      Upload that image to wherever you want, and note it’s location.

      Into your CSS, you need to add a class;
      .button {
      repeat: no-repeat;
      margin-bottom: -5px;
      }
      When trying to do this, I could not get the bottom of my image button to line up with the bottom of my search box. I have no idea right now why, but it just wouldn’t. That’s why I have a negative margin. You may need one, you may not. (If I come up with a better way of doing this, I will update the page).

      Next, you need to modify your index.php;

      Note the ‘src=”pix/button.gif” ‘ That is where I have my button – you must put your location.

      And if, after reading all this, you do not want the Search function on your page, just delete that part of ‘index.php’

      4. Archives
      For drop-down archives, edit your ‘index.php’ to be like this;

    • Archives:

      By Month

    • 5. The Calendar
      The colours of the days of the week can be altered by adding to this;
      #wp-calendar th {
      font-style: normal;
      text-transform: capitalize;
      }
      so to make them red, turn the above into this;
      #wp-calendar th {
      font-style: normal;
      text-transform: capitalize;
      color: #ff0000;
      }

      To alter the numbers, you need this part;
      #wp-calendar td {
      color: #ccc;
      font: normal 12px ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
      letter-spacing: normal;
      padding: 2px 0;
      text-align: center;
      }
      Change the colour on the top line, and the font on the second.

      To change the colour of the text, and the colour of the highlight box that appears when a date you have posted is hovered;
      #wp-calendar a:hover {
      background: #e0e6e0;
      color: #333;
      }

      To change the colour of the highlight box that appears when any date is hovered, alter the top line in the css below.
      To change the colour of the text that appears in the highlighted box when it is hovered, alter the second line below.
      #wp-calendar td:hover, #wp-calendar #today {
      background: #eee;
      color: #bbb;
      }

      The colour of the border that surrounds the calendar is controlled by;
      #wp-calendar {
      border: 1px solid #ddd;
      empty-cells: show;
      font-size: 14px;
      margin: 0;
      width: 90%;
      }
      Alter the top line to change the colour.
      If you want a thicker border make the ‘1px’ into ‘2px’
      If you don’t want a border, don’t delete the line – just make it’s colour the same as that of your page. That way, if you ever want to put it back, it’s very easily done.
      You can also alter the width by changing the 90%.

      6. Login / Registration
      Delete either or both of these from your ‘index.php’ if you do not want visitors to see / use them.

      Boxing in your links

      This creates the impression that you have cleverly made vertical boxes for your links content.
      To do this, you modify the following part – this part was discussed above. It looks like this right now;
      #menu ul li {
      font: italic normal 110% ‘Times New Roman’, Times, serif;
      letter-spacing: 0.1em;
      margin-top: 10px;
      padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
      }
      and you make it into this;
      #menu ul li {
      font: italic normal 110% ‘Times New Roman’, Times, serif;
      letter-spacing: 0.1em;
      margin-top: 10px;
      padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
      padding-left; 2px;
      background-color: #fff;
      border-top: solid 1px #000;
      border-left: solid 1px #000;
      border-right: solid 1px #000;
      border-bottom: solid 1px #000;
      }
      Note: I have added a padding of 2px so that your link titles are slightly away from your new borders.
      You can add a colour to the menu background by adding
      background-color; #0000ff;
      to your #menu div – it’s the one at the top of this page.
      You can again just have the borders you want, the sizes you want, colours etc..
      The Footer

      In a default install, the footer will stretch across the entire screen. Now footers are a good thing, but as it is, it’s more of a ‘catch all’ than a footer. So it needs moving.
      Edit ‘index.php’ and scroll to the bottom. You should see this:

      <!–num_queries; ?> queries. seconds. –> <?php echo sprintf(__("Powered by WordPress“), __(“Powered by WordPress, state-of-the-art semantic personal publishing platform”)); ?>

      All you need to do is move a closing div to below the footer code. Like this:

      <!–num_queries; ?> queries. seconds. –> <?php echo sprintf(__("Powered by WordPress“), __(“Powered by WordPress, state-of-the-art semantic personal publishing platform”)); ?>

      Now, if your footer still goes all the way across the screen, it’s because you have not defined the rap div. Define that, and your footer will sit nicely where it is meant to.

      1
      The CSS that sorts this bar out is;
      .credit {
      background: #90a090;
      border-top: double 3px #aba;
      color: #fff;
      font-size: 11px;
      margin: 10px 0 0 0;
      padding: 3px;
      text-align: center;
      }
      Change the background colour at the top.
      If you would like the double border at the bottom too, add this line below the ‘border-top’
      border-bottom: double 3px #aba;
      Don’t like the double border ? Want a dotted one ? Replace ‘double’ with ‘dotted’
      Change the border colour by altering the ‘#aba’ to whatever you want.

      The Margin will set the bar 10px below content on the page, the padding will make the bar 3px thicker than the height of the text, and the text will be centre aligned.
      If you want the text in that bar to be on the left, put ‘left’ where ‘center’ is.
      (That bar actually passes behind the menu, so if your menu is covering part of the bar, although the text will not be centred according to your content, it is still centred according to the page size).

      If you don’t want a full bar across the screen, you can alter that too.
      Add this line to the above;
      width: 20em;
      This will shorten the bar.
      Now look at the line
      margin: 10px 0 0 0;
      The numbers refer to the margin that should be allowed in each of the four directions, but in this order – top, right, bottom, left (think of it as clockwise).

      Alter the last zero to read ‘100px’ and see what happens. It moves away from the side. Try 150px or 200px and just fiddle with it until it is exactly the place that you want it to be. You can also alter the ’12em’ and the ‘padding’ if you want.

      2
      The CSS in the above box still controls this.
      The font will be 11 pixels tall.
      ‘color: #fff’ means that text will be white.
      If you want to add extra links in the bar, you will need to edit your ‘index.php’.

      3
      The ‘WordPress’ link is affected by these two elements;
      If you want to alter the colour of the word ‘WordPress’ in the bar, add the following to your css;
      .credit cite a {
      color: #00ff00;
      }

      .credit cite a:hover {
      color: #ffff00;
      }
      That will make the word bright green, and yellow when hovered.

      Note:If you have removed the link to WordPress from your links, please leave the link to WP in this bar. It’s only polite to do so, after all, if someone used your work and didn’t at least let their viewers know where they had got it from, it would annoy you, right ?

      You may want to show the amount of database queries that it took to create your page, and the amount of time it took to render your page. This is the code to do that:

      num_queries; ?> queries. seconds. <?php echo sprintf(__("Powered by WordPress“), __(“Powered by WordPress, state-of-the-art semantic personal publishing platform.”)); ?>

      Links
      On your default WP install, links in your posts appear a green/grey colour and are underlined. They also change colour slightly when hovered. This behaviour applies to most links anywhere in your weblog, and you may well want to change it. Here’s how.

      Now before you start, think for a moment about how you want your links to look to your visitors. If you have a large site, then the colour of a link that your visitor has already seen is quite important. It can help them to navigate through your site if a visited link looks different to one they have not yet been to. On your average weblog, it’s no huge deal, but if your site begins to grow, it can become important. Anyway ….

      To do this, we need to create some link classes, and then change our code.
      Right at the top of your wp-layout.css is the CSS that curretly has control.
      a {
      color: #675;
      }

      a img {
      border: none;
      }

      a:visited {
      color: #342;
      }

      a:hover {
      color: #9a8;
      }
      Ignore the line with the ‘img’ in (that just stops all images having borders if they are links).
      Now don’t go getting rid of this part above! If nothing else, it’s your backup, and if it’s not used, it’s not exactly taking up a lot of space.

      So let’s create a link that will be bright green, and go dark green when hovered.
      Copy the above section into a text editor (like Notepad).
      Edit out the ‘a img {border: none;}’ line.
      You should be looking at this;
      a {
      color: #675;
      }

      a:visited {
      color: #342;
      }

      a:hover {
      color: #9a8;
      }
      The rap div & Images
      So you’ve changed some fonts, altered some colours, but now you want to make the whole page that bit more you. Would a background help ?
      Here is one way to do it.

      Your default page looks like this.

      What I’ll show you here will make everything you see narrower, and so leave space down the sides – and on the top – for some images of your choice.

      Now you don’t need to alter your ‘index.php’, but you do need to know that on line 34 of that file is this;

      Now remember that computers are dumb, they do exactly as they are told. Because, in a default install, there is no such thing as ‘rap’ defined, this statement is ignored. What we do is define what we want the ‘rap’ to be. By the way, it’s short for ‘wrapper’. This ‘div rap’ will wrap the whole page up slightly differently.

      First thing to do is define the ‘rap’.
      Here’s what we are going to put into your style.css;
      #rap {
      margin: 0px 100px 0px 100px;
      border: solid #000 1px;
      background: white;
      }
      This code means that everything which follows it in the ‘index.php’ will be put into a wrapper that has no top margin, has a 100 pixel right margin, no bottom margin and a 100 pixel left margin.
      Also, the border of the area will be a solid 1 pixel line in black.
      The background of this new area will be white.
      With me so far ?

      Now paste that into your style.css. (It doesn’t matter where at all).

      Now go your weblog and refresh the page. Bingo ! It’s not worked ! Yay!
      The problem is the menu ….. it just is not behaving. But this is not a problem.

      Go look at your css, and for the part that looks like this;
      #menu {
      background: #fff;
      border-left: 1px dotted #ccc;
      border-top: solid 3px #e0e6e0;
      padding: 20px 0 10px 30px;
      position: absolute;
      right: 2px;
      top: 0px;
      width: 11em;
      }
      Now it doesn’t really matter – because I’m not sure myself – why the menu didn’t play ball, but all we need to change is a couple of numbers.
      The guilty parts are these two lines;
      right: 2px;
      top: 0px;
      The ‘right’ line there is how many pixels the menu should be away from the right side of the screen, and the ‘top’ line is how far from the top of the screen it must be.
      This is where you need to fiddle as I can’t give you the exact numbers to go with. I can’t because I don’t know your screen resolution, I don’t know if you are actually doing this on a default template. Either way, alter only one value at a time.
      I suggest these values;
      right: 104px;
      top: 88px;
      See how your menu fits in either direction, and adjust the numbers accordingly.

      Eventually, you should end up with a layout that looks pretty damn close to this;

      and now you can put backgrounds in.

      If the top border of the menu starts to annoy you because you can’t seem to get the positioning spot on, then change it. At the moment it is;
      border-top: solid 3px #e0e6e0;
      Delete the line if you want, or make it smaller. Do what you need to make your design be what you want it to be.

      If you don’t want your weblog to be like this though, and instead want the weblog fully on the left to leave way for a nice big image on the right, just change the ‘rap’ and then move the menu.
      The rap for a fully left weblog would look like this;
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      See ? The only border now is 200 pixels on the right. You’ll need to move the menu again though.

      I promised a space right at the top didn’t I ?
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      You’ve probably figured it out, but if you change the first number after margin: to 100px, then your whole weblog will be bumped 100 pixels down the screen. Again, you will need to make changes to the top: in your #menu.

      Images
      I suppose you now want to know how to get the background image onto your page then ? Okay …..

      In your style.css is the #body tag;
      body {
      border: solid 2px #565;
      border-bottom: solid 1px #565;
      border-top: solid 3px #565;
      font-family: ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      background-color: white;
      color: black;
      }
      We need to tell the body to call an image.

      Delete this line
      background-color: white;

      and instead, put these this line in there;
      background-image: url(‘background.gif’);

      Put the image of your choice into the same directory as your wp-layout.css (just like when having a header image). It does not have to be a .gif – it can be a .jpeg, .jpg, .png or whatever your system supports.
      It’s a bit more tricky than this though ….

      How do you want your image to appear ? You have a few options !

      If you want it to be repeated horizontally only, add this line under your new line;
      background-repeat: repeat x;

      If you want the image repeated vertically only, add this line;
      background-repeat: repeat y;

      If you want the image to be repeated both across and down, it’s this line;
      background-repeat: repeat;

      And if you want your image to only be shown the once;
      background-repeat: no-repeat;

      The best advice I can give is to experiment…….

      But that’s not all ! Oh no ! There’s still more you can do!!

      If you’ve moved your weblog all the way to the left, and you’ve picked a nice big image that you want your visitors to see, you can decide if that image can be fixed or scrolled.
      If it’s fixed, then no matter how far down the page your visitor may scroll, that image will sit firmly in place.
      If it’s set to ‘scroll’ then as a visitor scrolls down to read your posts, the image will move up, and out of, the page.

      You could use a combination of these with different images.

      To do this, you add another line;
      background-attachment: fixed – the images stays exactly when you want.

      background-attachment: scroll – the images will move up as the page scrolls down.

      Now we add our first ‘class’.
      Alter the above lines so they look like this;
      a.green {
      color: #00ff00;
      }

      a.green:visited {
      color: #669933;
      }

      a.green:hover {The rap div & Images
      So you’ve changed some fonts, altered some colours, but now you want to make the whole page that bit more you. Would a background help ?
      Here is one way to do it.

      Your default page looks like this.

      What I’ll show you here will make everything you see narrower, and so leave space down the sides – and on the top – for some images of your choice.

      Now you don’t need to alter your ‘index.php’, but you do need to know that on line 34 of that file is this;

      Now remember that computers are dumb, they do exactly as they are told. Because, in a default install, there is no such thing as ‘rap’ defined, this statement is ignored. What we do is define what we want the ‘rap’ to be. By the way, it’s short for ‘wrapper’. This ‘div rap’ will wrap the whole page up slightly differently.

      First thing to do is define the ‘rap’.
      Here’s what we are going to put into your style.css;
      #rap {
      margin: 0px 100px 0px 100px;
      border: solid #000 1px;
      background: white;
      }
      This code means that everything which follows it in the ‘index.php’ will be put into a wrapper that has no top margin, has a 100 pixel right margin, no bottom margin and a 100 pixel left margin.
      Also, the border of the area will be a solid 1 pixel line in black.
      The background of this new area will be white.
      With me so far ?

      Now paste that into your style.css. (It doesn’t matter where at all).

      Now go your weblog and refresh the page. Bingo ! It’s not worked ! Yay!
      The problem is the menu ….. it just is not behaving. But this is not a problem.

      Go look at your css, and for the part that looks like this;
      #menu {
      background: #fff;
      border-left: 1px dotted #ccc;
      border-top: solid 3px #e0e6e0;
      padding: 20px 0 10px 30px;
      position: absolute;
      right: 2px;
      top: 0px;
      width: 11em;
      }
      Now it doesn’t really matter – because I’m not sure myself – why the menu didn’t play ball, but all we need to change is a couple of numbers.
      The guilty parts are these two lines;
      right: 2px;
      top: 0px;
      The ‘right’ line there is how many pixels the menu should be away from the right side of the screen, and the ‘top’ line is how far from the top of the screen it must be.
      This is where you need to fiddle as I can’t give you the exact numbers to go with. I can’t because I don’t know your screen resolution, I don’t know if you are actually doing this on a default template. Either way, alter only one value at a time.
      I suggest these values;
      right: 104px;
      top: 88px;
      See how your menu fits in either direction, and adjust the numbers accordingly.

      Eventually, you should end up with a layout that looks pretty damn close to this;

      and now you can put backgrounds in.

      If the top border of the menu starts to annoy you because you can’t seem to get the positioning spot on, then change it. At the moment it is;
      border-top: solid 3px #e0e6e0;
      Delete the line if you want, or make it smaller. Do what you need to make your design be what you want it to be.

      If you don’t want your weblog to be like this though, and instead want the weblog fully on the left to leave way for a nice big image on the right, just change the ‘rap’ and then move the menu.
      The rap for a fully left weblog would look like this;
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      See ? The only border now is 200 pixels on the right. You’ll need to move the menu again though.

      I promised a space right at the top didn’t I ?
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      You’ve probably figured it out, but if you change the first number after margin: to 100px, then your whole weblog will be bumped 100 pixels down the screen. Again, you will need to make changes to the top: in your #menu.

      Images
      I suppose you now want to know how to get the background image onto your page then ? Okay …..

      In your style.css is the #body tag;
      body {
      border: solid 2px #565;
      border-bottom: solid 1px #565;
      border-top: solid 3px #565;
      font-family: ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      background-color: white;
      color: black;
      }
      We need to tell the body to call an image.

      Delete this line
      background-color: white;

      and instead, put these this line in there;
      background-image: url(‘background.gif’);

      Put the image of your choice into the same directory as your wp-layout.css (just like when having a header image). It does not have to be a .gif – it can be a .jpeg, .jpg, .png or whatever your system supports.
      It’s a bit more tricky than this though ….

      How do you want your image to appear ? You have a few options !

      If you want it to be repeated horizontally only, add this line under your new line;
      background-repeat: repeat x;

      If you want the image repeated vertically only, add this line;
      background-repeat: repeat y;

      If you want the image to be repeated both across and down, it’s this line;
      background-repeat: repeat;

      And if you want your image to only be shown the once;
      background-repeat: no-repeat;

      The best advice I can give is to experiment…….

      But that’s not all ! Oh no ! There’s still more you can do!!

      If you’ve moved your weblog all the way to the left, and you’ve picked a nice big image that you want your visitors to see, you can decide if that image can be fixed or scrolled.
      If it’s fixed, then no matter how far down the page your visitor may scroll, that image will sit firmly in place.
      If it’s set to ‘scroll’ then as a visitor scrolls down to read your posts, the image will move up, and out of, the page.

      You could use a combination of these with different images.

      To do this, you add another line;
      background-attachment: fixed – the images stays exactly when you want.

      background-attachment: scroll – the images will move up as the page scrolls down.

      color: #669933;
      }
      Paste that into your ‘wp-layout.css’ – it doesn’t matter where, but close to the other similar links is good. Now that will colour links bright green, visited links will be a darker green, and hovered links will also be a darker green…..but only if we tell the code the right thing.

      A link normally looks like this;
      WordPress

      but if we want to use our new colours, we need to add the ‘class’;
      WordPressThe rap div & Images
      So you’ve changed some fonts, altered some colours, but now you want to make the whole page that bit more you. Would a background help ?
      Here is one way to do it.

      Your default page looks like this.

      What I’ll show you here will make everything you see narrower, and so leave space down the sides – and on the top – for some images of your choice.

      Now you don’t need to alter your ‘index.php’, but you do need to know that on line 34 of that file is this;

      Now remember that computers are dumb, they do exactly as they are told. Because, in a default install, there is no such thing as ‘rap’ defined, this statement is ignored. What we do is define what we want the ‘rap’ to be. By the way, it’s short for ‘wrapper’. This ‘div rap’ will wrap the whole page up slightly differently.

      First thing to do is define the ‘rap’.
      Here’s what we are going to put into your style.css;
      #rap {
      margin: 0px 100px 0px 100px;
      border: solid #000 1px;
      background: white;
      }
      This code means that everything which follows it in the ‘index.php’ will be put into a wrapper that has no top margin, has a 100 pixel right margin, no bottom margin and a 100 pixel left margin.
      Also, the border of the area will be a solid 1 pixel line in black.
      The background of this new area will be white.
      With me so far ?

      Now paste that into your style.css. (It doesn’t matter where at all).

      Now go your weblog and refresh the page. Bingo ! It’s not worked ! Yay!
      The problem is the menu ….. it just is not behaving. But this is not a problem.

      Go look at your css, and for the part that looks like this;
      #menu {
      background: #fff;
      border-left: 1px dotted #ccc;
      border-top: solid 3px #e0e6e0;
      padding: 20px 0 10px 30px;
      position: absolute;
      right: 2px;
      top: 0px;
      width: 11em;
      }
      Now it doesn’t really matter – because I’m not sure myself – why the menu didn’t play ball, but all we need to change is a couple of numbers.
      The guilty parts are these two lines;
      right: 2px;
      top: 0px;
      The ‘right’ line there is how many pixels the menu should be away from the right side of the screen, and the ‘top’ line is how far from the top of the screen it must be.
      This is where you need to fiddle as I can’t give you the exact numbers to go with. I can’t because I don’t know your screen resolution, I don’t know if you are actually doing this on a default template. Either way, alter only one value at a time.
      I suggest these values;
      right: 104px;
      top: 88px;
      See how your menu fits in either direction, and adjust the numbers accordingly.

      Eventually, you should end up with a layout that looks pretty damn close to this;

      and now you can put backgrounds in.

      If the top border of the menu starts to annoy you because you can’t seem to get the positioning spot on, then change it. At the moment it is;
      border-top: solid 3px #e0e6e0;
      Delete the line if you want, or make it smaller. Do what you need to make your design be what you want it to be.

      If you don’t want your weblog to be like this though, and instead want the weblog fully on the left to leave way for a nice big image on the right, just change the ‘rap’ and then move the menu.
      The rap for a fully left weblog would look like this;
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      See ? The only border now is 200 pixels on the right. You’ll need to move the menu again though.

      I promised a space right at the top didn’t I ?
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      You’ve probably figured it out, but if you change the first number after margin: to 100px, then your whole weblog will be bumped 100 pixels down the screen. Again, you will need to make changes to the top: in your #menu.

      Images
      I suppose you now want to know how to get the background image onto your page then ? Okay …..

      In your style.css is the #body tag;
      body {
      border: solid 2px #565;
      border-bottom: solid 1px #565;
      border-top: solid 3px #565;
      font-family: ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      background-color: white;
      color: black;
      }
      We need to tell the body to call an image.

      Delete this line
      background-color: white;

      and instead, put these this line in there;
      background-image: url(‘background.gif’);

      Put the image of your choice into the same directory as your wp-layout.css (just like when having a header image). It does not have to be a .gif – it can be a .jpeg, .jpg, .png or whatever your system supports.
      It’s a bit more tricky than this though ….

      How do you want your image to appear ? You have a few options !

      If you want it to be repeated horizontally only, add this line under your new line;
      background-repeat: repeat x;

      If you want the image repeated vertically only, add this line;
      background-repeat: repeat y;

      If you want the image to be repeated both across and down, it’s this line;
      background-repeat: repeat;

      And if you want your image to only be shown the once;
      background-repeat: no-repeat;

      The best advice I can give is to experiment…….

      But that’s not all ! Oh no ! There’s still more you can do!!
      If you’ve moved your weblog all the way to the left, and you’ve picked a nice big image that you want your visitors to see, you can decide if that image can be fixed or scrolled.
      If it’s fixed, then no matter how far down the page your visitor may scroll, that image will sit firmly in place.
      If it’s set to ‘scroll’ then as a visitor scrolls down to read your posts, the image will move up, and out of, the page.

      You could use a combination of these with different images.

      To do this, you add another line;
      background-attachment: fixed – the images stays exactly when you want.

      background-attachment: scroll – the images will move up as the page scrolls down.

      You can add as many classes as you want – just change the colours and change the class name (which as you have seen is the word between ‘a.’ and ‘:link’).
      If you have these classes, and you forget to add a class to the href, it will look like a default link. Just edit your post.

      This has covered just those links in the main content area. The section of this guide that covers the menu will show how to alter some of the link colours there, and the ‘Post Content’ section has details there too.

      If you want to go all out on your links, then an excellent article is Custom Underlines from A List Apart.

      The rap div & Images
      So you’ve changed some fonts, altered some colours, but now you want to make the whole page that bit more you. Would a background help ?
      Here is one way to do it.

      Your default page looks like this.

      What I’ll show you here will make everything you see narrower, and so leave space down the sides – and on the top – for some images of your choice.

      Now you don’t need to alter your ‘index.php’, but you do need to know that on line 34 of that file is this;

      Now remember that computers are dumb, they do exactly as they are told. Because, in a default install, there is no such thing as ‘rap’ defined, this statement is ignored. What we do is define what we want the ‘rap’ to be. By the way, it’s short for ‘wrapper’. This ‘div rap’ will wrap the whole page up slightly differently.

      First thing to do is define the ‘rap’.
      Here’s what we are going to put into your style.css;
      #rap {
      margin: 0px 100px 0px 100px;
      border: solid #000 1px;
      background: white;
      }
      This code means that everything which follows it in the ‘index.php’ will be put into a wrapper that has no top margin, has a 100 pixel right margin, no bottom margin and a 100 pixel left margin.
      Also, the border of the area will be a solid 1 pixel line in black.
      The background of this new area will be white.
      With me so far ?

      Now paste that into your style.css. (It doesn’t matter where at all).

      Now go your weblog and refresh the page. Bingo ! It’s not worked ! Yay!
      The problem is the menu ….. it just is not behaving. But this is not a problem.

      Go look at your css, and for the part that looks like this;
      #menu {
      background: #fff;
      border-left: 1px dotted #ccc;
      border-top: solid 3px #e0e6e0;
      padding: 20px 0 10px 30px;
      position: absolute;
      right: 2px;
      top: 0px;
      width: 11em;
      }
      Now it doesn’t really matter – because I’m not sure myself – why the menu didn’t play ball, but all we need to change is a couple of numbers.
      The guilty parts are these two lines;
      right: 2px;
      top: 0px;
      The ‘right’ line there is how many pixels the menu should be away from the right side of the screen, and the ‘top’ line is how far from the top of the screen it must be.
      This is where you need to fiddle as I can’t give you the exact numbers to go with. I can’t because I don’t know your screen resolution, I don’t know if you are actually doing this on a default template. Either way, alter only one value at a time.
      I suggest these values;
      right: 104px;
      top: 88px;
      See how your menu fits in either direction, and adjust the numbers accordingly.

      Eventually, you should end up with a layout that looks pretty damn close to this;

      and now you can put backgrounds in.

      If the top border of the menu starts to annoy you because you can’t seem to get the positioning spot on, then change it. At the moment it is;
      border-top: solid 3px #e0e6e0;
      Delete the line if you want, or make it smaller. Do what you need to make your design be what you want it to be.

      If you don’t want your weblog to be like this though, and instead want the weblog fully on the left to leave way for a nice big image on the right, just change the ‘rap’ and then move the menu.
      The rap for a fully left weblog would look like this;
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      See ? The only border now is 200 pixels on the right. You’ll need to move the menu again though.

      I promised a space right at the top didn’t I ?
      #rap {
      margin: 0px 200px 0px 0px;
      border: solid #000 1px;
      background: white;
      }
      You’ve probably figured it out, but if you change the first number after margin: to 100px, then your whole weblog will be bumped 100 pixels down the screen. Again, you will need to make changes to the top: in your #menu.

      Images
      I suppose you now want to know how to get the background image onto your page then ? Okay …..

      In your style.css is the #body tag;
      body {
      border: solid 2px #565;
      border-bottom: solid 1px #565;
      border-top: solid 3px #565;
      font-family: ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      background-color: white;
      color: black;
      }
      We need to tell the body to call an image.

      Delete this line
      background-color: white;

      and instead, put these this line in there;
      background-image: url(‘background.gif’);

      Put the image of your choice into the same directory as your wp-layout.css (just like when having a header image). It does not have to be a .gif – it can be a .jpeg, .jpg, .png or whatever your system supports.
      It’s a bit more tricky than this though ….

      How do you want your image to appear ? You have a few options !

      If you want it to be repeated horizontally only, add this line under your new line;
      background-repeat: repeat x;

      If you want the image repeated vertically only, add this line;
      background-repeat: repeat y;

      If you want the image to be repeated both across and down, it’s this line;
      background-repeat: repeat;

      And if you want your image to only be shown the once;
      background-repeat: no-repeat;

      The best advice I can give is to experiment…….

      But that’s not all ! Oh no ! There’s still more you can do!!

      If you’ve moved your weblog all the way to the left, and you’ve picked a nice big image that you want your visitors to see, you can decide if that image can be fixed or scrolled.
      If it’s fixed, then no matter how far down the page your visitor may scroll, that image will sit firmly in place.
      If it’s set to ‘scroll’ then as a visitor scrolls down to read your posts, the image will move up, and out of, the page.

      You could use a combination of these with different images.

      To do this, you add another line;
      background-attachment: fixed – the images stays exactly when you want.

      background-attachment: scroll – the images will move up as the page scrolls down.
      A left sided Menu
      So you want to move your column of links to the left hand side ? Keep reading then !

      The above is what you have now.
      This tutorial will take you through moving first the menu, then the header, then the middle bit where you post. All it involves is changing the file ‘style.css’ in a few (well, quite a few) places.
      This tutorial, unlike the others, involves more changing of numbers. While the numbers I give will work for what you see, they may not be exactly right for you. If they aren’t, then change them little by little until they do work for you. It will work in the end 🙂

      Move the menu

      In style.css is this part;
      #menu {
      background: #fff;
      border-left: 1px dotted #ccc;
      border-top: solid 3px #e0e6e0;
      padding: 20px 0 10px 30px;
      position: absolute;
      right: 2px;
      top: 0;
      width: 11em;
      }
      Now the bit we will change is the right: 2px; part. Change the word right to left. If you now look at your weblog, it’s a mess like this;

      Now there is nothing wrong there, the code is still fine, but we do need to shift the stuff from behind the newly placed menu.

      Move the header

      We’ll move the weblog title first. Strictly speaking, we are not actually moving the header. We are just moving that part of the header that you want to see. So that’s the title then.
      Look at your css again, and find this part;
      #header {
      background: #90a090;
      border-bottom: double 3px #aba;
      border-left: solid 1px #9a9;
      border-right: solid 1px #565;
      border-top: solid 1px #9a9;
      font: italic normal 230% ‘Times New Roman’, Times, serif;
      letter-spacing: 0.2em;
      margin: 0;
      padding: 15px 10px 15px 60px;
      }
      We just need the bottom line of that statement.
      Try changing that number 60 into 260. You should now see that your weblog title has been moved into view.

      Okay, so that’s the header bit sorted.

      Make the Content content

      The soon-to-be-altered part of the css is this;
      #content {
      margin: 30px 13em 0 3em;
      padding-right: 60px;
      }
      I suppose it’s about here that I try to explain what an ’em’ is. Hmm, okay then.
      An ’em’ is equal to an ‘M’ in the font you are using.
      So a horizontal space of ’13em’ in this font would be the same width as MMMMMMMMMMMMM – because that’s 13 M’s. Bigger font ? Bigger space .. get the idea ?
      So why use ’em’ here and not pixels like we do pretty much everywhere else ? Because we want what we write to have a nice, straight, unruled edge to it. We want the left side of our paragraphs to be neat. There, that’ll do eh ? Right ……

      So, an explanation of the above #content css.
      Your content will have margins around it, and going from top – right – bottom – left they are 30px, 13em, 0 (none) and 3em.
      Now look again at the image above.
      The top and bottom margins are fine, and can stay the same. The left margin is too big though, and so is the right.
      If the page worked the other way around though, it should work this way if we switch the numbers, so swap the 13em and the 3em.

      And you should now see this;

      There you go – job done !
      Image Alignment & Drop Shadows

      When you put an image into your post, this is the sort of thing that you will see…

      The image just sits there on the left.

      Let’s move it…..

      1. Stick it in the middle

      We need to create the CSS to center the image.
      Actually, it will center anything, not just images.

      From your login, go to Options, and edit ‘style.css’
      Paste this into your css file;
      div.cent {
      text-align: center;
      }
      I know it says ‘text-align’ but it works with pictures too. Now, when you post something that you want to be centred, you write it like this;

      Everything here will be centred

      For this next part, you are going to need some code and images.
      This is already done – by Laughing Lizard – and you will need to go to his site, get the code, and follow all the instructions there (they are brief and easy!) before you can do the rest of this page.
      Go to the Weblog Tools Collection.

      2. On the left with text wrap

      The code you have just got will enable you to have images like the above on your weblog.
      If the image ‘breaks through’ your entry box, then you will need to add this code to your css;
      div.clearer {
      clear: left;
      line-height: 0;
      height: 0;
      }

      and then when you enter your last image – not at the end of your text – put this;

       

      That image above was produced by the entry into WP identical to that below;

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt …….
      Note the gap ! There is a carriage return between the

      and the start of the text. If this is not there, your entered text will be in bold text.

      3. On the right with text wrap

      You need to copy and alter the css that Laughing Lizard wrote now.
      This is part of his original CSS:
      .img-shadow {
      clear: both;
      float:left;
      background: url(images/shadowAlpha.png) no-repeat bottom right !important;
      background: url(images/shadow.gif) no-repeat bottom right;
      margin: 20px 0 0 17px !important;
      margin: 20px 0 0 8px;
      }

      .img-shadow img {
      display: block;
      position: relative;
      background-color: #fff;
      border: 1px solid #a9a9a9;
      margin: -6px 6px 6px -6px;
      padding: 4px;
      }

      In your ‘style.css’, copy that, then paste it again into your css file. Yes, you do have a doubling up, but only for a moment.
      Now alter the pasted code by making the following changes which I have highlighted in bold. (Or you could just copy this code below 🙂 )
      .img-shadow1 {
      clear: both;
      float:right;
      background: url(images/shadowAlpha.png) no-repeat bottom right !important;
      background: url(images/shadow.gif) no-repeat bottom right;
      margin: 20px 0 0 17px !important;
      margin: 20px 0 0 8px;
      }

      .img-shadow1 img {
      display: block;
      position: relative;
      background-color: #fff;
      border: 1px solid #a9a9a9;
      margin: -6px 6px 6px -6px;
      padding: 4px;
      }

      And the entry in WP that produced that screenshot above was this;

       

      magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation …

      Again, note the carriage return and where the

       

      goes.

      Note also that if you use your new ‘Quicktag’, that the image will always be left-aligned. If you want it right aligned, you can still use the Quicktag, but be sure to put the ‘1’ in as in the above example.

      Credits

      The CSS, as mentioned, is the work of Laughing Lizard. Many thanks to him for allowing his work to appear here.

      The clearer div has been taken from Complex Spiral. I recommend that you read the article here on containing-floats. I have permission from the author of that page – Eric Meyer – for the quoting and use of his code.
      Customising Comments

      This part of the tutorial will enable you to do the following;
      Change the font family used for the comments
      Change the font size used for comments
      Put borders around the comment boxes
      Have a background colour or image for the comments box
      Change the “Comments by” line
      Altering the page background
      The Comments link
      Extra bits
      Files involved are: style.css, comments-popup.php / comments.php

      Change the font-family
      At present in your css, this is all the code that affects comments
      ol#comments li p {
      font-size: 100%;
      }
      Okay … there is some more, but we can ignore it for now.
      Now if you were to ‘View Source’ on a comment page, you will see that there are some tags that are called, but are not defined, so that’s what we are going to do here, and later on. So, changing the font-family ..
      Add the following to your style.css (you can copy and paste it if you want)
      ol#commentlist p {
      font-family: Tahoma;
      font-size: 100%;
      }
      We now have the font-family Tahoma, and it is set at a size of 100%.
      Now this will only affect text that is an ordered list within your comments page – that is, just your comments. It will not affect other text on the page. To be precise, it will only affect paragraph text that is contained within a commentlist div. Remember, if the font-family that you want has more than one name, such as Lucida sans unicode, it should be entered in quotes – “Lucida sans unicode”

      Change the font size
      Easy, alter the 100% in the code you just entered;
      ol#commentlist p {
      font-family: Tahoma;
      font-size: 150%;
      }
      That’s BIG text!
      A point: the bit in your comments that says “Comments by …….” is affected by this 150%. So if this text in your comments gets bigger, so does that bit. Likewise, if you make the comment text smaller, the “Comments by …” will be even smaller than that. See further down the page “Change the “Comments by” line”

      Bordering
      Time to add some css;
      ol#commentlist li {
      border-left: solid 1px #ff0000;
      border-right: solid 1px #ff0000;
      border-top: solid 1px #ff0000;
      border-bottom: solid 1px #ff0000;
      margin: 10px;
      }
      This tells the browser that each list element (in an ordered commentlist div) must have a border on each side, and that the border should be solid, 1 pixel wide and be bright red.

      I have added a margin so that the comments are slightly apart. Change or remove this as you wish.
      Now you don’t need all sides bordered if you don’t want, and you can of course change the border styles and sizes to suit the look you want.

      Another point: There is a very good reason why we are not using the ‘p’ element in the above definition. Take a look at this screenshot

      That uses the same code as above, but with the top line being ol#commentlist li p {
      See how the comment is in a different box from the person who made it ? Now that’s not so bad on it’s own, but look at the bottom entry … when I entered that, I wrote the first line “Here’s a lyric from Apoptygma Berzerk” I then pressed Enter, and continued writing. The code though thought that this was another paragraph, so it put a box around the first line, and then a box around the rest. So you could end up with several boxes for just one comment entry. Messy. So that’s why the ‘p’ is not there. Anyway…….

      Colour or Image the Comments box

      Look again at this code which you put into your page;
      ol#commentlist li {
      border-left: solid 1px #ff0000;
      border-right: solid 1px #ff0000;
      border-top: solid 1px #ff0000;
      border-bottom: solid 1px #ff0000;
      margin: 10px;
      }
      We’ve told it what to do around the box that the words are in, but not what to do with the inside of the box. So let’s do that then. We’ll add a line to make that code look like this;
      ol#commentlist li {
      border-left: solid 1px #ff0000;
      border-right: solid 1px #ff0000;
      border-top: solid 1px #ff0000;
      border-bottom: solid 1px #ff0000;
      margin: 10px;
      background-image: url(‘image.gif’);
      }
      You can use a .gif .png .jpg – it matters not.
      The image goes in your main WP directory.
      Remember that the comments boxes are usually quite small, so don’t have a huge image loading into it.
      Something more subtle than that scribble would be good too !

      If you just want a background colour, then you need this instead;
      ol#commentlist li {
      border-left: solid 1px #ff0000;
      border-right: solid 1px #ff0000;
      border-top: solid 1px #ff0000;
      border-bottom: solid 1px #ff0000;
      margin: 10px;
      background-colour: #0000ff;
      }
      That will give you a blue background. Change to suit of course.

      Change the “Comments by” line
      Because we have changed the background, it’s maybe not as quickly obvious as to who has made the comments. If you like the look you have, then just ignore this bit.

      If though you want to alter the ‘Comments by…” then we need to make a change elsewhere.
      From your login, go to Templates, and edit the comments template that you use (either ‘popup comments’ or ‘comments’) and look for this part (It’s about a third of the way down);

      by — @ <a href="#comment-“>

      You need to change it so that it looks like this – add the 1 in both locations.

      by — @ <a href="#comment-“>

      Now save the change.
      Now we need to add cite1 to your css, so open style.css
      cite1 {
      font-size: 90%;
      font-style: normal;
      background-color: #fff;
      }
      We have had to to this because the element cite is used elsewhere, and we only want these changes to affect the comments page.

      The new code above will produce a result like this.
      The commentor now stands out that bit more.
      You can change anything on each of those lines, and add borders like the examples above if you want. It’s a bit small for an image, but you could try !

      By now, you should be able to change the font and font size of your comments, you can have your comments box bordered, and you can have a background image or colour too. Pretty good. Shame about the rest of the page ……… but read on !

      Altering the page background

      There is a div that is used on the page, but it’s not actually defined. Yet.
      Here is some code for style.css;
      #commentspopup {
      background-image: url(‘image.gif’);
      }
      It’s only a page background, so not a lot of code is needed. If you don’t want an image, use something like this;
      #commentspopup {
      background-color: #ff00ff;
      }
      I think that’s a purple colour ?

      The Comments Link
      In a default install, this part of the CSS controls how that link looks.
      p, li, .feedback {
      font: 90%/175% ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
      letter-spacing: -1px;
      }
      If you are going to customise your page, it’s a good idea to split these statements. This was described on the ‘Post content’ page. So you should have this:
      .feedback {
      font: 90%/175% ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
      letter-spacing: -1px;
      }
      Change the 90% up or down to make the text larger / smaller. If you make the font a fixed size – by using a ‘pt’ measurement, this may make it hard for people with other screen resolutions to see the words you have there.

      The ‘Comments’ is a link, and can be styled as such too. Here for instance, it is coloured green, but when it is hovered, it turns yellow.
      .feedback a {
      color: #00ff00;
      }

      .feedback a:hover {
      color: #ffff00;
      }

      Extra bits
      You can put some colour into the comments boxes too.
      Each of those boxes is named in the WordPress code, so all we need to do is create the CSS that will colour those named areas.
      #commentform #author {
      border: 1px dotted #000;
      background: #ff0033;
      padding: .2em;
      }

      #commentform #email {
      border: 2px solid #000;
      background: #ff6633;
      padding: .3em;
      }

      #commentform #url {
      border: 3px dotted #000;
      background: #ff9933;
      padding: .4em;
      }

      #commentform textarea {
      width: 100%;
      background: #ffff33;
      }
      That CSS looks like this:

      That bug is the submit button.
      To have something similar, in the CSS, put this:
      .button {
      repeat: no-repeat;
      margin-bottom: -5px;
      }
      And in comments.php (or comments-popup.php) change this line:
      <input name="submit" type="submit" tabindex="5" value="” />
      into this:

      Front-end Helpful Web Cheat Sheets

      For web developers and designers, it can be difficult to memorize the syntax for multiple programming languages and frameworks, especially since they are always evolving and growing. This is where cheat sheets come in handy. Most cheat sheets are designed to be printer friendly, so you can have them laying around on your desk as quick reference cards. Here is a collection of useful cheat sheets specifically for front end web development that will help you with HTML, JavaScript, and CSS.

      HTML

      HTML 5 Cheat Sheet

      cheat sheet

      HTML 5 Visual Cheat Sheet

      cheat sheet

      (X)HTML Elements and Attributes

      cheat sheet

      HTML Cheat Sheet

      cheat sheet

      HTML5 Canvas Cheat Sheet

      cheat sheet

      CSS

      CSS Level 2 Visual Cheat Sheet

      cheat sheet

      CSS 3 Cheat Sheet

      cheat sheet

      CSS Cheat Sheet (V2)

      cheat sheet

      CSS Cheat Sheet

      cheat sheet

      JavaScript

      jQuery 1.4 API Cheat Sheet

      cheat sheet

      jQuery 1.4 Cheat Sheet

      cheat sheet

      jQuery 1.4 Cheat Sheet

      cheat sheet

      mootools 1.2 cheat sheet

      cheat sheet

      JavaScript Cheat Sheet

      cheat sheet

      Related Posts

      Here’s some other articles that you will definitely find useful.

      11 Useful Online Tools for Better CSS Development

      12 Useful jQuery Plugins for Working with Tables

      12 Excellent jQuery Plugins for Enhancing Forms

      10 Tips for Writing Better CSS

      14 jQuery Plugins for Enhanced Content Viewing

      Want more from WDL?

      How about lots of premium files to make your designs look amazing?

      Learn More

      Bookmark and Share

      AJAX accessibility for websites

      AJAX or Asynchronous JavaScript and XML, is an innovative way of using existing technologies to create highly interactive web applications. AJAX allows portions of the page to be updated without having to refresh and reload the entire page. It can increase site performance significantly and provide cutting edge user interfaces. Unfortunately it can also be a source of concern for delivering fully accessible web sites.

      What is AJAX?

      AJAX is not a new technology in itself but a new approach to programming websites based on the following web standards:

      • JavaScript
      • XML
      • HTML / XHTML
      • CSS

      The key word is asynchronous – AJAX applications work ‘behind the scenes’ with the web server to dynamically update the content of a web page. JavaScript plays an important role in this process, trading data with the server and manipulating the information on the page.

      Accessibility benefits of AJAX

      As well as significantly improving the user experience AJAX applications can also enhance accessibility. For example:

      • Auto-suggest dropdowns can help both users with reading difficulties and motor impairmentse.g. City and airport suggestions are offered as users enter text Screenshot of Kayak auto-suggest dropdown
      • Drag & drop sliders can help users with reading difficulties due to their illustrative naturee.g. A click-and-drag slider is used to filter search criteria Screenshot of Amazon drag & drop  sliders

      Accessibility issues caused by AJAX

      AJAX and JavaScript are usually used to update page content. When this happens screen readers respond in a variety of different ways, depending on both the screen reader and the browser:

      • Screen readers aren’t aware of the changes so will read out the unmodified version of the page. This means screen reader users don’t get the updated content of the page.
      • Screen readers are aware of the changes but will only read the modified content when they naturally reach it. This is fine unless the modified content precedes users’ current location. If this happens, they’re unlikely to hear this content.
      • Screen readers start reading the modified page but from the very top. This means that users have to essentially listen to all of the page content again. It can be difficult for these users to know which content has been updated and where in the page this content is.
      • Screen readers are automatically taken to the modified content so users instantly know that page content has been updated – this can however severely disorientate users.

      Screen magnifier users might not notice changes that have occurred outside the areas they’re interacting with. They can therefore miss out on important information especially if the changed content takes place above their current location on the page.

      Finally, AJAX requires JavaScript to be enabled. Although assistive technologies can now handle many uses of JavaScript they don’t all provide complete support.

      Recommendations for AJAX and accessibility

      There’s one key question to consider when planning the development of a website and the use of AJAX: Is there a real need to use AJAX?. If the answer is yes, then ensure the following is true to ensure AJAX accessibility is optimised:

      Inform users early in the page that dynamic updates will occur
      Not all users are familiar with AJAX interfaces. Let them know that changes may take place so they can expect and look for these changes. This is particularly important for screen reader and magnifier users as they may be unaware that changes have taken place.
      Highlight the areas that have been updated
      Using subtle changes to highlight areas that have changed, for just a short period of time, can be most helpful. It will inform users, in particular those with reading difficulties that updates have taken place.
      Don’t change the focus
      Do not move the focus of the page to where the change has taken place. Changing the focus can be disrupting for screen reader and magnifier users especially if there are no mechanisms to return to the previous position.
      Offer the option to disable automatic updates
      Allow users to manually request page updates, for example by providing links and/or form buttons to refresh the page on-demand. Screen reader and magnifier users may be unaware of on-the-page changes. It can also be difficult for users with reading difficulties to keep up with automatic updates. If possible, store users’ preferences for requesting page updates for future visits to the site.
      Ensure the site works if JavaScript isn’t enabled
      Build a standard application then overlay it with AJAX to improve its functionality. If JavaScript is disabled or not available then users will still be able to use the site.

      In case of an advanced AJAX application, consider providing an HTML alternative. If the AJAX application is impossible to use by group of users (e.g. if it relies on the use of a mouse, such as the drag & drop sliders) then a link to an HTML alternative is a must.

      Bookmark and Share

      WordPress, HTML, CSS, PHP, Javascript And More Cheat Sheets

      Cheat sheets are really helpful in revising the codes as there are so many codes which we cannot remember always but cheat sheets are of great help in keeping yourself updatedwith the codes.

      Cheat sheets are also helpful for beginner developers and designers in learning and remembering codes better. A truly great resource for upcoming developers.

      The purpose of this post is to provide all the cheat sheets useful for designers and developers at one place. A mega collection of cheat sheets which contains HTML, CSS, JAVA, PHP, Database SQL, WordPress, Aspx, SEO and many more other useful cheat sheets which you will find in this post. Most of the cheat sheets are available in printable format for a handy use of these resources.

      HTML/XHTML/XML

      CSS

      PHP

      ASP

      Database/SQL

      JavaScript

      WordPress

      SEO

      REWRITE And .HTACCESS

      Photoshop

      Windows

      Mac

      Browser Shortcut Cheats

      Bookmark and Share