I have released an immediate update to the Custom Coming Soon Pages Plugin – The update introduces another default theme for the Default Coming Soon Page which is quite similar to the original one but without the Count-Down Timer. So all of you who have upcoming projects but are not sure about the launch date – Grab an updated copy of the Plugin from the WordPress Plugin Repository and put it to good use

Wordpress Plugin Coming Soon Without Timer

Download Custom Coming Soon Pages – WordPress Plugin v1.01

* Thanks to our user suayMac for picking this up and suggesting that I add a theme without the CountDown Timer.

Custom Coming Soon Pages WordPress Plugin will enable you to perform upgrades, fix nasty bugs or preview jazzy enhancements to your design live on your WordPress based website or blog without letting your users and normal visitors see crappy error messages or changes to the design until you really want them to.

Screenshots »

Previous Next

More Benefits »

Domain Age is a significant metric that is considered by many Search Engines among other factors while ranking your website. So if you have a unused domain, you can use the Custom Coming Soon Pages Plugin on a fresh WordPress install instead of your web host’s landing page. Restrict your host from pointing your domain to an ad-farm when you can make a mark with a Coming Soon Page customized to project your Brand even before you launch.

Custom Coming Soon Pages Plugin is also capable of displaying a Count Down Timer if you plan to launch on a Specific Date. You can also let your users subscribe to your website so that they can get notified via email whenever you launch. Integrated Twitter and Facebook features lets your visitors follow you on these social networks until you launch.

Features »

1. Controlled Access:
   Only Normal Visitors and Regular Members will see the Custom Coming Soon Page. If the Site Administrators are logged in, they will not see the Custom Coming Soon Page but will be able to view the fully functional blog with the current applied theme and active plugins as well as full access to the WordPress Dashboard.
2. Customizable Content:
   Customize the Title of the Coming Soon page as well as the coming soon message that is displayed from the Plugin Settings in your Dashboard.
3. Customizable Backgrounds:
   Specify any color for the background or use an image of your choice from the Plugin Settings in your WordPress dashboard.
4. Create your own Custom Coming Soon Page templates:
   You can create your own Custom Coming Soon Page templates using xHTML / CSS / PHP and plug them into the plugin for use.
5. Countdown Timer:
   Going to launch your website on a Specific Date? Specify it in the Plugin Settings and Display a cool Count Down Timer on your Custom Coming Soon Page.
6. Know-When-We-Launch:
   Let your users subscribe to your website and get notified via email when you launch.
7. Social Networks:
   Integrated Twitter and Facebook features lets your visitors follow you on these social networks until you launch. Just specify your user ID in the plugin settings in your WordPress Dashboard.

Download Custom Coming Soon Pages WordPress Plugin by CSSJockey now !

Installation »

1. Extract the Plugin Folder from the downloaded ZIP file.
2. Upload cj-coming-soon folder to your /wp-content/plugins/ directory.
3. Activate the plugin from the ‘Plugins’ page in your Dashboard.
4. Configure the plugin from Settings > CJ Coming Soon options page.

Update »

1. Update | Custom Coming Soon Pages Plugin – ver 1.01

Plugin Support »

Report any Bugs or Request more Features at our Support Forums.

I believe you’ll find this plugin useful. Please let me know how do you like it. I’d appreciate your valuable feedback on Custom Coming Soon Page WordPress Plugin so please use the comments form below and keep your inputs coming…

Simple light-box effect with jQuery and CSS

As you already know that I’ve been working on improving the performance of my website and I needed a simple solution to create light-box effect for Live-Chat on this website. I had many options to choose from available jQuery plug-ins however, the idea was to optimize the code with minimal use of heavy third-party scripts and CSS. Moreover, Only thing I needed was a light-box effect without any other functionality.

So I created the light-box effect with a few lines of code using CSS and jQuery.

View Live Demo

Let’s start coding

xHTML Code

Place this code within <body></body> tags where ever you like.

<a id="show-panel" href="#">Show Panel</a>

<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
<p>You can add any valid content here.</p>
<p align="center">
<a id="close-panel" href="#">Close this window</a>
</p>
</div><!-- /lightbox-panel -->

<div id="lightbox"> </div><!-- /lightbox -->

First line of the above code is a link with id “show-panel” which will display the “light-box” and the “lightbox-panel” DIVs, similarly on line 7 we have a link with ID “close-panel” to hide these DIVs. This will be handled by jQuery of course.

