Angstrey
  • Home
  • How To
  • Hosting
  • Plugins
  • WordPress
  • Tips
  • Contact me
cms
07 10 2018

How to create a website with CMS?

Christopher Barker How To, Tips, Wordpress CMS

A content management system is a tool that allows you to manage your website and its content from an internal user interface. There are numerous options you can explore when it comes to CMS, and the most popular include WordPress, Drupal, Joomla, and PrestaShop.

They feature open-source, which means you can use them for free. To build a site on these platforms, you will require domain name and web hosting, provider. The advantage of using a self-hosted CMS is that you have full control over design and functionality.

Domain name

Once you have chosen the appropriate CMS for your site, you need to start thinking about your domain name. It should look like this, yourname.com, or something similar. When you have selected domain name, you should choose your intended name dot top-level domain.

Nowadays, there are hundreds of top-level domains which you can opt for, such as .com, .net, .org, .int, .gov, .edu, and .mil. For a majority of websites, your goal should be to get .com whenever possible. Most people imagine website names like this, Google.com or Facebook.com.

Web hosting provides

When you determine the domain name, picking out a reliable hosting service should be one of your top priorities. To a large extent, the functionality and performance of your site will depend on hosting provider. The host makes your website available 24/7, and it’s where your data is stored online.

If you choose wrong web hosting service, it can cause you a lot of problems. Imagine you select mobile provides that has no reception. Your web hosting is a significant piece of a puzzle, and it will help you maintain a successful site. In this case, a reliable provider is a must because your entire business may depend on the web host you select.

The most popular CMS

Based on many polls nowadays, the most popular content management system on the Internet is WordPress. It features over 14 million websites. The next most popular CMS is Drupal with over 2 million sites, while Joomla has 750,000 websites and PrestaShop 220,000 online stores. Each platform can create any kind of website.

Using the WordPress

wpThe platform has two areas, front end, and back end. The front end is what your visitors see when they come to your site. There are also actions that can be completed from the front end, such as commenting and social sharing. You and your visitors can perform these actions together from the front end.

The back end also called the dashboard, allows you to adequately manage your website’s content, functionality, and design. It is only accessible to users who have an account on your site. For this action, you will have to use WordPress username and password.

hosting
07 10 2018

How to choose the right web hosting for your site?

Christopher Barker Hosting, How To, Tips Hosting, How To

Do you know anything about hosting? Do bandwidth and storage space still matter these days? Which type of hosting services should you select? These are just some of the questions that are relevant and require answers. We will guide you through this entire process and help you choose the appropriate web hosting service for your website.

Know the hosting needs

You will never get the right hosting without knowing what you need. So, before we go further, put everything aside and think about your requirements. First of all, what type of site you are building, do you want something usual, do you require Windows applications and so on.

These are just some of the fundamental questions, but they require answers. You should try to imagine your site now and then create a plan 12 months ahead. Don’t just consider what you need now, but also think about future wants or needs.

If you are new to this process, then always start with small, but trusted hosting service. In this case, shared hosting is cheap, easy to maintain and enough for beginners. It lets you focus on building your website, and you don’t have to worry about database maintenance and server security.

Reliability and uptime scores

When you are launching a website, nothing is more important than having a 24/7 operating web host. After all, you will have visitors from different time zones. This is one of the reasons why you need a web host that is reliable and stable.

Even for shared hosting accounts, 99.95% is considered as a norm for network connections. Anything below 99% is unacceptable, and premium accounts often offer 99.99% of better uptimes. There are a couple of ways which can help you obtain web host uptime information. For instance, you read a couple of reviews before you buy a hosting plan.

Alternatively, you can measure web host with server monitoring tools. Many of these tools are free or offer some trial period.

Server upgrading options

There are a lot of shared web hosts that are very powerful these days. Roughly calculated, a shared hosting account should be enough to support WordPress blog that has up to 40,000 monthly visitors. Shared hosting should be fine if you manage to limit your concurrent database connections below 20. On the other hand, if you expect your site to grow over the time, then choose hosting plant that will provide you room to develop.

The-best-way-to-use-headings-on-your-site
07 10 2018

The best way to use headings on your site

Christopher Barker How To, Tips Headings, Website

It is challenging to read a text that has no headings because they should be essential sign points for the readers. With the use of headings, people tend to read the article more carefully than one without them. They can help readers figure out whether or not they want to read the post.

So, here is how can you use headings more effectively and why are they so essential for your SEO.

Headings and text structure

Headings navigate readers through the article; they indicate what paragraph is about and what should people expect from it. Also, the heading may help you get back on track if you get lost in bad writing. Reading on computer or smartphone is difficult, and people get easily distracted and lose track of the story you are trying to tell.

But, with the use of headings, they will stay on track and grasp the message you are trying to deliver. When creating copy for the web, you should write headings that are informative to the readers. Some writers like to tease the audience with headings to get them further into the story.

