How to add a corner banner to your web page?
Today I noticed that a few sites, including WordPress.com have a corner banner on their pages to help alert others to a specific cause (in this case they are against SOPA & PIPA).
And so everyone can add a corner banner to their sites, I am going to post how to do it.
Step 1 – Create the image
There are dozens of ways to create the images and if you can create it yourself, just do so.
Note: While I for this cause WordPress would care if you used their image, I thought it best to make my own if for no other reason than to use my color style.
- Using your favorite image editor create a new image.
Note: I am going to use the free Paint.NET program. - Change the canvase size to be a square. Use a size between 150×150 to 200×200. I went with 175×175.
- Make the background transparent.
- Draw a line from corner 0,0 to corner 175,175.
Note: In some applications, holding down shift while drawing your line will guarantee the line is a perfect 45 degree diagonal. - Draw a second line from 60,0 to about 175,115.
Note: Mine came out to 175,114, which is close enough. - Fill the area inside the lines as you desire.
Note: I used a nice soft gradient. - In a new layer (also transparent), add text in a normal horizontal way.
- Rotate only the new layer 45 degrees. (-45.00 degree.)
- Show both layers.
- Move the text to the appropriate place in the image.
- Save as a png or jpg file.
- Upload the image to your site.
Here is my image. Feel free to download it and use it.
Step 2 – Change your web site code to display the image
- Add the following style to your css file.
#right-corner { position: fixed; /* Make sure you can align it exactly */ cursor: pointer; /* Change the cursor on mouse over */ top: 0px; /* Change to 100px to put it under a 100px banner */ right: 0px; /* Change to 100px to put it left of a 100px right-side bar */ z-index: 99999; /* make sure it is the top element always */ }Note: If you do not have a css file, then go to step two and add this as well in step 2.
<style> #right-corner { position: fixed; /* Make sure you can align it exactly */ cursor: pointer; /* Change the cursor on mouse over */ top: 0px; /* Change to 100px to put it under a 100px banner */ right: 0px; /* Change to 100px to put it left of a 100px right-side bar */ z-index: 99999; /* make sure it is the top element always */ } </style> - Open whatever html or script file that create the top part of your web site.
Note: Often it is a top.htm, header.htm, or something similar. - Find your <body> tag and add a link to http://americancensorship.org anywhere inside the <body> tag.
- For the tag, set the “id” to the css id called right-corner.
- Put your image inside the link.The code should look as follows:
<a id="right-corner" href="http://americancensorship.org/" target="_blank"> <img src="/wp-content/uploads/2012/01/Stop-Censorship.png" alt="Stop Censorship"> </a>
- Save your changes.
- Refresh your page.
You now have a corner banner image on your page.
While I want to add a corner banner to my site and state that I am against SOPA and PIPA as well, here is my disclaimer:
I haven’t fully read the SOPA & PIPA document, so I am against it based on hearsay…but it is reliable hearsay. Also there may be statement in the document that I am for. Instead of telling you what I am against in the SOPA & PIPA document, it is easier just to write my thoughts.
- The U.S. Government should not censor the internet for the public in any way.
- The government should in no way tamper with or hinder the freedom of speech on the internet
- Certain organizations, such as parents at home, schools, or a business (except ISPs) may censor/filter the internet for their specific internet connection. (And hence anyone only using their internet access is also censored).
- The Government may censor the internet in locations they naturally control, such as in Government Buildings, military facilities, or government-paid-for schools.
- An ISP may provide an optional censorship/filtering service so long as it is not applied by default or when not specifically requested. If the ISPs whole business plan is based on the idea of a safe internet for families, such as MStar, then defaulting to enabling certain censorship/filtering service is allowed.
- Internet Registrars may enforce rules that make filtering easier, like having all porn sites end in .xxx or all gambling sites end in .gmb so they can easily be filtered, especially in homes, schools, and some work places. But enforcement should be done by agreement of internet registrars and not really by the U.S. Government.
- The government should pursue theft of intellectual property the same on the internet as is does with theft of intellectual property off the internet with one stipulation: Only the most minimal part of a site should altered. For example, if a site posts a copyrighted movie, only the movie itself should be removed, every other part of the site should remain, including a broken link to the movie.
If the bill could be written with those few sentences, it would pass easily and I don’t think anyone would care.
main sv388
Rhyous » Blog Archive » How to add a corner banner to your web page?
thanks for the code sample. I just did not have this banner in my sites. cool idea
Great work!! Thanks a lot!
[...] I would like to add something like this to my website https://www.rhyous.com/2012/01/23/how…your-web-page/ [...]