Web Concepts

WordPress is finally providing a blog text editor that they can be proud of.  As of the most recent release, I have switched from using a desktop client to write blog entries to the WordPress web site interface.  That isn’t to say it hasn’t been without problems.

One issue I saw was that the text and picture alignment (left, right, and center) was not working.   However, this is a very simple thing to fix, if you aren’t afraid to get your hands dirty with some stylesheet work.

The problem is that the WordPress post and page editor uses its own CSS code to change how your page or post gets presented.  So if it is not in place already, copy this snipit of code into each of your WordPress themes to fix your alignment problems.

Here is the code you’ll want to copy and paste into your theme’s stylesheet:

img.centered, .aligncenter, div.aligncenter {display: block margin-left: auto; margin-right: auto; }

img.alignright { padding: 4px; margin: 0 0 4px 5px; display: inline; }

img.alignleft { padding: 4px; margin: 0 5px 4px 0; display: inline }

.alignright { float: right; }

.alignleft { float: left; }

Feel free to edit that as needed, to fit your own design preferences. Your theme is found at:

/wp-content/themes/nameoftheme/stylesheet.css

That should get you basically to the right spot.  Depending on the theme, stylesheet name might change. Also “nameofthetheme” should reflect the name of the WordPress theme you are using.

If you are having a hard time getting your images and content to align as you have specified in the built-in WordPress editor, this should do the trick.  Just remember to upload the changes, once you have put them in place.

© Lunarpages Web Hosting - Also, don′t forget to follow @lunarpages on Twitter!

Original post by Mitch

Depending on how many notes or messy modifications you make to your cascading style sheets, you might be about due for a little compression.  By shrinking you external CSS files, you can save the bandwidth it takes to download them, each time somebody visits your web site. 

Now how much optimization should you do?  Well, the CSS files should be small enough to load quickly, however readable enough to where you know what does what where, and why.  You have to balance size with readability.

Here are my three favorite online tools to help optimize and shrink my CSS files:

• CSSCompressor.com
• CSSOptimiser.com
• CleanCSS.com

By using any of these three solutions, you can reduce the CSS code size and make your web pages load faster.  They all allow you to choose from multiple degrees of compression, and they are all very quick too.

Related Tips and Tricks:

• Speed Up Pages by Combining External CSS
• Wizzypage &ndash Great (and free!) Web Site Editor
• Best Web Site Speed Analyzers

&copy Lunarpages Web Hosting - Also, don’t forget to follow @lunarpages on Twitter!

Original post by Mitch

The October edition of the Lunarpages customer newsletter has been released, and is chalked full of web hosting goodness.  If you have not checked it out yet – here are just a few things you are missing out on:

• LunarNews: October 2009
• Free Flash Templates for Your Website!
• Get Started with Quantcast Tracking Support Lunarpages from Twitter!
• ID vs Class in CSS Web Design
• Lunarpages Gives Back to Customers
• Mind Maps for Webmasters
• 20 Ear Entertaining Bookmarks
• Importance of Permalinks in WordPress
• Lunar Picks – What’s Your Favorite Scary Movie?

Don’t be the last one to check it out!  Use the links above to browse through this most recent gathering of tutorials, tips, guides, news and more wrapped up for you and presented by your buddies at Lunarpages.  We are all about the treats, and none of the tricks this October.

Related Tips and Tricks:

• Ping Your Site Map to Bing
• 60+ Links to Help You Learn CSS Web Design
• Basics of CSS in Web Design

© Lunarpages Web Hosting - Also, don’t forget to follow @lunarpages on Twitter!

Original post by Mitch

I have had many people ask me what resources do I learn from, when it comes to being a modern day webmaster.  Now, there are many resources out there – but here are 60 of the best links (taken from my own bookmarks to your browser) to assist you in mastering the art of CSS in web design.