But, keep in mind that primary purpose of headings should be to make the post more comfortable to read, and the primary focus should be on content.

Headings and SEO

When talking about the SEO, people tend to focus on keywords, and some believe that this action will bring them a higher ranking. If you want to achieve the better result, then only mentioning specific keywords may seem weird. It will just make sense if you are writing about it and presenting your point of view.

You should mention the main topic of your blog or article and then explain the key points. Even though headings aren’t a significant ranking factor, they do affect the SEO. That’s because they help us understand the subject of the article.

The use of headings

headDevelopers often talk about the headings, usually <H1> and <H2>, <H3>, <H4>. To make this clear, H1 is the title of your post, and you should never repeat it in the article. Other headings can be used multiple times, as long as they follow the hierarchal structure.

So, you should use H2 before H3 in one topic. But, you can go back and use H2 again, after you used H3. In this case, you can repeat multiple times H2 throughout the article.

Headings and accessibility

Heading structure is essential for availability, especially for people who read from a screen. Considering that they are in HTML, a screen reader can comprehend the post structure and read all headings out loud. Headings have a substantial visual effect, and people can decide whether or not to read the article.

Also, screen readers tend to scan pages and jump from one section to another. So, in this case, headings are used for navigation as well, and it will increase a chance of people actually reading your article.

How-to-build-a-website-that-customers-will-love
07 10 2018

How to build a website that customers will love?

Christopher Barker Tips How To, Website

While it can be tough to achieve a balance between functionality and design, creating an operational website is well worth the effort. Fortunately, enhancing your client’s experience with your site coincides with improving your bottom line. Many studies have revealed that customers are more affected by design, than content that lies inside. We are going to show you some proven strategies for building a site that clients will love and purchase from it.

Everything important should be obvious

It is not necessary to keep every little thing highlighted, it is essential to create a site that correctly prioritizes critical pages. For you visitors and reads, can be frustrating to browse page after page in search for much-needed information. For instance, think about the last time you visited a restaurant homepage that didn’t have their hours and phone numbers listed, or they were hidden at the bottom of the page.

In this case, you should view your site from a customer’s perspective to avoid clutter and never-ending navigation. Clients like everything highlighted and presented on the front page. If your website points out unnecessary information and hides everything that is relevant, clients will soon lose the interest.

Provide your customers a closure

Humans tend to seek closure, and this rule applies to purchase of new products. According to many polls, customers feel more satisfied with the purchase when they get a sense of closure after the sale is made. This can be in the form of message of you can send them an email to confirm their purchase.

To give your client a sense of closure, make sure that process is completed, and that client is all set. In this case, you will take away all his doubts, and he will return.

The best colors for conversions

codeThere has been a lot of debate over which color is best for conversions. Red, orange, blue, there is never a consensus. The colorability to influence the conversions has far more to do with context, than with color. This phenomenon is known as the Von Restorff effect.

So when you come across specific colors, you should recognize that one color only outperforms the other because it stands out. It is better to establish a visual hierarchy for your website. You can also use “action color” to detonate when the customer clicks the buy button. Make sure to utilize a lot of white color for your background.

Apply the Fitt’s Law

The use of Fitt’s Law in web design might seem a bit complicated when you read mathematical formula. The main idea behind this law is that the larger the object it is and the closer it is to a user’s start point; it will draw more attention.

With the use of Fitt’s Law, you can improve the functionality of your site, by making the commonly used buttons larger than others. You can also boost your calls to action by enlarging the essential elements the more significant and the easiest to access.

jQuery-Font-Resizer-plugin
07 10 2018

jQuery Text Resizer Plugin

Christopher Barker jQuery, Plugins jQuery, Text Resizer Plugin

Introducing jQuery Text Resizer

The Text Resizer plugin attempts to solve one problem: that of resizing text on demand by the user. A lot of us have visited sites, particularly news websites, where the user is given the option to enlarge or decrease the size of the website’s text. This is especially useful for sites where it is expected that older visitors will make use of the site. That being said, of course make sure you’re on a decent web host. If you have any trouble finding a good website hosting providers, have a look at this best web hosting comparison for the USA.

Whether you want to improve the functionality or visibility of your website, then jQuery Text Resizer Plugin is an excellent solution for you. This tool can be fully customized and offer multiple features even for beginners. You can change the font size and adjust it through the entire article, so it saves time.

This is my first jQuery plugin. I’ve never found the need to develop my own because a lot of talented developers have created many wonderful plugins for the awesome jQuery JavaScript framework. Over the past year and half I’ve grown in my appreciation of this technology.

In July of 2009, I was presented with a request to put in place a text resizer for a design one of my coworkers was working on. I was assisting her with converting her design concept to a Web standards design based on HTML and CSS. I thought that placing a text resizer control would be a simple task. In practice, it is. I’ve done it for at least two websites. Those two websites use a DHTML Script developed by Taewook Kang, which can be viewed and downloaded at http://www.dynamicdrive.com/dynamicindex9/textsizer.htm(FYI, don’t bother clicking on the author’s “Homepage” link; it doesn’t work).

