Uncategorized

Good video on setting up emails in Woo Commerce.

https://www.youtube.com/watch?v=H3ODKXVpllc

Here is a good article on setting up Paypal Sandbox.

https://clickwp.com/blog/woocommerce-paypal-sandbox/

I was getting the error “this-email-address-is-being-protected-from-spambots-you-need-javascript-enabled-to-view-it”.

I disable “email cloaking” in the plugins and that fixed the issue.

In my research I found the article to disable on “In-Motions” website.

https://www.dart-creations.com/joomla/joomla-tips-and-tricks/95-this-email-address-is-being-protected-from-spambots-you-need-javascript-enabled-to-view-it.html

In the comments section a user suggested No-Number or Regular Labs version. I love their other products so I thought I would list it

https://www.regularlabs.com/extensions/emailprotector

I hope this helps some one else out there…

Using Chrome and the “Network” tab we were able to determine page load times. My friend quickly pointed out that I had fonts and CSS that I may not have to load.

We found that we could comment out a few lines in the XML.

Here is the end result:

Font Awesome gets linked in the header:

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

Here is the Chronoforms Code:

<div class=”form-group gcore-form-row” id=”form-row-custom”><div class=”gcore-input gcore-display-table” id=”fin-custom”><p class=”disclaimer_text_home”>Notice: This website presents general information about  and is not intended as legal advice, nor should you consider it as advice. You should not act upon this information without seeking professional counsel. Please keep in mind that merely contacting  by email or otherwise will not establish an attorney-client relationship.  cannot represent you until the firm knows there would not be a conflict of interest and the firm determines that it is otherwise able to accept the engagement. Accordingly, please do not send  any information or documents until a formal attorney-client relationship has been established through an interview with an attorney and you get authorization in the form of an engagement letter from  Any information or documents sent prior to your receipt of an engagement letter cannot be treated as confidences, secrets, or protected information of any nature.</p></div></div>
<div class=”form-group gcore-form-row” id=”form-row-multi-11″><div class=”gcore-subinput-container-wide” id=”fitem-namehome”><div class=”gcore-input pull-left gcore-sub-input gcore-display-table” id=”fin-namehome”><input name=”namehome” id=”namehome” value=”” placeholder=”name…” class=”validate[&#039;required&#039;,&#039;alpha&#039;] form-control A” title=”” style=”border:none;color:#FFF;” data-inputmask=”” data-load-state=”” data-tooltip=”” type=”text” /><i class=”icon-append fa fa-user”></i></div></div>
<div class=”gcore-subinput-container-wide” id=”fitem-emailhome”><div class=”gcore-input pull-left gcore-sub-input gcore-display-table” id=”fin-emailhome”><input name=”emailhome” id=”emailhome” value=”” placeholder=”email…” class=”validate[&#039;required&#039;,&#039;email&#039;] form-control A” title=”” style=”border:none;color:#FFF;” data-inputmask=”” data-load-state=”” data-tooltip=”” type=”text” /><i class=”icon-append fa fa-envelope”></i></div></div>
<div class=”gcore-subinput-container-wide” id=”fitem-subjecthome”><div class=”gcore-input pull-left gcore-sub-input gcore-display-table” id=”fin-subjecthome”><input name=”subjecthome” id=”subjecthome” value=”” placeholder=”subject…” class=”validate[&#039;required&#039;] form-control A” title=”” style=”border:none;color:#FFF;” data-inputmask=”” data-load-state=”” data-tooltip=”” type=”text” /><i class=”icon-append fa fa-tag”></i></div></div></div><div class=”form-group gcore-form-row” id=”form-row-messagehome”><div class=”gcore-input gcore-display-table” id=”fin-messagehome”><textarea name=”messagehome” id=”messagehome” placeholder=”message…” rows=”3″ cols=”40″ class=”validate[&#039;required&#039;] form-control A” title=”” style=”border:none;width: 93% !important;color:#FFF;” data-wysiwyg=”0″ data-load-state=”” data-tooltip=””></textarea><i class=”icon-append textarea fa fa-comment”></i></div></div><div class=”form-group gcore-form-row” id=”form-row-captcha”><div class=”gcore-subinput-container-wide” id=”fitem”>
<div class=”gcore-input pull-left gcore-sub-input gcore-display-table” id=”fin-captchahome”><input placeholder=”enter code…” class=”form-control A” title=”” style=”” type=”text” name=”captcha” id=”captcha” /></div></div>
<div class=”gcore-subinput-container-wide” id=”fitem1″><div class=”gcore-input pull-left gcore-sub-input gcore-display-table” id=”fin-captchahome2″>{captcha_img}</div></div></div><div class=”form-group gcore-form-row” id=”form-row-button4″><div class=”gcore-input gcore-display-table” id=”fin-button4″><input name=”button4″ id=”button4″ type=”submit” value=”Send Message” class=”btn btn-default form-control A” style=”” data-load-state=”” /></div></div>

Here is the added CSS:

/*  Home Page Consultation Form Styles */

#chronoform-free_consultation {
text-align: center;
padding-top: 30px;
}

#form-row-multi-11 {
margin: 0 0 15px 0;
width: 95%;

}

#namehome {
border: none;
float:left;
width: 32%;
background: none;
}