1. Perfect 3 Column CSS Liquid Layout. No Images, Cross-browser
2. CSS Zen Garden
3. 5 Tips For Instantly Writing Better CSS
4. Andy Budd CSS/Web Standards Links
5. Mastering CSS: Styling Design Elements
6. Nice CSS How-To and Template site
7. CSSDog
8. Free CSS Templates
9. W3CSchools CSS Tutorial
10. CSS-based Navigation Menus
11. CSSeasy.com
12. Divine CSS – CSS Showcase Gallery
13. SlickMap CSS
14. 15 Great CSS Galleries
15. Ultimate list of CSS hacks
16. Styling <hr> with CSS
17. 101 High Quality CSS And XHTML Free Templates And Layouts
18. 35 CSS-Lifesavers For Efficient Web Design
19. CSS Portal
20. Clean CSS – Optimize &amp Format Your CSS
21. CSS Basics
22. CSS on Delicious
23. Top 50 Best CSS Articles and Resources
24. Sitepoint CSS Tutorials
25. 20 CSS Short Hands You’ll Love
26. CSS-Tricks
27. Listamatic – Styled Lists
28. 20 Useful CSS Tips for Beginners
29. Mastering CSS: Advanced Techniques and Tools
30. UniqueCSS.com
31. 5 Popular CSS Frameworks + Great Tutorials &amp Tools
32. CSS Design
33. Web Design from Scratch: CSS
34. HTML Dog – HTML and CSS Tutorials
35. Open Design Community
36. Position is Everything
37. SitePoint CSS Reference
38. CSS Help Pile
39. CSS Positioning
40. 10 Creative & Rich UI interfaces & How to Create Them
41. Aeon Interactive
42. CSS from the Ground Up
43. CSS tutorial of the Float element
44. 30 Exceptional CSS Navigation Techniques
45. CSS Layout Techniques
46. 456 Berea Street – CSS category
47. Sexy Drop Down Menu w/ jQuery & CSS
48. A List Apart CSS Topics
49. Ruthsarian Layouts
50. W3C – Cascading Style Sheets
51. Learn CSS
52. CSS Articles & Resources
53. PSD to HTML/CSS &amp Implementation
54. The CSS Gallery List
55. Learn CSS Positioning in Ten Steps
56. Holy CSS Zeldman!
57. 30 Exceptional CSS Techniques and Examples
58. Eric Meyer: CSS
59. 50 Beautiful and User-Friendly Navigation Menus
60. CSS Navigation Magnification
61. 50+ Nice Clean CSS Tab-Based Navigation Scripts
62. CSS Tricks
63. minimalsites.com
64. HTML Dog CSS Tutorials
65. CSS Perk

Know of another great CSS tutorial or resource that you would like to share?  Don’t be shy!  Leave a comment, and add it on the list as pick number 66, pick number 67, pick number 68, and so on. 

Related Tips and Tricks:

• MooTabs Brings Pizzazz to Your Site Navigation
• Free Design Stencil Kit from Yahoo!
• All the Lunar News That is Fit to Print

© Lunarpages Web Hosting - Also, don’t forget to follow @lunarpages on Twitter!

Original post by Mitch

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.

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 of your web pages?  Well then your HTML in your pages becomes 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:

&ltp class=&quotmycooltitle&quot&gtthis is my page title&lt/p&gt

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:

&lt;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 of the 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’ll save that lesson for another day.

Related Tips and Tricks:

• Wizzypage &ndash; Great (and free!) Web Site Editor
• Inspiring Web Design
• CSS Round Box Generator

&copy Lunarpages Web Hosting - Also, don’t forget to follow @lunarpages on Twitter!

Original post by Mitch

Tell me, which of these would be easier to do? Carry ten pieces of luggage with you on your trip, or put everything into one piece of luggage?  The second, of course.  The same thing could be said for CSS files in your web site’s code. 

The use of multiple external CSS files, can slowdown the loading of a web page.  Instead of telling it, “OK, load this file now” you are telling the browser, “load this file.  Done? OK, now load this one, and this one and this one”.  The general rule of thumb when it comes to web design is to try to use three (or less) external CSS style sheets. 

Here are some rules of thumb for combining your CSS files in production from the Google Code site:

• Partition the CSS into 2 files each: one CSS file containing the minimal code needed to render the page at startup; and one CSS file containing the code that isn’t needed until the page load has completed.
• Serve CSS of a rarely visited component in its own file. Serve the file only when that component is requested by a user.
• For CSS that shouldn’t be cached, consider inlining it.
• Don’t use the CSS @import rule from a CSS file. If possible, inline the imported CSS content in the main CSS file, or load the imported CSS from the main HTML document instead.

Also worth mentioning is the fact that you should make sure in your head tags, the link to the CSS files should go before any links to any scripts.  To put it in a way that everybody can understand – when your browser loads a page, it takes its time with JavaScript, because JavaScript can alter how the page looks, or the content inside the web page.  So, you should always call for your .css files before you call for the JavaScript files in your web page’s head code.