I like the script and I believe it is a good one. One feature it lacked was the ability to remember the user’s choice. Therefore, when you resized the text on the site’s homepage and browsed to an inside page, the previously selected font size would be lost and the user would be forced to resize the text again. Not user-friendly. I modified that script when I worked on TheCourier.com so that it would remember the user’s choice by saving it to a cookie. In fact that was a long awaited feature by some users. The modified version works great, but I never made it available for download.

Because I had already invested my time in modifying the TextSizer script by Mr. Kang, there was no point for me to reinvent the wheel. However, the site my coworker and I were working on was using the SuperFish jQuery plugin for the main and sidebar navigation. I decided to look for a jQuery solution.

I was disappointed to find out that there weren’t many options. In fact, I only found one existing plugin at the jQuery plugins directory. I also did a short search on Google. I wasn’t too fond of the existing solutions. I also considered using a style switcher, but that seemed like an overly complex solution. Why in the world should I create 3 or 4 different CSS files for just resizing text?

What I like about Taewook Kang’s TextSizer’s script is that it lets you create a list of available font sizes and then you can either traverse the array of font sizes by using an increase or decrease font size button or by simply invoking a function, passing it the target HTML to resize and the index of the font size stored in the array. Those existing jQuery plugins that I looked at did not do that–or perhaps I didn’t look carefully. I chose to skip Taewook Kang’s script for the sake of writing unobtrusive JavaScript. One guest speaker at the Findlay .Net User’s Group said that it was a “bad practice” to write inline JavaScript in HTML element event attributes and that jQuery helped to separate this. You know who you are. Thanks for inspiring me to improve my coding practices!

My plugin is inspired by Taewook Kang’s TextSizer script but it is a completely new and fresh implementation.

Dependencies

The Text Resizer plugin depends the following components.

  • The awesome jQuery 1.3.2 JavaScript library or later.
  • The jQuery Cookie Plugin: Though it is not required, it is recommended for the sake of improved (and expected) user experience. The Text Resizer plugin checks whether the jQuery Cookie plugin is installed.

Referencing

Reference jQuery, the Cookie and Text Resizer plugins in the HEAD section of your HTML document:

1.<script src=”jquery.js” type=”text/javascript”></script>

2.<script src=”jquery.cookie.js” type=”text/javascript”></script>

3.<script src=”jquery.textresizer.js” type=”text/javascript”></script>

Basic Syntax

The basic syntax for invoking the Text Resizer plugin is as follows. This code segment should appear after the above three script references or wherever you prefer to place your JavaScript, such as before the closing BODY tag:

1.<script type=”text/javascript”>

2.jQuery(document).ready( function() {

3.jQuery( “<resize button selector>” ).textresizer({

4.target: “<element selector>”

5.});

6.});

7.</script>

where:

  • <resize button selector> is a valid jQuery selector pattern. The resize button selector references a list of buttons (which can be <A> tags).
  • <element selector> is a valid jQuery selector pattern that targets the block of text to resize.
  • The .textresizer() method invokes the Text Resizer plugin.

Structuring Resize Buttons

jqThe main idea is to create a list of buttons, each of which the user will click to resize the targeted content in the HTML document. The buttons can be anything. They can be mere <input type=”button” /> elements or the humble anchor tag (<A>). How you organize that list of elements is entirely up to you. All that the Text Resizer plugin cares about is that a list of buttons is required. Here’s an example that uses an unordered list with class “textresizer” enclosed in a DIV element, which uses the ID “textsizer”.

01.<div id=”textsizer”>

02.<p>Font Size:<p>

03.<ul class=”textresizer”>

04.<li><a href=”#nogo”>S</a></li>

05.<li><a href=”#nogo”>M</a></li>

06.<li><a href=”#nogo”>L</a></li>

07.<li><a href=”#nogo”>XL</a></li>

08.</ul>

09.</div>

CSS follows below:

01./**********************************

02.Text Resizer Buttons

03.**********************************/

04.#textsizer

05.{

06.margin-bottom: 6px;

07.}

08.#textsizer p

09.{

10.display: inline;

11.}

12.ul.textresizer

13.{

14.list-style: none;

15.display: inline;

16.margin: 0px;

17.padding: 0px;

18.}

19.ul.textresizer li

20.{

21.display: inline;

22.margin: 0px;

23.margin-right: 5px;

24.padding: 0px;

25.}

27.ul.textresizer a

28.{

29.border: solid 1px #999;

30.padding: 2px 3px;

31.font-weight: bold;

32.text-decoration: none;

33.}

35.ul.textresizer a:hover

36.{

37.background: #e5e5e5;

38.border: solid 1px #cccccc;

40.}

42.ul.textresizer .small-text

43.{

44.font-size: 11px;

45.}

47.ul.textresizer .medium-text

