Tips for avoiding HTML errors
For anyone that uses the forums on this site you'll know why this place is called Glitchspot. One of the most horrid and annoying glitches this site has is the HTML error message. So I'm going to give you some tips on how to avoid getting this message.
The first, and most effective, way of avoiding the HTML errors is to turn off the WYSIWYG editor. What the WYSIWYG editor does is add HTML to your posts for formatting. Normally this would be a good thing, since you don't have to add the HTML yourself. But the WYSIWYG editor that GS uses is horrible coded and doesn't work. It produces crap HTML that leads to the HTML errors you get. Turning it off will greatly improve your chances of avoiding HTML errors. You can turn the WYSIWYG editor off by clicking the Options link(top right of page). In the popup window click the forum tab and uncheck the "Use WYSIWYG editor" option, then click Apply Changes.
Now some of you might want to keep using the WYSIWYG editor, there are still some things you can do to avoid the HTML errors. Most of the HTML errors you will get is because you have unclosed tags. Since the introduction of the wide forums, GS has switched to XHTML strict. What this means is that all tags must be closed, or the HTML isn't valid, this includes one sided tags. For the most part, the WYSIWYG editor closes double sided tags just fine, but it doesn't close one sided tags. So what you need to do is close the one sided tags.
Here is what a two sided tag looks like:
As you can see, there is an opening tag and a closing tag. Here is what a one sided tag looks like:
As you can see there is only one tag. In non-strict HTML the code I just showed you would be a okay, but not in XHTML. The problem with the code is that the tag isn't closed. This is how a closed tag would look like:
That one little " / " is the biggest producer of HTML errors you are going to get when using the WYSIWYG editor. So you have to go in and change this manually. To edit this, you need to get access to the HTML of the post. In the WYSIWYG editor click the HTML icon, this will bring up a popup with the HTML of the post. Go through the post and add the necessary closing " / " You should make sure all one sided tags are closed, the most common tags used are:
Hopefully this tips will help you avoid the HTML errors. These are just tips that I've found to work, there is no guaranteed that they will work for you.
The first, and most effective, way of avoiding the HTML errors is to turn off the WYSIWYG editor. What the WYSIWYG editor does is add HTML to your posts for formatting. Normally this would be a good thing, since you don't have to add the HTML yourself. But the WYSIWYG editor that GS uses is horrible coded and doesn't work. It produces crap HTML that leads to the HTML errors you get. Turning it off will greatly improve your chances of avoiding HTML errors. You can turn the WYSIWYG editor off by clicking the Options link(top right of page). In the popup window click the forum tab and uncheck the "Use WYSIWYG editor" option, then click Apply Changes.
Now some of you might want to keep using the WYSIWYG editor, there are still some things you can do to avoid the HTML errors. Most of the HTML errors you will get is because you have unclosed tags. Since the introduction of the wide forums, GS has switched to XHTML strict. What this means is that all tags must be closed, or the HTML isn't valid, this includes one sided tags. For the most part, the WYSIWYG editor closes double sided tags just fine, but it doesn't close one sided tags. So what you need to do is close the one sided tags.
Here is what a two sided tag looks like:
As you can see, there is an opening tag and a closing tag. Here is what a one sided tag looks like:
As you can see there is only one tag. In non-strict HTML the code I just showed you would be a okay, but not in XHTML. The problem with the code is that the tag isn't closed. This is how a closed tag would look like:
That one little " / " is the biggest producer of HTML errors you are going to get when using the WYSIWYG editor. So you have to go in and change this manually. To edit this, you need to get access to the HTML of the post. In the WYSIWYG editor click the HTML icon, this will bring up a popup with the HTML of the post. Go through the post and add the necessary closing " / " You should make sure all one sided tags are closed, the most common tags used are:
Hopefully this tips will help you avoid the HTML errors. These are just tips that I've found to work, there is no guaranteed that they will work for you.
Print
Comment
Tag
Facebook
Digg thisMore Opacity Stuff ^_^
Instead of bumping the GS theme thread once again I'm just going to do this blog post. =P
I've been working on improving the Opacity theme here and there. One major area I needed to improve was unions. I finally got around to fixing the union pages! =P I've made the union pages the same width as the wide forums. I've also changed the header and footer of union pages to better match the rest of the site. Here is the preview:
***SPOILER***
Here are some other things I changed:
- Quote image(see Soapbox side column)
- More things are rounded
- Page navigation links no longer have border
- Thread list no longer has border
- Other things I'm too lazy to type =P
If you have anything you want changed or improved in the theme feel free to PM me(I can't test everything on the site -.-;
Also, I should update the other themes to match the opacity theme better sometime. I don't use any of the other themes anymore and I haven't bothered to update them for a while. =P
In other news, I like how flexible the Opacity theme is. I've been switching images from time to time, here are couple of my favorite ones:
Mario***SPOILER***
Shiori
***SPOILER***
Mio
***SPOILER***
Samus
***SPOILER***
Nintendo Conference
So what do you think about Nintendo's conference?I think it went okay. Nintendo had some good games to show, although more would have been nice.
New Super Mario Bros Wii
This game has potential but it isn't happening just yet. The demo looked below average. The graphics look like they are taken directly from the DS and the level design wasn't impressive. The idea of having a cop-op Mario game might work, but I'm skeptical about it at this point.
Super Mario Galaxy 2
I'm looking forward to this one. I loved the first game and I'm hoping this one is just as good. But they are going to need to bring in some new elements, the demo looked very similar to the first Galaxy, which isn't bad but we don't want straight up repeats. Although I am loving that Yoshi is back! ^_^
Golden Sun DS
I've never played a Golden Sun game so I can't comment on it much. The trailer got me interested though, I should probably check out the Golden Sun games sometime.
Metroid: The Other M
This one is interesting. I'm excited for this one; it will be fun to see what they come up with. It does seem it's going to be different then past 3d Metroid games, which isn't bad. I was expecting a new Metroid game, especially since Nintendo is making the remake of the first Metroid Prime games. I have high hopes for this game! =3
New Super Mario Bros Wii
This game has potential but it isn't happening just yet. The demo looked below average. The graphics look like they are taken directly from the DS and the level design wasn't impressive. The idea of having a cop-op Mario game might work, but I'm skeptical about it at this point.
Super Mario Galaxy 2
I'm looking forward to this one. I loved the first game and I'm hoping this one is just as good. But they are going to need to bring in some new elements, the demo looked very similar to the first Galaxy, which isn't bad but we don't want straight up repeats. Although I am loving that Yoshi is back! ^_^
Golden Sun DS
I've never played a Golden Sun game so I can't comment on it much. The trailer got me interested though, I should probably check out the Golden Sun games sometime.
Metroid: The Other M
This one is interesting. I'm excited for this one; it will be fun to see what they come up with. It does seem it's going to be different then past 3d Metroid games, which isn't bad. I was expecting a new Metroid game, especially since Nintendo is making the remake of the first Metroid Prime games. I have high hopes for this game! =3
Customizing Gamespot Opacity!(Updated!)
Note: This guide is assuming you are using the latest Opacity theme and Stylish 1.0
If you remember, I did a blog post about customizing Gamespot Ice. Now it's time I did the Opacity theme since it's a bit different. I'll also be updating the Gamespot Ice blog later since it's a bit out of date now. =P
The big thing about the Opacity theme is that the background of the site is transparent thus letting you see a nifty background image. So it is important to choose a good image! The only advice I can give you about choosing a good image is to choose one with one main color scheme. Trying to transparent objects above an image that has tons of colors doesn't work that well(although you might be able to pull it off). Feel free to experiment with many images, it took a while before I found the image for the Opacity theme. Now that you have an image how do you add it to the theme? It's quite simple, you only have to edit one line. To edit a GS theme in Firefox go to Tools > Addons > User Styles. Just click on the Gamespot Opacity Theme and click the edit button. Now the Opacity css file will show up in a popup window for you to edit. To insert your own image you need to edit this line(it's at the beginning of the code):
You have two options, use an image from the internet like the theme already does, or use an image from your hard drive. To use an image from the internet just replace the url with your desired image's url. If you want to use an image from your hard drive you need to do this:
After the file:/// insert the location of your image(EXAMPLE: C:/Users/bededog/Pictures/picture.jpg NOTE: Make sure you use forwardslashes '/' NOT backslashes '\'). Once you have the image location entered you can press the preview button(bottom left) to see it in action. If no image shows up you did something wrong.
Okay so now that we have an image chosen we need to change the background colors of the site! With the newly update Opacity theme it now uses a CSS attribute called rgba to make the transparent backgrounds. Rgba stands for Red, Green, Blue, Alpha. The syntax looks like this:
The first three numbers are the rgb colors. You can get the rgb values for various colors by opening paint or some other image editor(IE: GIMP, Photoshop) and mess around with the color panels. The last number is the alpha channel; the alpha channel effects how transparent the color is. A 1 is no transparency at all, a 0 is full transparency, and any decimal(up to two places IE: .02) is semi-transparent. The Opacity theme is separated into three different color areas. Each one has a comment block above it to let you know when you have gotten to a new section. They are at the beginning of the code right under were you put the image.
The first color block is meant to be the image background color. It is recommended you choose something darker for this color. The second color block is for lighter color objects, such as headers, choose a light color for this one. And the last color block is for another dark color. My main advice for choosing colors is just to experiment. It takes a while to find just the right color, don't give up! Also, make sure you test the colors on multiple different pages so it looks all right on all pages(I usually test on the topic pages, in threads, profiles). To test out the colors just press the preview button.
Now all we have left are the link colors. For this one I suggest testing on the news page. As you can see on this page the link colors are separated into two colors, a light and darker color. To change the color of links scroll down the code until you find a block comment that says: "This changes the color of various text found around the site." The first and second color attributes are the ones you want to edit. To change the color of a link you can use various methods. The Opacity theme by default uses HTML notation to change the color. I don't want to get into HTML notation, so we'll just use rgb. Replace the following:
with:
Just replace the numbers with the rgb values of choice, there is no alpha channel here since the links aren't transparent. Once again experiment with colors until you find the right ones.
And that's all folks! It isn't that hard to customize it. =3
Also, if you want to keep your theme and still have the Opacity theme you can write a new theme. In the User Style window(Tools > Addons > User Styles) there is a button on the bottom right to write a new style. Click the button then copy and paste the entire edited Opacity style into the new window. Then just type in a name and save it!
Here is an example of a custom opacity theme I made. I'll go step-by-step and show you everything I changed to get the final product.
The final product looks like this:
***SPOILER***
Step 1; Inserting an Image:
***SPOILER***
Step 2; Choose the first color:
***SPOILER***
Step 3; Choose the second color:
***SPOILER***
Step 4; Choose another color:
***SPOILER***
Step 5; Choose link colors
***SPOILER***
(Optional)Step 6; Center background:
***SPOILER***
And that is all I changed! =3
Other helpful tips
Okay here are a few other tips I forgot to mention in the first post.
When you are adding an image from your computer you might have a space in the file location(IE: C:/Users/bededog/My Pictures/picture.jpg). You can't leave the space in there or the image won't show up. In programming terms you just need to insert an escape sequence. All that means is adding a ' ' backslash before the space. IE: C:/Users/bededog/My Pictures/picture.jpg
Another thing you will want to change is the search icon and arrow colors seen here:
Now both of these are images. So there is not easy way to change the colors. You have to upload your own image and replace the image url in the code with your own file. But I have made it a bit easier for you.
For the search icon I already have a couple different colored ones uploaded for the various GS themes. You just need to edit the url a bit to get the other colored icons. This is the section of code you want to change:
Right now I have four search icons you can choose from. The purple one is the url already in the code. To get a red icon just replace the search_icon_puprple.jpg at the end of the url with search_icon_red.jpg To get a green change it to search_icon_green.jpg And for a blue one just change it to search_icon.jpg
Now let's change the arrow color. Right now I only have two arrow colors up, the purple one and a blue one. To change the arrow color just change this:
The default image is the purple arrows. Change the end of the url from arrows-1.gif to just arrows.gif for a set of blue arrows. The finished product will look like this:
If you have any questions you can PM me or leave a comment!
Also, a cookie to whomever knows what show Konata is referencing in the image. ^_^
If you remember, I did a blog post about customizing Gamespot Ice. Now it's time I did the Opacity theme since it's a bit different. I'll also be updating the Gamespot Ice blog later since it's a bit out of date now. =P
The big thing about the Opacity theme is that the background of the site is transparent thus letting you see a nifty background image. So it is important to choose a good image! The only advice I can give you about choosing a good image is to choose one with one main color scheme. Trying to transparent objects above an image that has tons of colors doesn't work that well(although you might be able to pull it off). Feel free to experiment with many images, it took a while before I found the image for the Opacity theme. Now that you have an image how do you add it to the theme? It's quite simple, you only have to edit one line. To edit a GS theme in Firefox go to Tools > Addons > User Styles. Just click on the Gamespot Opacity Theme and click the edit button. Now the Opacity css file will show up in a popup window for you to edit. To insert your own image you need to edit this line(it's at the beginning of the code):
| HTML wrote: |
| background-image: url('http://i45.photobucket.com/albums/f60/bededog/kiss2.jpg') !important; |
You have two options, use an image from the internet like the theme already does, or use an image from your hard drive. To use an image from the internet just replace the url with your desired image's url. If you want to use an image from your hard drive you need to do this:
| HTML wrote: |
| background-image: url(file:///) !important; |
After the file:/// insert the location of your image(EXAMPLE: C:/Users/bededog/Pictures/picture.jpg NOTE: Make sure you use forwardslashes '/' NOT backslashes '\'). Once you have the image location entered you can press the preview button(bottom left) to see it in action. If no image shows up you did something wrong.
Okay so now that we have an image chosen we need to change the background colors of the site! With the newly update Opacity theme it now uses a CSS attribute called rgba to make the transparent backgrounds. Rgba stands for Red, Green, Blue, Alpha. The syntax looks like this:
| HTML wrote: |
| background: rgba(1, 1, 1, .4) !important; |
The first three numbers are the rgb colors. You can get the rgb values for various colors by opening paint or some other image editor(IE: GIMP, Photoshop) and mess around with the color panels. The last number is the alpha channel; the alpha channel effects how transparent the color is. A 1 is no transparency at all, a 0 is full transparency, and any decimal(up to two places IE: .02) is semi-transparent. The Opacity theme is separated into three different color areas. Each one has a comment block above it to let you know when you have gotten to a new section. They are at the beginning of the code right under were you put the image.
The first color block is meant to be the image background color. It is recommended you choose something darker for this color. The second color block is for lighter color objects, such as headers, choose a light color for this one. And the last color block is for another dark color. My main advice for choosing colors is just to experiment. It takes a while to find just the right color, don't give up! Also, make sure you test the colors on multiple different pages so it looks all right on all pages(I usually test on the topic pages, in threads, profiles). To test out the colors just press the preview button.
Now all we have left are the link colors. For this one I suggest testing on the news page. As you can see on this page the link colors are separated into two colors, a light and darker color. To change the color of links scroll down the code until you find a block comment that says: "This changes the color of various text found around the site." The first and second color attributes are the ones you want to edit. To change the color of a link you can use various methods. The Opacity theme by default uses HTML notation to change the color. I don't want to get into HTML notation, so we'll just use rgb. Replace the following:
| HTML wrote: |
| color: #a172ff !important; |
with:
| HTML wrote: |
| color: rgb(0, 0, 0) !important; |
Just replace the numbers with the rgb values of choice, there is no alpha channel here since the links aren't transparent. Once again experiment with colors until you find the right ones.
And that's all folks! It isn't that hard to customize it. =3
Also, if you want to keep your theme and still have the Opacity theme you can write a new theme. In the User Style window(Tools > Addons > User Styles) there is a button on the bottom right to write a new style. Click the button then copy and paste the entire edited Opacity style into the new window. Then just type in a name and save it!
Here is an example of a custom opacity theme I made. I'll go step-by-step and show you everything I changed to get the final product.
The final product looks like this:
***SPOILER***
Step 1; Inserting an Image:
***SPOILER***
Step 2; Choose the first color:
***SPOILER***
Step 3; Choose the second color:
***SPOILER***
Step 4; Choose another color:
***SPOILER***
Step 5; Choose link colors
***SPOILER***
(Optional)Step 6; Center background:
***SPOILER***
And that is all I changed! =3
Other helpful tips
Okay here are a few other tips I forgot to mention in the first post.
When you are adding an image from your computer you might have a space in the file location(IE: C:/Users/bededog/My Pictures/picture.jpg). You can't leave the space in there or the image won't show up. In programming terms you just need to insert an escape sequence. All that means is adding a ' ' backslash before the space. IE: C:/Users/bededog/My Pictures/picture.jpg
Another thing you will want to change is the search icon and arrow colors seen here:
Now both of these are images. So there is not easy way to change the colors. You have to upload your own image and replace the image url in the code with your own file. But I have made it a bit easier for you.
For the search icon I already have a couple different colored ones uploaded for the various GS themes. You just need to edit the url a bit to get the other colored icons. This is the section of code you want to change:
| HTML wrote: |
| #content form.mini_search span.submit button, #site_footer .search button.submit { background-image: url('http://i45.photobucket.com/albums/f60/bededog/search_icon_purple.jpg') !important; } |
Right now I have four search icons you can choose from. The purple one is the url already in the code. To get a red icon just replace the search_icon_puprple.jpg at the end of the url with search_icon_red.jpg To get a green change it to search_icon_green.jpg And for a blue one just change it to search_icon.jpg
Now let's change the arrow color. Right now I only have two arrow colors up, the purple one and a blue one. To change the arrow color just change this:
| HTML wrote: |
| .page_flipper a, #video_promo_side ul.actions li.play a span { background-image: url('http://i45.photobucket.com/albums/f60/bededog/arrows-1.gif') !important; } |
The default image is the purple arrows. Change the end of the url from arrows-1.gif to just arrows.gif for a set of blue arrows. The finished product will look like this:
If you have any questions you can PM me or leave a comment!
Also, a cookie to whomever knows what show Konata is referencing in the image. ^_^
Last day of school! Back to reviewing games.
Well today was the last day of school! I have now official finished my junior year of high school, only one more to go! ^_^
I think I did pretty good grade wise. All As and Bs, maybe one C if a certain back grade I got lowers it enough... But besides that it's all good and dandy! =3
In other news I'm been away from the videogame scene a while now. I haven't kept up with the games coming out and I haven't played too many videogames for a while now. Since it's the summer and I'm going to have a lot of free time I'm going to beat the games I've neglected for far too long.
The first game I want to beat is The World Ends With You. I got this game a while ago but stopped playing only a couple hours into the game. It's not that I didn't like the game, it's just I didn't have time and I never got around to playing it. So I just started a new profile on the game and will definitely beat the game this time. =3
I also plan to make a review of the game! Man, it has been a while since I did a review. I'm surprised I still have my Top 500 emblem, lol. I don't know when I'll have the review, it might be a week or two still, but I definitely want to get back into it.