#lightbox-panel will hold the content to be dispalyed and #lightbox will add a transparent background behind our content panel. Let’s write some CSS code to stylize these two DIVs before we add the functionality to our links with jQuery.

CSS Code

You can add this code within the document’s <head></head> tag or in any linked style sheet.

* /Lightbox background */
#lightbox {
 display:none;
 background:#000000;
 opacity:0.9;
 filter:alpha(opacity=90);
 position:absolute;
 top:0px;
 left:0px;
 min-width:100%;
 min-height:100%;
 z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
 display:none;
 position:fixed;
 top:100px;
 left:50%;
 margin-left:-200px;
 width:400px;
 background:#FFFFFF;
 padding:10px 15px 10px 15px;
 border:2px solid #CCCCCC;
 z-index:1001;
}

Note: The z-index value for #lightbox-panel should be greater than z-index value of #lightbox to display it above the transparent background and both should have the property display as none so they should not show up by default or if the users have Javascript disabled in their browsers.

Let’s put some life to our code with jQuery.

jQuery Code

You can add this code within the document’s <head></head> tag and we are done.

<script type="text/javascript" src="PATH_TO/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $("a#show-panel").click(function(){
 $("#lightbox, #lightbox-panel").fadeIn(300);
 })
 $("a#close-panel").click(function(){
 $("#lightbox, #lightbox-panel").fadeOut(300);
 })
 })
</script>

Pretty simple, huh!!

Could it get easier than this?

Once you click the link with ID “show-panel” it will display both the DIVs with some nice fade effect and if you click the link with ID “close-panel” it will hide these DIVs.

I hope you enjoyed this little trick to create simple light-box effect with CSS and jQuery and You are most welcome to share your inputs and code in the comments below.

WordPress Plugin - Community Links Feed

Community Links Feed plugin for WordPress allows your blog or website’s community users to submit their favorite links to your website. Upon submission, the community links appear in the Dashboard where the administrator can approve or reject them as appropriate. Once approved, the community links feed appears in a customizable sidebar widget.

You can customize the Community Links Feed widget from the plugin settings page in Dashboard where you can:

1. Change the widget heading
2. Change the widget description
3. Choose whether to include rel=”nofollow” in community feed links submitted by your users
4. Change the length of link title or description

Easy Installation

1. Upload cj-community-links folder to your /wp-content/plugins/ directory.
2. Activate the plugin from the ‘Plugins’ page in WordPress.
3. Add the widget to your sidebar from Appearance->Widgets.
4. Configure the widget from Settings->Community Links.

Screenshots

Theme Settings

Manage Links

The Widget - This will be displayed as per your blog style

Submit Link Panel

Download

Please download the plugin files (cj-community-links.zip — 36 KB) in ZIP format using the button below:

View Live Demo

Help & Support

Please visit our Google Group to report any bugs or request more features.

IMPORTANT: If you are facing blank page issues with this plug-in and have WP-Cache Plug-in installed, try the steps listed here on DailyBlogTips.com . I hope this will help.

I am sure you’ll love Community Links Feed Plugin and find it of great use on your website. Please use the comments form to let me know how do you like it. Your valuable feedback and suggestions are most welcome.

Become a Fan on Facebook

Recently I started hearing from a lot of people complaining about their theme developers using minified CSS in their themes for maximizing performance without any consideration for their ease of use / customization. People keep asking me if there are tools that convert minified CSS back to normal human-readable form and recently someone even asked me to do a job – normalize some minified stylesheets (of course I didn’t do it and rob him off!)

Whether or not developers should minify CSS when giving out themes / websites has been a subject of debate for a long time but why developers choose to minify some parts of their stylesheets has often been overlooked. Performance issues for larger projects, minifying the reset styles (you don’t have to change them anyway!) and non-developer license are just some of the reasons!

Anyway, coming back to the subject of this post – How can you read minified CSS with ease?
(No, we are not going to install any 3rd party software!)

Simply validate the CSS (only the minified part if you have other files attached as well) in question using the W3C’s CSS Validation service!

The output of the validation check is:

1. whether or not, your CSS validates to standards set by W3C.
2. Normal, Properly Formatted and Easily Readable version of your minified / compressed CSS

You need to keep the formatted and decompressed CSS? Just copy it from the validation output and replace your version. Voila!