48.{

49.font-size: 13px;

50.}

52.ul.textresizer .large-text

53.{

54.font-size: 15px;

55.}

57.ul.textresizer .larger-text

58.{

59.font-size: 17px;

60.}

62./* Style of active button */

63.ul.textresizer a.textresizer-active

64.{

65.border: solid 1px #2B562B;

66.background: #FFCA6F;

67.color: #000000;

68.}

69./* End of Text Resizer Buttons */

Invoking the Plugin

Assuming the setup illustrated above and that the Text Resizer should targetthe contents of a DIV block with ID “maincontent”, the Text Resizer plugin can now be invoked like this:

1.jQuery(document).ready(function() {

2.jQuery(“#textsizer a”).textresizer({

3.target: “#maincontent”

4.});

5.});

The above jQuery snippet selects all anchor tags (<A> tags) in the HTML block uniquely identified by the “textsizer” ID.  It then attaches a click event handler to each anchor tag for each available text size in successive order and targets the block of HTML with ID #maincontent.

Options

The Text Resizer plugin has the following advanced options. Realistically, I foresee many people using the advanced features more rather than the basic configuration shown above.

Property Description Example
target The target is a valid jQuery selector. This property represents the block of HTML that will be resized by the plugin. The default value is the bodytag, but it is recommended to specify where the resizing should take effect. Defining a specific section in an HTML document allows us to create some interesting text resizers, such as multiple text resizers per page. I’ve never seen that, but I cannot envision how others will use this plugin. /* Targets an element identified by the ID “content” */
target: “#content”or/* Targets paragraph tags in DIV tag with class “content”. */
target: “div.content p”
type Possible values “fontSize”, “css”or “cssClass”.

“fontSize”
Informs the plugin that fixed font sizes (such as px, em %, and pt) will be used. This is the default setting. The default unit is px (pixels). The smallest size is 14px, medium 16px (1em or normal), and it keeps incrementing in intervals of 2 units up to the number of resize buttons. Therefore, if there are 4 resize buttons, there will be 4 different sizes in the following order: 14px, 16px, 18px, and 20px.

“css”
Indicates that CSS style properties will be used to define the exact appearance of the resized text. More will be said later.

“cssClass”
Indicates that CSS class names will be used to define available font sizes. Recommended setting.

See examples below.
sizes This property defines a JavaScript array of font sizes that will be available in the page. The number of elements in the array must be equal or greater than the number of resize buttons in the page. If this condition fails, the plugin will cease its execution. See examples below.
selectedIndex Indicates which font size in the sizes array above should be selected by default when the user visits the page for the first time. This is the zero-based index of an element defined in the sizes array; that is, the first element is 0, the second is 1, the third is 2, and so on. The plugin uses the textresizer-active CSS class for this purpose. See below for an example. /* Applies the font size definition in the third element of the sizes array and decorates its corresponding resize button with the textresizer-activeCSS class. */
selectedIndex: 2

Examples

To make things clearer, here are a few examples of the Text Resizer plugin with each of its type settings. Note the difference in the jQuery selectors for each type below. This is very important if you have multiple instances of the plugin in the same page. I have a link to a live example at the bottom of this page.

type: “fontSize”

This code selects all anchor tags located in the element with ID “textsizer”. It then targets an element with ID of “maincontent”, specifies that the font size type is a list of font sizes and defines the list of possible font sizes in the sizesarray. Note that the type: “fontSize” setting is commented out because it is the default setting.

1.jQuery(document).ready( function() {

2.jQuery( “#textsizer a” ).textresizer({

3.target: “#maincontent”,

4.// type:   “fontSize”,

5.sizes:  [ “.8em”, “1em”, “1.5em”, “2em”, “2.5em” ]

6.});

7.});

type: “cssClass”

The type: “cssClass” option is my recommended setting because you can style both the resize buttons and the target section in the HTML document, albeit it isn’t the default setting. In the example below, we are selecting the anchor tags located in the element marked with the “textsizer” ID. The “textsizer” represents the resizer buttons. We then specify that the text to resize will be located in an HTML block with an ID of “maincontent”. The different font sizes will be defined by four CSS classes (small-text, medium-text, large-text and larger-text)–Note that these CSS class names are not prefixed with a period (.). Since we are using CSS class names, we must use the “cssClass” value of the type setting. Notice that the selectedIndexsetting is used to inform the user that the “medium-text” size is the selected font size.

01.jQuery(document).ready( function() {

02.jQuery( “#textsizer-classnames a” ).textresizer({

03.target: “#maincontent”,

04.type: “cssClass”,

05.sizes: [

06.”small-text”,

07.”medium-text”,

08.”large-text”,

09.”larger-text”

10.],

11.selectedIndex: 1

12.});

13.});

When using the “cssClass” setting, you can then assign the same class names you specified in the sizes array to each resize button, as shown below.

01.<div id=”textsizer-classnames”>

02.<p>Font Size:</p>