#fin-namehome {

padding: 3px;
margin-right: 20px;
background: #4b4b4b;
border-radius: 4px;
width: 32%;

}

#fin-namehome i {
border-left: #727272 thin solid;
padding: 10px;
margin-left: 10px;
float: right;

}

#ftd-namehome .gcore-line-td {

float:left;

}

#emailhome {
border: none;
float:left;
background: none;
color: #FFF;
}

#fin-emailhome {
border: none;
padding: 3px;
margin-right: 20px;
background: #4b4b4b;
border-radius: 4px;
width: 32%;
}

#fin-emailhome i {
border-left: #727272 thin solid;
padding: 10px;
margin-left: 10px;
float: right;
}

#subjecthome {
border: none;
float:left;
background: none;

}

#fin-subjecthome {
border: none;
padding: 3px;
width: 32%;
background: #4b4b4b;
border-radius: 4px;
}

#fin-subjecthome i {
border-left: #727272 thin solid;
padding: 10px;
margin-left: 10px;
float: right;
}

#messagehome {
border: none;
float:left;
width: 93%;
height: 95px;
background: none;
}

#fin-messagehome {
border: none;
padding: 3px;
width: 95%;
background: #4b4b4b;
border-radius: 4px;
}

#fin-messagehome i {
border-left: #727272 thin solid;
padding: 10px;
margin-left: 10px;
float: right;
}

#captchahome {
border: none;
float:left;
color: #FFF;
background: none;
}

#form-row-captcha {
display: inline-block;
width: 400px;
margin: 0 auto 15px;
}

#fin-captchahome {
border: none;
padding: 3px;
margin-right: 20px;
background: #4b4b4b;
border-radius: 4px;
}

#fin-button4 {
margin: auto;
}

#captcha {
background: none;
border: none;
color: #FFF;
}

#button4 {
background:#2d4f68;
color: #FFF;
border:none;
padding: 10px 80px;
font-size: 18px;
margin-top: 30px;
height: 50px;
}

#button4:hover {
background: #999;

}

#chronoform-free_consultation #fin-custom {
width: 75%;
color: #FFF;
margin: auto;
}

Needed an image to black and white and when the user rolls over the image it returns back the color image. This article below helped me out.

http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/

I hope this helps someone else out there…

In Chrome’s developer tools is was easy to see the width of a browser window. With developer tools open, grab to lower right corner and shrink the window. In the upper-right the size of the window shows up. That makes working with Media Queries so much easier.

I use Firefox so often and wanted the same feature. I found what I needed in firebug and this article helped me.

http://getfirebug.com/layout

In the layout table as you inspect an element it’s size will show in the Layout tab.

I hope this helps someone else out there…