1. Ported xHTML and CSS markup to a newer Framework that I developed.
2. Updated the scripts to minimize the use of jQuery based plug-ins.
3. Optimized the background and other images to load faster.
4. Revamped the home page design to highlight the blog posts better.
5. Home page design now allows more dynamic content to be added for easy navigation and that extra SEO bit.
6. Revamped the Comments style on blog posts.

I have also added more custom admin options to the dashboard to make it easier to control the website without having to edit any files manually. I am loving the new look and feel of the website but I am keen to know how do you feel about it.

Take a look around the website and feel free to provide your valuable feedback using the comments form below

We don’t have any specific positions we’re actively trying to fill, but that could change quickly! Either way, we know that you don’t build an exceptional team by only hiring in spurts. We’re always looking for great people to connect with and discuss opportunities.

Are you an awesome Web Designer or Developer?
Send us your CV / Portfolio at jobs [at] cssjockey.com

What are we looking for?

In Designers:

The candidate must be a highly self-motivated team player and a quick learner who is capable of working efficiently in strict time constraints, independently and as a part of a team. Adobe Photoshop will be the primary design tool, though knowledge of Illustrator or Fireworks would be a great asset and add weight to your eligibility for the post.
We are looking for the following key skills in a designer…

1. Must understand the basics of layers, positioning, blending and grouping
2. Must be familiar with color modes, blending modes and effects
3. Must be an expert with pen, selection and other tools
4. Must know and be able to use Photoshop Filters and Actions
5. Must have a good sense of color schemes and placement of web elements

Most important of all, the designer must be able to *get* the client’s requirements and work accordingly.

In Developers:

The candidate must be able to write W3C valid, table-less xHTML and CSS mark up. The candidate should be able to write xHTML code using both Strict and Transitional mark up. Additional requirements for developers are strong programming skills in PHP and knowledge of popular Content Management Systems (CMS) like WordPress, Joomla, Drupal, PostNuke, Magento and OSCommerce. The candidate should be able to work efficiently in strict time constraints and in accordance with the guidelines from clients.

Branding with your Web Presence

Over the past few years, Internet has evolved as a gigantic bazaar. Everybody here has some sort of business, whether it’s big or small. Be it buying or selling goods or services, or merely sharing information/knowledge, everybody is into marketing something. It’s not just another lounge it’s much more than a silicon city. In pursuance of his or her business, everyone works under the umbrella called Brand. I’m sure the term brand doesn’t sound alien to you. Unless you’ve been hiding under a rock, you would have at least had a single encounter with a brand in your lifetime. Simply put, a brand is a specific name, symbol, logo, design, or a combination just like a stamp, a trademark or in our case, a website.

In spite of this, what makes it so special is what it carries as companion. It is not merely the name of the business or solitary behind a brand, it is a backpack of promises to the consumer and the sum of its potential experiences and perceptions. These are the main elements that go in the making of a brand and this is what we call Branding. Branding is the process or set of steps undertaken in order to make consumers dream, think, eat, sleep, and most of all, believe in a brand.

So much said, it must be clear that branding is of major significance to any business/solitary, who is involved with making a presence, whether it’s online, or offline. Having a brand is like standing out in the crowd and, what makes a brand outstanding is, its branding techniques. There are numerous branding approaches to choose. However, if you are here to make an online presence, there’s one means that encompass mostly all approaches effectively giving your brand an enormous exposure.

If your guess is a Website, give yourself a tap on your back, you deserve it! That’s right it’s your website that can help you strengthen your brand in all aspects while reaching out to millions and millions of users across the globe. I’m sure you don’t really need an explanation on how can a website help you in branding. Yet, the question that everybody needs to be engrossed in is, why it is so crucial for your business/personal website to be outstanding and what all it needs to be composed of to be counted upon as your brand or you.

Why Should Your Website be Outstanding?

Let me ask you a simple question, why do you have a name or, why does anybody have a name? To be known, called with, or just have an identity. So if your name is your identity, what is your surname? It’s the representation of your society, family, culture and foremost, your parents, your makers, or may be even more. Now how many people do you know, who have their first name John? I bet, a lot, just like, there’s a person, with the name starting or ending with Ram, under every brick, in India. No offense intended, please. Nevertheless, there’s only one John Travolta, the world knows mostly.