03.<ul class=”textresizer”>

04.<li><a href=”#nogo” class=”small-text” title=”Small”>A</a></li>

05.<li><a href=”#nogo” class=”medium-text” title=”Medium”>A</a></li>

06.<li><a href=”#nogo” class=”large-text” title=”Large”>A</a></li>

07.<li><a href=”#nogo” class=”larger-text” title=”Larger”>A</a></li>

08.</ul>

09.</div>

This is why I prefer using this method. You can then define the exact look and feel of each resizer button and the content to resize in your style sheet. Here’s an example:

01.#textsizer-classnames

02.{

03.margin-bottom: 6px;

04.}

05.#textsizer-classnames p

06.{

07.display: inline;

08.}

09.ul.textresizer

10.{

11.list-style: none;

12.display: inline;

13.margin: 0px;

14.padding: 0px;

15.}

16.ul.textresizer li

17.{

18.display: inline;

19.margin: 0px;

20.margin-right: 5px;

21.padding: 0px;

22.}

24.ul.textresizer a

25.{

26.border: solid 1px #999;

27.padding: 2px 3px;

28.font-weight: bold;

29.text-decoration: none;

30.}

32.ul.textresizer a:hover

33.{

34.background: #e5e5e5;

35.border: solid 1px #cccccc;

37.}

39.ul.textresizer .small-text

40.{

41.font-size: 11px;

42.}

44.ul.textresizer .medium-text

45.{

46.font-size: 13px;

47.}

49.ul.textresizer .large-text

50.{

51.font-size: 15px;

52.}

54.ul.textresizer .larger-text

55.{

56.font-size: 17px;

57.}

59.ul.textresizer a.textresizer-active

60.{

61.border: solid 1px #2B562B;

62.background: #FFCA6F;

63.color: #000000;

64.}

66.#maincontent

67.{

68.}

69.#maincontent.small-text

70.{

71.font-size: 11px;

72.}

74.#maincontent.medium-text

75.{

76.font-size: 13px;

77.}

79.#maincontent.large-text

80.{

81.font-size: 15px;

82.}

84.#maincontent.larger-text

85.{

86.font-size: 17px;

87.}

type: “css”

This is an advanced setting for those users who prefer writing up the exact CSS to apply to the resized content. Think of it as an embedded style sheet. In fact, it is an embedded stylesheet.

In my example below I am defining 4 different text sizes:

  1. The first one (Small. Index 0) tells the plugin that the font size will be at 80% of the “normal” font size defined by the HTML document’s stylesheet. I am also telling the text resizer plugin that the color of the small text should be red.
  2. The second one (Medium. Index 1) defines the font size as 100% of the “normal” font size and the color is blue. The selectedIndex option tells the plugin that this is the default setting.
  3. The third option (Large. Index 2)  specifies the font size as 120%. A bit larger than normal. The color is defined as dark green.
  4. Finally, the fourth option denoted by the comment “Larger. Index 3″ specifies that the font size is 140% and that the color of the resized text should be purple.

This example tells the text resizer plugin to attach itself to a list of buttons (anchor tag) in an element marked with the ID “textsizer”. The target, that is the content to resize, is in an HTML block identified with the unique ID “maincontent”.

For more information on how to define CSS properties in JavaScript, visit the jQuery documentation on css( properties ). The syntax defined there is the same I am using here.

01.jQuery(document).ready( function() {

02.jQuery( “#textsizer a” ).textresizer({

03.target: “#maincontent”,

04.type: “css”,

05.sizes: [

06.// Small. Index 0

07.{ “font-size”  : “80%”,

08.”color”      : “red”

09.},

11.// Medium. Index 1

12.{ “font-size”  : “100%”,

13.”color”      : “blue”

14.},

16.// Large. Index 2

17.{ “font-size”  : “120%”,

18.”color”      : “darkgreen”

19.},

21.// Larger. Index 3

22.{ “font-size”  : “140%”,

23.”color”      : “purple”

24.}

25.],

26.selectedIndex: 1

27.});

28.});

Styling the Active Size

The Text Resizer plugin uses the CSS class name .textresizer-active to indicate which button is active. It appends this class name to the button that is clicked on. For example:

CSS:
Assuming that the resize button is in an anchor tag located in an unordered list marked with the class “.textresizer”:

1.ul.textresizer a.textresizer-active

2.{

3.border: solid 1px #2B562B;

4.background: #FFCA6F;

5.color: #000000;

6.}

The HTML then renders as follows, where the active button is the “Large” font size.

01.<div id=”textsizer”>

02.<p>Font Size:</p>

04.<ul class=”textresizer”>

05.<li><a href=”#nogo” class=”small-text” title=”Small”>A</a></li>

06.<li><a href=”#nogo” class=”medium-text”title=”Medium”>A</a></li>

07.<li><a href=”#nogo” class=”large-text textresizer-active”title=”Large”>A</a></li>

