Archive for css
How to Change Links with CSS
Posted by: | Comments
Links, like just about any other part of a web page, can also be made to look different with some CSS code. Using a CSS, you can easily change the color of link, the size, the background and much more.
Before we get started though, there are four different link states that you may want modify. They are:
- a:link – just your run-of-the-mill regular link
- a:visited – a link that somebody has visited
- a:hover – the effect to the link when somebody mouses over it
- a:active – how a link looks the moment it is clicked
Now that you know the four different link states, how can you modify them?
When adding CSS code to modify the way your links look in a page, you can use just about any CSS property out there. Here are some common link styles you may want to play with.
Take Away the Underline for Links with CSS
If you want to take away the underline from links, try setting the text-decoration CSS property to “none”.
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
Change the Colors of Links with CSS
Another quick and easy styling tip would be to change the background color or the color of the links themselves. You can do that by using the “color” and “background-color” link properties. Here is an example:
a:link {color:#336699; background-color:#B2FF99;}
a:visited {color:#336699; background-color:#FFFF85;}
a:hover {color:#003366; background-color:#FF704D;}
a:active {color:#003366; background-color:#FF704D;}
Using More Than One Link Style on the Same Page
As an example, let us say you want the box on the left to have blue links, and the box on the right to have red links, all on the same web page. You can do that by using context dependent selectors. The thing to remember is to put the section’s id, class, or span name before the link code like so:
.box1 a:link {color:#336699;}
.box2 a:link {color:#335544;}
I hope that serves a a good introduction into the basics of styling links using cascading style sheet code. This will help you make your links on your web sites more unique to the look and feel that you want your own web site to have.
Tip: When setting the style for several link states, there are some order rules:
- a:hover MUST come after a:link and a:visited
- a:active MUST come after a:hover
Setting Up an eCommerce Website With Ease
Posted by: | CommentsBuilding and maintaining a successful ecommerce site can be a difficult task for the average internet user, especially if you have never even set up a regular website before. Nonetheless it is a very wise idea to expand your business endeavors to the internet, and failing to do so would only result in an inevitable loss of potential revenue. If you want your eCommerce site to be as successful as possible, then you’ll need to understand the process of setting up an eCommerce site with maximum efficiency. Similar to every other project on the internet, there are tools to help you zoom through the entire process of creating your eCommerce site. However, without knowledge of these tools, they are of little purpose to you. The following information should help you get started building a quality eCommerce site that converts to sales for your business.
Using Templates
Perhaps one of the best ways to begin setting up your eCommerce website is to take a shortcut by using templates. Many people spend a lot of money trying to pay a web developer or learn how to set up a website four scratch themselves. Instead of taking this long and drawn out approach, you could easily download an eCommerce site template online and customize it to fit your needs using CSS coding. While it may sound as if CSS coding is complex, it is a lot easier and a lot faster than setting up a website from scratch, and many times you can end up with a better website than if you would have payed someone to do it for you. Templates are basically predesigned websites that you can set up in just a couple minutes time.
Installing a Shopping Cart In Your Site’s Control Panel
A shopping cart is easily one of the most important parts of an eCommerce site. By using a shopping cart your customers can quickly and conveniently add all of the items they’d like to buy and checkout without having to deal with any of the unnecessary problems that could possibly be associated shopping online such as having to checkout several times in a row to buy several different items. Many people will not shop on your online website without shopping cart functionality. The easiest way to install a shopping cart on your eCommerce site is to use your hosting control panel to access a one-click installation utility. Before you purchase an eCommerce hosting plan make sure your hosting includes such an installation utility in their control panel. It would also be optimal to purchase an eCommerce hosting plan which would usually come with a shopping cart.
Uploading Product Catalogs
Perhaps the most time consuming part of setting up an ecommerce site is the actual process of uploading the product descriptions and other information that is associated with the products such as images and prices. The product catalog will undoubtedly consume most of your website’s resources, and therefore it usually takes a lot of time to upload it and optimize it for your customer’s convenience. After the products are uploaded you will then need to organize them into the proper categories so that your customers ca easily find what they are looking for. Although this may seem as if it will take days or even weeks, it can be done fairly quickly using mass catalog uploading utilities that will let you upload your products in bulk and then organize them in a drag and drop interface.
Lunarpages March Newsletter
Posted by: | CommentsThe luck of the Irish is with you, because you have found the greatest collection of news, tutorials, tips and information in the web hosting world. Lunarpages is back with another excellent newsletter to help inform you about the latest happenings at Lunarpages.com. Do not let any leprechauns steal this pot of gold away from you.
Lunar News – March 2010 – What is new with Lunarpages? Never afraid to innovate to keep our customers happy, we have tons of great news, links and specials that should keep your wallet happy and your hosting account intact. Here are some of the latest happenings from around the Lunar-verse.
Get a Free Custom Web Design! – How would you like to get a professionally design web site design for your domain today? ETMG in co-operation with Lunarpages will be giving away a completely FREE custom web design to select established businesses that apply and meet the following criteria.
Better Server Access Logs – One new features to come to the LPCP web hosting control panel this month is the ability to gain access your server access logs. Anything that happens on your web hosting account will be recorded in the server access logs, if you have enabled the setting from within your LPCP control panel for the web hosting plan you use.
Win Some Marketing Assistance! – Lunarpages wants to help you check out the new SEO and SEM marketing packages first hand. How are they doing that? You can enter to win a free 30-day Basic SEM and SEO program, valued at $389 for free!
Affiliate Hosting Checklist – There is no doubt Lunarpages provides one of the industry’s leading affiliate programs out there today. However, when using your affiliate program information to help your web site visitors, friends, and family members sign up for Lunarpages, there are a few things you might want to double check, to make sure they are off your affiliate checklist so we can pay you up to $65 per person you bring to us.
Live Web Hosting Error Logs in LPCP – One new innovation to come to our LPCP web hosting control panel is live error logging. The error log, for your web hosting account here at Lunarpages, is one of the most important account specific statistics you can gather.
Google’s Real Time Search Future – The way Google indexes your web sites might be changing soon. Rather than relaying solely on the crawling method, they will also be indexing your content instantly. This means as soon as you create a new web page, it will be up on Google in seconds, not days or weeks.
Introduction to CSS Web Design – Adding a Cascading Style Sheet to your current web site layout and save you time and make your web site look a lot more professional in the process. Cascading Style Sheets, or sometimes referred to as CSS, is a style sheet language used to describe how a web page should be formatted.
Make Your Twitter Page Stand Out – How often do you use Twitter? You might just use it to follow a few friends, or you might use it to market your web site projects. There are a lot of ways to use Twitter as a service. My question that I pose to you is, how can you make it better looking?
Fix Web Site Errors with Webmaster Tools – Did you know that Google Webmaster Tools could help you find and fix errors on your web site? As Google crawl through your web site links, it finds and logs all the errors it encounters. It then (if you have your domain setup with a Google Webmaster Tools account) will turn around and tell you what the errors are so that you can get them fixed.
20 of the Web’s Best News Sources – When you have your own web site, and you talk about things that are current, it is your job to stay “in the know” about the latest news. Now with all the sources of news out there, this might be a mighty task. To help you out, we have gathered 20 of the best news sources out there online today.
That is it for this month’s edition of the Lunarpages Newsletter. We hope you enjoy this collection of articles, tutorials, tips and more we have created especially for you, the Lunarpages clients and customers. We always enjoy hearing your reaction, so please feel free to leave a comment or send your opinions to news@lunarpages.com.
Introduction to CSS Web Design
Posted by: | Comments
Adding a Cascading Style Sheet to your current web site layout and save you time and make your web site look a lot more professional in the process. Cascading Style Sheets, or sometimes called CSS, is a style sheet language used to describe how a web page should be formatted.
For example, if you wanted to make some text on a web page look bold, you might use this snippet of HTML code:
<strong>this will be some bold text!</strong>
Which seems simple enough. However, what if you want to chance the color, font, and how this text is shown in that spot across all your web pages? Well then your HTML in your pages become a rambling mess. That is where Cascading Style Sheets come in handy.
Cascading Style Sheets allow you to, in a much more organized way, sort out how your web site design looks in a totally separate file, or chunk of code in between the head tags. For example, let say you wanted the title of your page to be bold, green, and a different font style than the rest of the page. In your HTML code, you would use something like this:
<p class=”mycooltitle”>this is my page title</p>
That tells the browser that everything within this paragraph or <p></p> tags will follow the design setup class I have defined as “mycooltitle”. Now, in between the head tags (<head> </head>) I want you to add this:
<style type=”text/css”>
.mycooltitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #336633;
}
</style>
This CSS code tells the web browser to apply these design settings to the class marked, “mycooltitle”. It does three things. It says it will use the Verdana font, the font will be bolded, and it will be colored green (#336633 is the HTML color code for a shade of green).
That is how you apply Cascading Style Sheets to your web design and layout of your own web pages. One major benefits of using CSS is that it helps to separate your web site code with your design. This way, you can change one aspect very easily in the CSS file (when or if you start to master external style sheets). I will save that lesson for another day.
Make Your Twitter Page Stand Out
Posted by: | Comments
How often do you use Twitter? You might just use it to follow a few friends, or you might use it to market your web site projects. There are a lot of ways to use Twitter as a service. My question that I pose to you is, how can you make it better looking?
Twitter Backgrounds – Many people have customized the backgrounds of their Twitter pages to display more information about them. This can easily be done by using a really big background image that you type the content on as a part of the image. Darren Rowse (as seen above) has done an excellent job at that on the @problogger Twitter account.
Twitter Colors – Want to change the default color scheme your Twitter profile uses? All you need to do is login to Twitter.com, and then click on the Settings link at the top of the web page.
Next, click on Design – and you will be given several default design choices.
You can also click the “Change Background Image” button to change your background image or click, “Change Design Colors” to tweak the colors that your profile uses for the backgrounds, text, and links.
When you are done – just click on the button labeled, “Save Changes”.
Your Twitter “About” Link – Have you added your web site’s URL to your Twitter profile? You can do that by going to Settings > Profile.
Some people will put in their web site’s URL, which is perfectly reasonable. One neat tip you might try though is to create a special page on your web site dedicated to people who find you from Twitter. For example, you could create yourdomain.com/twitter, and on that page welcome your Twitter followers and post specific content geared more towards that audience and topics they might be more interested in.
When there are millions of people using Twitter every single day, you have to use a little creativity to make your tweets stick out from the crowd. Remember, you can follow Lunarpages on Twitter too @lunarpages.com.
7 Most Retweeted Blog Posts of 2009
Posted by: | Comments
I always love seeing people sharing the tutorials and articles we write up on a daily basis over at the Lunarpages Lunartics web hosting blog. Over the past year, we have seen a surge of popularity, and also a surge in retweeted links via Twitter for each of our posts that have been made.
Rather than just give you the most popular blog posts of 2009, I thought I would turn toward our great Twitter followers and give you seven of the most retweeted Lunartics blog posts in 2009.
40 CSS Layouts to Help with the Basics
When searching through some of my personal favorite CSS and design resources, I stumbled upon an old favorite of mine – Layout Gala. It might be a ‘bit old, but the advice and layouts here are as good now as they were then.
Make Your Pages More Tweet-ccessible
Want to make your web page a little more accessible to Twitter users? You might look to add the re-tweeter from TweetMeme to your own web site layout. You (or your fans) can promote your web site using the TweetMeme button. It is a simple and easy way to integrate Twitter onto your blog and web site.
Introduction to Mind Maps for Webmasters
When it comes to planning out a brand new web site, organizing your thoughts can be rather difficult. You might know you want to design a web site about a specific topic, but can’t decide what else you might need in that web site to help it become successful. Mind maps are one great way to get your jumbled thoughts about your site organized.
WordPress Hosting at Lunarpages
All this month, on the Lunartics blog, we will highlight some of our favorite third-party scripts. From image galleries to message boards, there will be a little something for everybody. To get things started, I thought I would discuss with you why WordPress is my absolute favorite blogging script.
I have been spending a lot of my time on Facebook here recently. I am far from being a Facebook expert, however I do have a few tips for you if you have not tried it yet, or you were scared away. Here are some of my own Facebook tips for those of you who might be new to the social networking scene.
10 Awesome Blog Clients to Help You Write
Great tools do not make you a great writer, however it can make you a more productive one. Here are ten of my favorite blog clients – in no specific order. By using a desktop client to update your blog (rather than the web site interface) you can often gain features like being able to draft a post locally, or get your hands on even more tools to edit your articles. These selections have those abilities and many more included.
Grab a Number of Cool Google Gadgets
The gadget team over at Google have made it really easy to grab any number of tools they have featured there and display them on your web site. At the time of writing this, they have over 175,000 little boxes of information to share with your own visitors.
Join the Lunarpages Community!
There are a number of different ways you can enjoy blog posts like this every single day. Come join the fun via:
Lunarpages is much more than just a web host, we are one big helpful community of users and staff alike, all willing to help each other out.