Now let’s assume, there happens to be another person who has the exact same name and if the infamous John Travolta appears on a movie, you can tell the difference. Of course, yes! Despite, may we ask, why? Because, he is a brand of his work, his skill, his industry. Similarly, your product may be the same as another company’s/person’s, and so can be your website’s design, content, logo, or even the visual effects, but there’s no guarantee that a user will remember you over your look-alike or competitor, for the simple reason, that your brand failed to mark an impression on his/her mind. Eventually, you end up losing your business.

I hope this clears the ambiguity that websites don’t need a lot of investment as part of your marketing/branding strategy. So, if you’re in the process making a website for yourself/business, I hope you have considered this carefully for your brand. In my upcoming posts, I will try to cover more aspects of branding approaches online.

At last, like I always say, feel free to contact me for any queries or any way that I may be helpful for you.

Is your website compatible with current web standards?

It has been seen that different software applications don’t work on different platforms in a same fashion and this applies to websites more commonly. People use different browsers like Firefox, IE6, IE7, IE8, Safari, Opera and many such as per their convenience. However, the question that boggled the minds of many developers was, Will their website look or work evenly in such browsers? Later, it was proven that developers who relied upon Firefox suddenly found their pages broken in IE6, 7 or other browsers.

One can check their website functionality in different browsers today however it does not guarantee for it to work similarly tomorrow if the code is not xHTML/CSS valid. Generally, different browsers present a website in a different manner. Some browsers show bugs in page, while others may not. It depends upon the competency of a browser and its attribute to reading different scripts in different ways. Microsoft IE6 has been a pain for web-developers however, we cannot overlook the number of users who are still using IE6.

Hence this makes it very important for consumers/businesses, while getting their websites designed or developed, to check the validity of xHTML/CSS and ensure its compatibility with different browsers. Most importantly, keep it updated and maintained with current web standards. Today we have software available to convert an image file or a screen-shot into HTML/CSS code by slicing techniques, which makes it difficult for consumers and other developers to understand that code and reduces its maintenance ability. Thanks to the set standards by W3.org, designers and developers now have a common base to certify their work as most accurate.

This might have left some pondering, what is CSS/xHTML code and what makes it so special. Well, that’s where I come in picture . xHTML/CSS is a code form that has been agreed upon by different designers and developers, globally. Creating websites with clean and clear code is paramount for maintaining and modernizing your websites. Validating code is the simplest way to check whether your website is built in accordance with current web standards or not and many professional web developers are using  markup validation service as a debugging tool to provide better quality.

With the gigantic globalized market online, you would not risk your brand being listed in the Worst-Websites-Of-The-Day. Yet, I am tormented to say that 60% of all the websites are still not validated or up-to-date. I would urge you to have your websites checked for the validation or do it yourself with the following services.

• Validate xHTML
• Validate CSS
• Validate RSS Feed
• Broken Links
• MobileOk Check
  

At last, it goes unsaid I’m always glad to help the community and would love to review your website for free, please leave your website URL in the comments and I will analyze your website as per your business needs and provide you with a consultation of how can you enhance your business through the use to cutting-edge technology and creative design.

I’ve been working on this project off and on for some time however, due to my hectic schedule and projects in hand it had been in one day basket. But I’m glad to have it up and running finally.

CSSTreat.com

I’ve always believed that it’s very important for every business/individual online to have their website featured in such galleries, keeping in mind the enormous compass and exposure. Also we cannot deny the fact that such galleries have proven to work 24/7 for multiple years. Besides this, CSSTreat.com will feature its sponsors, so you can advertise here and get more traffic. Grab your spot now at an Early Bird Price!!

From a customer’s point of view, it’s important for them to know what’s in and visualize what they’re looking for in their website design. In such cases, CSSTreat.com can serve as a catalyst to the creative spirits of web designers. For the Web-designing newbie’s, CSSTreat.com is a one-stop shop to find free links and articles to some great web design blogs and websites.

What’s New?

CSSTreat.com is not just another web gallery, I have added a few more features that would tempt you to be a part of it. Let me explain them in a few pointers:

• The websites and artwork we feature is randomly displayed on the homepage and category pages so this means that your listing is never lost in the archives. This also means,
  You get consistent traffic and appreciation.
• Besides showcasing your artwork you can also submit your RSS Feed URL to link your five most recent blog posts. This means that you get traffic not just on your homepage but to your blog posts as well. It goes unsaid, “More Traffic means More Business“.

I have tried to include as much as I could squeeze in my schedule however, I will keep updating and would love to add more features. I will also love to hear your ideas to enhance your experience and listings on CSSTreat.com

I hope you enjoy your treat!!