08.<li><a href=”#nogo” class=”larger-text”title=”Larger”>A</a></li>

09.</ul>

11.</div>

Live Demonstrations

Now that I have explained the different settings available in the Text Resizer plugin, here are a few live examples:

 

jQuery-Font-Resizer-plugin
07 10 2018

jQuery Font Resizer plugin – review

Christopher Barker jQuery, Plugins, Wordpress jQuery, Resizer plugin, Rewiev

Having a readable and organized page is one of the essentials if you want to have a successful website. People tend to scan pages looking for the most exciting parts. If your post is written in one piece, then it can appear a bit boring, and soon you will lose traffic.

But, some tools can help you enhance the quality of your content, and one of them is jQuery Font Resizer Plugin. It will provide you with three links to change the font-size of your blog, and they can be inserted anywhere on your site.

How does it work?

The jQuery Font Resizer Plugin is a unique solution that can change font sizes and create beautiful, cross-browser and scalable fonts. It works together with your website and integrates everything you already have. The plugin runs numerous calculations based on the font sizes and line heights specified in your stylesheet.

In this case, you should let the jQuery Font Resizer Plugin performs all the work. The default font-size-value of the body element should be set to 10px. When clicking A+, you are moving the value to 11px. All the factors that have relative font-size values will be adjusted to new settings.

The three most important features of jQuery Font Resizer Plugin are increase and a decrease of font size, highlight of specific elements via CSS and you can use jBility with JQueryUI for more toggle options.

How can you use it?

jqueryThe plugin is designed to be user-friendly. When having this plugin in mind, no one requires from you to be an expert. You should find the jQuery Font Resizer Plugin online and just download it. Unzip the file you have downloaded and then upload the extracted data to your site, using the favorite FTP program.

There are a lot of tutorials on the internet that can help you complete the installation process. They all feature codes you can apply to your website.

Plugin options

Considering the multiple revisions, you now have a couple of options available. They are used to modify and change the default behavior of this plugin. Here are some options that might be interesting: topStop, bottomStop, breakPoint and resizeTime.

These features are used like any other jQuery plugin. So it shouldn’t be a problem for people who are already experienced with this type of work.

Support

The plugin has been on the market for a couple of years. All bugs and imperfections have been cleared out, and now you have a perfectly fine tool. For any troubles, you can contact customer support, and they will help you resolve all the issues.

So far, this has been one of the best plugins we have encountered. And if you still have any doubts, trust us, you won’t be sorry. It will facilitate your work, help you keep your pages organized and clean and your readers will enjoy following your content. jQuery Font Resizer plugin is an excellent addition to your blog, it will increase your progress, and help you run a successful website.

conctact-form-7
07 02 2009

Contact Form 7′s “Failed to send your message” error

Christopher Barker How To, Plugins, Tips, Wordpress Contact Form 7, Error, Failed to send your message

UPDATE: March 2, 2011

If you are using custom permalinks and your WordPress site is hosted in a Windows server running IIS 7 or later (Internet Information Services, Microsoft’s Web server), you need a file called Web.config. Keep on reading for details.

UPDATE: August 27, 2009

If your website is being hosted on GoDaddy and you are using WordPress version 2.8.x (2.8.4 being the latest at time of writing) and the latest version of Contact Form 7 (2.0.1 at time of writing), you are probably visiting this blog because you are getting the annoying “failed to send your message” error (with the red border) in your contact form.

I just found out this evening that after upgrading to Contact Form 7 2.0.1 and WordPress 2.8.4, my contact form won’t send e-mails anymore. When I wrote this post back in April 2009, I was using WP version 2.7.1.

This post will help you to finally fix this problem.  I have worked for so long on this solution, and I hope you will manage to fix your issue. It may appear a bit complicated, but follow the direction, and you will solve the problem. It requires a couple of additional installations, but the rest is easy. If you haven’t done so, please install the WP-Mail-SMTP plugin and then read my original article on the issue.

This post is a follow-up article to my post titled “How to Send Email with WordPress from GoDaddy”.

Several visitors to my site have informed me that after trying out my suggestions in the aforementioned post, they are still receiving the following error message:

Failed to send your message. Please try again later or contact administrator by other way.

If you have applied the suggestions found in the “How to Send Email with WordPress from GoDaddy” post and still receive the error message above, please try the following:

  1. Go to Contact Form 7’s settings (Tools -> Contact Form 7 (version 1.x)) or the new “Contact” menu (Contact Form 7 version 2.x)
  2. Make sure that you enter “[your-email]” (without the quotes) in the“From:” field.
    From: field:  Enter the same e-mail address shown in the “From:” line of your WP-Mail-SMTP settings. For example, let’s pretend I am using “[email protected]” in the “From:” line of my WP-Mail-SMTP settings. I must enter the same e-mail address in Contact Form 7′s counterpart. Contact Form 7 will have [your-name] “<[your-email]>”. This won’t work for you.
  3. Very Important: Contact Form 7 will have a field called “Additional headers:”. Enter (literally) “Reply-To: [your-email]“, without the quotes. The [your-email] placeholder is the same field used inthe Contact Form 7′s form. Contact Form 7 will replace it with the e-mail the user supplies in the form. This header will allow you to reply to the sender directly without copying their e-mail address manually by you.
  4. Click the Save button.
  5. Open the Contact Form in your blog and you should finally see the sweet “Your message was sent successfully. Thanks.” green bordered text.