I hope this helps as a pretty good guide to shave some of the loading time from your web pages.  We might be talking about milliseconds here a lot of the time, but when it comes to delivering the fastest loading pages, every second does count, in true web site optimization.

Related Tips and Tricks:

• More Web Hosting Help, Tips and Tutorials!
• Affiliate Plan Payment Checklist
• Wizzypage &ndash; Great (and free!) Web Site Editor

&copy Lunarpages Web Hosting - Also, don′t forget to follow @lunarpages on Twitter!

Original post by Mitch

Who would have ever thought to look for web designer resources at a place called forwebdesigners.com?  It is so simple, its brilliant.  Here you will find some of the most popular resources for (you guessed it) web designers.  From fonts, to CSS resources to everything in between – it has something everybody can get something out of.  No matter if you are a web designer just getting started, or an old pro – this is a resource to bookmark.

Just to give you a little taste of what is in store, here are some of the great sites I found looking under the “inspiration” category:

• Web Creme
• CSS Inspirace
• CSS Mania
• CSS Galeries
• CSS Beauty
• Fazai38’s Inspirational Blo…
• CSS Blue

Check out the rest, and be sure to let us know about some of the great resources you find. 

Related Tips and Tricks:

• Two Great CSS Cheat Sheets
• CSS Tab Designer
• Free Design Stencil Kit from Yahoo!

&copy; Lunarpages Web Hosting - Also, don’t forget to follow @lunarpages on Twitter!

Original post by Mitch

How does the old saying go?  It isn’t cheating if you don’t get caught?  Well, don’t tell anybody I gave you these two great CSS cheat sheets!  Web designers rejoice, as these are two of the most handy things you can have, well… handy when it comes to cascading style sheets.

• CSS Cheat Sheet vҀ – via addedbytes.com
• CSS Cheat Sheet via LeslieFranke.com

Know of anymore cheat sheets from around the Web that you get a lot of use out of?  Let us know in the comments!

Related Tips and Tricks:

• Wizzypage &ndash; Great (and free!) Web Site Editor
• CSS Round Box Generator
• Free Design Stencil Kit from Yahoo!

© Lunarpages Web Hosting - Also, don′t forget to follow @lunarpages on Twitter!

Original post by Mitch

Looking for another alternative to your bland free web site editors out there?  If you are looking to try something new, give Wizzypage a shot.  This WYSIWYG editor provides true what you see is what you get editing abilities. 

Here is a little more about how it works from the developers:

Wizzypage allows the user to add, position, and edit content "areas" using a series of mouse-click activated popup menus. These areas can then be dragged around and resized on the design surface to explore alternate layouts. Wizzypage’s text editor automates basic html coding chores like font and paragraph formatting or the assignment of background colors and images.

It also has a built in spell checker and FTP uploader, which are always nice to have handy in any WYSIWYG editor.

Want to see some examples?  Check out these test sites:

• Digital Photo Scrapbook
• Layouts with Multiple Image Layers
• Music Download Site Example

As you can see, there is a lot to love here – and this plan would be perfect for a hosting plan like our Basic or Business ones.  You can download Wizzypage for free (tested to work on both Windows XP and Windows Vista), via at Wizzypage.com.

&copy; Lunarpages Web Hosting - Also, don′t forget to follow @lunarpages on Twitter!

Original post by Mitch

Looking for another alternative to your bland free web site editors out there?  If you are looking to try something new, give Wizzypage a shot.  This WYSIWYG editor provides true what you see is what you get editing abilities. 

Here is a little more about how it works from the developers:

Wizzypage allows the user to add, position, and edit content &quot;areas&quot; using a series of mouse-click activated popup menus. These areas can then be dragged around and resized on the design surface to explore alternate layouts. Wizzypage’s text editor automates basic html coding chores like font and paragraph formatting or the assignment of background colors and images.

It also has a built in spell checker and FTP uploader, which are always nice to have handy in any WYSIWYG editor.

Want to see some examples?  Check out these test sites:

• Digital Photo Scrapbook
• Layouts with Multiple Image Layers
• Music Download Site Example

As you can see, there is a lot to love here – and this plan would be perfect for a hosting plan like our Basic or Business ones.  You can download Wizzypage for free (tested to work on both Windows XP and Windows Vista), via at Wizzypage.com.

Related Tips and Tricks:

• A Clean Modern Font for Your Next Logo
• Inspiring Web Design
• Grab a Social Network Badge

&copy Lunarpages Web Hosting - Also, don’t forget to follow @lunarpages on Twitter!

Original post by Mitch