You will notice that the e-mail will take several minutes to arrive in your inbox. Take heart, it will arrive.

The “To:” field is the e-mail address where you would like to receive the results. The value I am using is my personal e-mail account. Also, make sure that you do include the person’s e-mail address in the form’s results so that you are able to have a copy of the person’s e-mail in hand.

I am going to share with you the code I’m using for my website’s contact form. Use it as a starting point. Note that it uses the Really Simple CAPTCHA plug-in for Contact Form 7.

“Form” Section

<p>Your Name:<span class=”required”>*</span><br />

[text* your-name] </p>

 

<p>Your Email:<span class=”required”>*</span><br />

[email* your-email] </p>

 

<p>Subject<br />

[text your-subject] </p>

 

<p>Your Message<span class=”required”>*</span><br />

[textarea* your-message] </p>

 

<p>

[captchac captcha-897 size:m fg:#000000 bg:#ffffcc]

Type in the Above Code<br />

[captchar captcha-897]

</p>

 

<p> </p>

<p>[submit “Send”]</p>

“Mail” Section

  • To: field: The e-mail address that will receive the results. This can be any valid e-mail address, such as your GMail or Hotmail e-mail address. For example, “[email protected]”, without the quotes.
  • From: field: Enter the same e-mail shown in the “From:” line of the WP-Mail-SMTP settings  “[your-email]“, without the quotes. This field has been discussed above.
  • Subject: field: Enter “[your-subject]“, without the quotes.
  • Additional headers: literally type in “Reply-To: [your-email]“, without the quotes. Very important because this will allow you to reply to the person directly!
  • In the Message Body field, copy and paste the following code:

Name: [your-name]

E-mail: [your-email]

 

Message:

[your-message]

When you are done, click the Save button. You should end up with a form similar to mine, located here.

Custom Permalinks

If you are using custom permalinks, make sure that you uploaded the Web.config file requested by WordPress. WordPress should have asked you to create that file when you created custom permalinks. This only applies to Windows-hosted websites. The Web.config file should be located at the root of your website and contain the following code:

<configuration>

<system.webServer>

<rewrite>

<rules>

<rule name=”wordpress” patternSyntax=”Wildcard”>

<match url=”*” />

<conditions>

<add input=”{REQUEST_FILENAME}” matchType=”IsFile” negate=”true” />

<add input=”{REQUEST_FILENAME}” matchType=”IsDirectory” negate=”true” />

</conditions>

<action type=”Rewrite” url=”index.php” />

</rule>

</rules>

</rewrite>

</system.webServer>

</configuration>

contact form 7, email, WordPress

 

delete
04 22 2009

Deleting old IIS log files

Christopher Barker How To, Tips Log Files, Tips

The log files that IIS generates can, over time, consume a significant amount of disk space. Potentially, they can fill up your entire hard drive. To avoid this problem, you can turn off logging entirely. On the other hand, there are alternatives you can use to facilitate this issue:

Enable folder compression

Move the log folder to another system

Delete old log files by script

Delete old records by the IIS Log File Cleaner

In this article, we are going to discuss the third options because it represents the permanent solution.

Deleting old log files by script

There is a feature you can use to control the disk usage. In this case, you can run a script that automatically deletes data older than a certain age. Scheduling this script will keep your disc clean and under control, without ongoing maintenance.

The script will check the age of each log file in every folder, and it will delete all data older than a specific period. You can customize the script based on your needs, by changing the name of the patch folder in line 1 and changing the maximum age by adding the desired values in days in line 2.

How to run a script as a scheduled task?

scriptUsers can automate this entire task of cleaning log files by the script. You can schedule Windows task to start the script periodically, or you can use Windows Task Scheduler to run the script at any moment. Here are a couple of steps which can help you configure and run the script:

You should open Server Manager, click the Tools menu and then open Task Scheduler. In the Actions pane of the Task Scheduler, you will find a dialog box Create Task, click on that option. On the General tab of the Create Task, you should enter the name of the action you want to complete, for instance, Delete Log Files. Make sure to set all security priorities by choosing the user account with enough privileges to run the script.

Click the Triggers tab and then select New. In the New Trigger dialog box Begin the task to On a schedule. For example, you can choose it daily, insert the Start date, of you, can select more advanced options and settings to ensure that Enabled is checked if you are ready to start the schedule and click OK.

The next step is to click the Actions tab and then open New dialog. In the New Action dialog box, choose a value for Action. In your case, you will Strat a program. In Program/script, you should enter cscript and in Add arguments insert the path and name of the script file. To complete action, click OK.

Make sure that the task has been added to the Active Tasks pane and use the right click to select the Run option. Navigate to the folder that verifies that all files you have chosen have been deleted. To complete the action, click End so that status returns to Ready.

How-to-Send-Email-with-WordPress-from-GoDaddy-
04 22 2009

How to Send Email with WordPress from GoDaddy (Windows Hosting)

Christopher Barker E-mail, Hosting, Wordpress Email, GoDaddy, Windows Hosting, WordPress

UPDATE: Monday, July 20, 2009

Several visitors have contacted me to inform me that after applying my suggestions above, they were still receiving the error message with the red border. Please visit this follow-up post for information on how to possibly fix the problem. Please let me know if it worked for you!

Follow-Up Post: Contact Form 7′s “Failed to send your message” Error

UPDATE: August 27, 2009

If your website is being hosted on GoDaddy and you are using WordPress version 2.8.x (2.8.4 being the latest at time of writing) and the latest version of Contact Form 7 (2.0.1 at time of writing), you are probably visiting this blog because you are getting the annoying “failed to send your message” error (with the red border) in your contact form.

I just found out this evening that after upgrading to Contact Form 7 2.0.1 and WordPress 2.8.4, my contact form won’t send e-mails anymore. When I wrote this post back in April 2009, I was using WP version 2.7.1.

Well, I have good news: I have solved the problem. It’s an easy fix and it doesn’t require too much time. I understand this bug has been an issue for many users, but you can solve this problem in a couple of minutes. Please follow the instructions shown below for configuring WP-Mail-SMTP on your GoDaddy-hosted WordPress installation and then continue to the follow-up post above. If you have any questions, don’t hesitate to contact me, if you find my post too confusing.

The Problem

My blog is being hosted at GoDaddy.com on their Windows hosting package and it’s running off of IIS 7. This service supports PHP 5, which allowed me to install WordPress. One requirement I had was the ability to have a contact form. I found Contact Form 7, which appears to be a popular WordPress plug-in. I installed and configured the plug-in, but I wasn’t able to send e-mail through it. I received the following error message:

In short, his solution points to the fact that PHP Mail or SMTP are no longer working after upgrading to a later version of WP. He suggests one of two plug-ins:

  • WP-Mail-SMTP
  • Cimy Swift SMTP

I opted for WP Mail.

I tried his recommendations which are detailed in his blog entry, but they didn’t work for me. Below is what I did for my GoDaddy account.

Solution

  1. solutionCreate a new e-mail account using the GoDaddy mail control panel. If you already are using GoDaddy as your e-mail provider, you don’t need to create a new one.
  2. Install either WP-Mail-SMTP or Cimy Swift SMTP. Since I am not using Cimy Swift SMTP, my instructions apply to WP-Mail-SMTP, but the solution should be fairly similar for Cimy. Then activate the plug-in.
  3. In the WordPress administration console, click “Settings”.
  4. Click the Email link under “Settings” (or the equivalent for Cimy). Enter the following data:
  5. From Email:“[email protected]” (without the quotes). This must be your GoDaddy hosted e-mail account.
  6. From Name:type in either your name or the name of your website. This will make the From line of the e-mail read as “From Name” <[email protected]>.
  7. Mailer: Choose “Send all WordPress emails via SMTP”.Do not choose the “…PHP mail() function…” because it won’t work.
  8. SMTP Host:relay-hosting.secureserver.net (do not use the SMTP server that GoDaddy provided you during your e-mail account sign-up. For the record, that is smtpout.secureserver.net).
  9. SMTP Port:25 (default for most SMTP servers).
  10. Encryption:Choose “No encryption”. (I hope you aren’t sending sensitive data!)
  11. Authentication:Choose “No: Do not use SMTP authentication”.
  12. Click the Update Options You will be taken to the General Settings tab.
  13. Now click the Emaillink again. Scroll down to the bottom of the page and type in a valid e-mail address in the To: box under the “Send a Test Email” section.
  14. Click the Send Test
  15. If you did everything correctly, you should see the following screen:

 

Follow Me

  • rss
  • pinterest
  • tumblr

Recent Posts

  • How to create a website with CMS?
  • How to choose the right web hosting for your site?
  • The best way to use headings on your site
  • How to build a website that customers will love?
  • jQuery Text Resizer Plugin

Latest Pins!

Tumblr

Categories

  • E-mail
  • Hosting
  • How To
  • jQuery
  • Plugins
  • Tips
  • Wordpress

Smashing Magazine

mag

Tags

CMS Contact Form 7 Email Error Failed to send your message GoDaddy Headings Hosting How To jQuery Log Files Resizer plugin Rewiev Text Resizer Plugin Tips Website Windows Hosting WordPress

Diigo

diigo

10 WordPress Blogging Tips

  • SiteMap
  • Privacy
  • Contact me