2BlueSolutions Developer Blog

Straight-forward Pure CSS Social Icons

2020-03-11T10:31:00.003-07:00

This is a chunk of code I use on a lot of sites. It uses Font Awesome to supply the fonts, but everything else is handled via CSS.

Font Awesome

To start, you'll need a Font Awesome account / link to use to import your font files (which will be used to show the social network icons).

They will provide you with a script link you can put into your header.php, load into your functions.php and/or download locally and link locally...really, it's up to you how you load the script.

The HTML code is just a simple list:

<ul class="social-media-icons">
<li><a class="facebookBtn smGlobalBtn" href="https://www.facebook.com/yoursitehere" target="_blank"></a></li>
<li><a class="linkedinBtn smGlobalBtn" href="https://www.linkedin.com/in/yoursitehere" target="_blank"></a></li>
<li><a class="twitterBtn smGlobalBtn" href="https://twitter.com/yoursitehere" target="_blank"></a></li>
<li><a class="youtubeBtn smGlobalBtn" href="https://www.youtube.com/user/yoursitehere" target="_blank"></a></li>
<li><a class="pinterestBtn smGlobalBtn" href="https://www.pinterest.ca/yoursitehere" target="_blank"></a></li>
<li><a class="instagramBtn smGlobalBtn" href="https://www.instagram.com/yoursitehere" target="_blank"></a></li>
<li><a class="mailBtn smGlobalBtn" href="mailto:youremailaddresshere.com" target="_blank"></a></li>
<li><a class="webBtn smGlobalBtn" href="https://webaddresshere/" target="_blank"></a></li>
</ul>

The CSS

Copy and paste the code below into your style sheet. Colours are in there and can be adjusted as needed.

ul.social-media-icons{

padding-bottom:0;

padding-left:0!important;

}

ul.social-media-icons li{

display:inline-block;

}

.smGlobalBtn { /* global button class */

vertical-align:top;

display: inline-block;

position: relative;

cursor: pointer;

width: 40px;

height: 40px;

padding: 0px;

text-decoration: none;

text-align: center;

color: #06357a;

font-size: 30px;

font-weight: normal;

line-height: 40px;

border-radius: 50%;

-moz-border-radius:50%;

-webkit-border-radius:50%;

margin-left:5px;

margin-right:

transition:all 300ms;

}

.et-fixed-header .contact-info .smGlobalBtn {

width: 25px;

height: 25px;

line-height: 25px;

font-size: 10px;

margin-left:5px;

margin-bottom:0;

}

.facebookBtn, .youtubeBtn, .twitterBtn, .linkedinBtn, .instagramBtn, .pinterestBtn, .mailBtn, .webBtn{

background: #FFF;

}

.facebookBtn:before, .youtubeBtn:before, .twitterBtn:before, .linkedinBtn:before, .instagramBtn:before, .pinterestBtn:before, .mailBtn:before, .webBtn:before{

font-family: "FontAwesome";

color:#06357a;

}

/* facebook button class*/

.facebookBtn:before{ /* use :before to add the relevant icons */

content: "\f09a"; /* add facebook icon */

}

.facebookBtn:hover{

background: #a2daf4;

}

/* youtube button class*/

.youtubeBtn:before{

content: "\f167"; /* add youtube icon */

}

.youtubeBtn:hover{

background: #a2daf4;

}

/* twitter button class*/

.twitterBtn:before{

content: "\f099"; /* add twitter icon */

}

.twitterBtn:hover{

background: #a2daf4;

}

/* linkedin button class*/

.linkedinBtn:before{

content: "\f0e1"; /* add linkedin icon */

}

.linkedinBtn:hover{

background: #a2daf4;

}

/* instagram button class */

.instagramBtn:before{

content: "\f16d"; /* add instagram icon */

}

.instagramBtn:hover{

background: #a2daf4;

}

.pinterestBtn:before{

content: "\f0d2"; /* add pinteresticon */

}

.pinterestBtn:hover{

background: #a2daf4;

}

.mailBtn:before{

content: "\f0e0"; /* add mail icon */

}

.mailBtn:hover{

background: #a2daf4;

}

.webBtn:before{

content: "\f0ac"; /* add web link icon */

}

.webBtn:hover{

background: #a2daf4;

}

Divi Theme - Remove The Projects Menu

2018-08-01T23:57:00.001-07:00

Add this to your functions.php file to remove the projects custom post type from the Wordpress Dashboard. Useful if you don't need it there at all:

function remove_menus(){

remove_menu_page( 'edit.php?post_type=project' ); //Projects

}

add_action( 'admin_menu', 'remove_menus' );

A Very Useful Script For Updating Your Wordpress Database After Migration

2018-08-01T23:55:00.003-07:00

In PHPMyAdmin, you can run this to update the database to it's new destination:

SET @oldsite='http://oldsite.com';
SET @newsite='http://newsite.com';
UPDATE wp_options SET option_value = replace(option_value, @oldsite, @newsite) WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET post_content = replace(post_content, @oldsite, @newsite);
UPDATE wp_links SET link_url = replace(link_url, @oldsite, @newsite);
UPDATE wp_postmeta SET meta_value = replace(meta_value, @oldsite, @newsite);
UPDATE wp_posts SET guid = replace(guid, @oldsite, @newsite);

Don't forget to update the table names to match those in your database.

Failed to load resource: the server responded with a status of 412 - Fix

2018-07-11T12:41:00.000-07:00

Recently, I ran into an issue with a Divi install I was running on a new server. For whatever reason, it suddenly wasn't loading any of the scripts necessary.

I tried rolling back the theme, but that didn't do anything. I then tried re-installing Wordpress, but that didn't fix anything.

A Google search led me to this article - https://wordpress.org/support/topic/failed-to-load-jquery-at-load-scripts-php/

Which led to this extremely quick fix:

Try adding define('CONCATENATE_SCRIPTS', false); to your wp-config.php file just below the define('DB_HOST' line.

After adding that to my wp-config file, everything worked as expected.

Disable on-screen keyboard that appears in Adobe products

2016-02-14T20:11:00.000-08:00

So, I had an issue with Adobe inDesign on my Windows 10 PC. The onscreen keyboard kept popping up whenever I tried to edit text because the program couldn't tell that while I am on a touch screen enabled device, I do not have touch screens nor do I want an onscreen keyboard.

To disable:

Run: services.msc (windows key + R)
Find the service called: Touch Keyboard and Handwriting Panel Service (TabletInputService)
Double click it to open up the Properties dialog
You will want to not just stop the service, but disable it.

Now, I still ran into a problem with the service restarting. To fix this, click on the Recovery tab and change all the failure actions to Take No Action

Divi Theme - Remove pause 'on hover' of the full width slider

2015-03-16T14:34:00.001-07:00

In the Divi theme, open up /js/custom.js

Comment out the following code (around line 144)

if ( settings.slideshow && et_slides_number > 1 ) {
   $et_slider.hover( function() {
       $et_slider.addClass( 'et_slider_hovered' );
       if ( typeof et_slider_timer != 'undefined' ) {
    clearInterval( et_slider_timer );
 }
     }, function() {
 $et_slider.removeClass( 'et_slider_hovered' );
           et_slider_auto_rotate();
 } );
   }

Removing comments from the Wordpress Twenty Fourteen theme

2015-02-09T23:14:00.000-08:00

To permanently remove comments from the Wordpress Twenty Fourteen theme, the file you will want to edit is:

/themes/twentyfourteen/single.php

Within this file, you will find the following code which you can either delete or comment out:

// If comments are open or we have at least one comment, load up the comment template.
 if ( comments_open() || get_comments_number() ) {
  comments_template();
 }

Now, there is also meta info for each content type which will list the number of comments next to the date the post was posted on under the title of each post. You'll like want to remove this reference as well (otherwise, they will all say 0 comments).

To do so, open up the content-.php file in the theme folder. For example, on a site I did this on, I edited the content-image.php file.

Look for the div with the class "entry-meta" and delete the line referencing "comments" within that div. Just cull those lines.

Wordpress Plugin - Lightbox Gallery: Separate Galleries on page

2014-03-06T15:22:00.002-08:00

If you are using the Lightbox Gallery plugin for Wordpress and want to enable it on a "blog roll" type page (where all your posts show up on one page), you will find that the lightbox pop up will actually include all the images on the page when you only want it to include the images from that specific post.

The solution is a quick code change in /wp-content/plugins/lightbox-gallery/lightbox-gallery.php

Search for:

'class' => "'" . $post->ID . "'",

and replace with:

'class' => 'gallery1',

How To Set Default Attachment Display Settings In WordPress

2014-02-14T11:04:00.002-08:00

This is a pretty quick fix.

Add this to your functions.php for your theme and then you can set the default for the image attachment settings

function mytheme_setup() {
 // Set default values for the upload media box
 update_option('image_default_align', 'center' );
 update_option('image_default_link_type', 'media' );
 update_option('image_default_size', 'large' );

}
add_action('after_setup_theme', 'mytheme_setup');

Obviously changing the values to what you want as the default.

Wordpress - Creating Pages On Site Setup

2013-11-19T15:10:00.001-08:00

If you, like me, create a bunch of Wordpress sites and, while building your menu, create all the blank pages for placeholders, then this plugin is for you.

http://wordpress.org/plugins/bulk-page-creator/

The Bulk Page Creator lets you create all your pages on one single page using a little Ajax. It's quite simple and saves you a ton of time.

Heart Shaped Social Icon for Instagram

2013-09-02T09:39:00.001-07:00

A bit of a random post

I grabbed this icon set for a site: Heart Shaped Icons.

Unfortunately, it was missing the Instragam icon, so I made my own:

WP Anything Slider

2013-06-06T15:56:00.000-07:00

I recently added the WP Anything Slider to a Wordpress blog that I was doing development on. The default animation options are scrolls (based on the JQuery Cycle plugin). I wanted to add a fade animation.

Thankfully, it's pretty easy to add fade as an effect. You can add whatever you want from the Jquery Cycle Plugin.

Just edit plugins/cycle-setting.php and search for the options list, duplicate the line with "ScrollDown" on it and then replaced the instances of ScrollDown on that line with Fade...done.

<select id="wpanything_sdirection" name="wpanything_sdirection">
            <option value=""></option>
            <option echo="" if="" php="" scrollleft="" selected="" value="scrollLeft" wpanything_sdirection_x="=">&gt;scrollLeft</option>
            <option echo="" if="" php="" scrollright="" selected="" value="scrollRight" wpanything_sdirection_x="=">&gt;scrollRight</option>
            <option echo="" if="" php="" scrollup="" selected="" value="scrollUp" wpanything_sdirection_x="=">&gt;scrollUp</option>
            <option echo="" if="" php="" scrolldown="" selected="" value="scrollDown" wpanything_sdirection_x="=">&gt;scrollDown</option>
            <option echo="" fade="" if="" php="" selected="" value="fade" wpanything_sdirection_x="=">&gt;Fade</option>
          </select>

Now, when you go to the options page for the plugin, you will be able to select Fade as an animation option.

Fix For Joomla Admin Menu That Stops Working

2013-04-18T20:58:00.002-07:00

A quick fix for those of us who have encountered the top admin menu in Joomla becoming unresponsive. You know, you click, but no sub menu appears? If you check your dev tool of choice (ie. Firebug), you'll most likely see something like this:

$ES is not defined

The issue has to do with mootools.js and how older versions of Joomla handle the rendering of the admin menus. Recently, I ran into this issue when I installed a newer version of mootools so that I could get a lightbox effect on a Joomla Virtuemart store. What I didn't realize at the time was this resulted in the admin menu failing.

The fix, thankfully, is quite easy.

The file is: /administrator/templates/khepri/js/menu.js

The changes are:

Find:
var elements = $ES('li', el);

Replace with:
var adminMenu=el.id;
var elements = $(adminMenu).getElements('li');

Find:

nested = $E('ul', element);

Replace with:
nested = element.getElement('ul');

YiiFramework - Check If User Is Logged In (couponic)

2013-02-08T11:51:00.000-08:00

So, I was doing a bit of customization of a Couponic template where I wanted to add a squeeze box (a future post!), but I first needed to check if a user was logged in or not. I didn't want a logged in user to see the squeeze box so I needed to figure out how the framework checked if a user is logged in. Well, it's pretty simple (I've included a quick and dirty write to the browser console log for quick debugging)

 <?php $isUser = Yii::app()->user->checkAccess('user');
  if(!$isUser){ ?>
   <script>
    console.log("NOT A USER!!!!!!!!!!!!");
   </script>
  <?php }else{ ?>
   <script>
    console.log("IS A USER!!!!!!!!!!!!");
   </script> 
  <?php } ?>

Virtuemart: Different Free Shipping Amount For Different Countries

2013-02-04T13:03:00.002-08:00

How to adapt Virtuemart's Minimum Amount For Free Shipping so it can handle different amounts for different countries:

Now, before we begin, the usual warning: Backup the files you are going to be working with. This is a hack of the global.php file to allow different free shipping amounts for different countries.

The file you'll be working with: /administrator/components/com_virtuemart/global.php

First, in the Virtuemart administration page, go to the Store -> Edit Store page and set the base amount you want to use for 'free shipping'. Usually, this should be the value you set for the most commonly used free amount you want to use (ie. your home country).

Now, open up global.php, and search for:

$vendor_freeshipping = $db->f("vendor_freeshipping");

The example will show how to detect for a country and hard-code in a new value for free-shipping. Ie. The amount set in the VM Admin page will be the base amount for free shipping in Canada. First, I'll show what to do when you want to eliminate free shipping to all countries, but one.

if ($_SESSION['auth']["country"] != "CAN") {
$vendor_freeshipping = "0"; } else { $vendor_freeshipping = $db->f("vendor_freeshipping"); }

So, what happens is the script checks to see what country it is. If it is not Canada, then free shipping is negated (set to zero). If it is Canada, then free shipping is set to whatever is in the VM admin backend.

Now, say you want the USA to have a different value before free shipping applies. This is what that code would look like:

if ($_SESSION['auth']["country"] == "USA") {
$vendor_freeshipping = "75"; } else { $vendor_freeshipping = $db->f("vendor_freeshipping"); }

That's it. Now, in the above example, if the country being shipped to is the USA, then the free shipping minimum is set to $75. Otherwise, it is set to whatever you set in the Virtuemart backend.

How To Run Chrome From Within Notepad++

2013-01-24T21:03:00.001-08:00

If you have recently tried to Run Chrome from within Notepad++ recently, you've probably encountered the same issue I did. Chrome didn't run.

The fix is actually really simple. Open up the Run box in Notepad++ and browse to your installation of Chrome.

ie. C:\Program Files\Google\Chrome\Application\Chrome.exe

Select the file when you find it. Now, the trick is:

Put quotation marks around the path you see in the Run box.
Now, put 1 space after the closing quotation mark.
Type this: $(FULL_CURRENT_PATH)

It'll look something like this:

Click Run. If Chrome opens, click Save and set your hotkey.

How To Downgrade Your Wordpress Installation

2012-12-13T12:12:00.001-08:00

I recently updated one of my Wordpress installations to 3.5 from 3.4.2 and found out that 3.5 really isn't ready for release as it appears to have a slew of problems.

So, what to do? Downgrade back to 3.4.2, obviously. A quick Google search brought up this great article with some good steps to follow: http://etuts.org/manually-downgrade-wordpress/

Here are the steps, with my notes:

Log into the administrative backend of your Wordpress installation and deactivate all your plugins (important)
Create a backup of your site including the database for safety's sake ( or at least download all the files including those in the root directory, especially wp-config.php)
Delete the \wp-admin and \wp-includes folders of your site either with your FTP client or through the backend cPanel of your hosting company. File Manager in cPanel is a lot quicker than through FTP.
Find the Wordpress 3.4.2 (or whatever version you are going to downgrade to) files: http://wordpress.org/download/release-archive/ and unzip locally.
Upload the following to your site

root folder files

May not be necessary, but without doing it, I ran into errors
Remember to re-upload your old wp-config.php file, though, because it has your database settings in it.

/wp-admin
/wp-includes

Log into the administrative backend of your site and it should ask you to Update Your Database. Go for it.

That's it. Most important things to remember are to make a backup of your site, overwrite the files in the root directory (which is what made it work for me) and then re-upload your wp-config.php file from your previous installation.

Drupal Search Not Working - Fix

2012-10-29T16:24:00.001-07:00

Editing or creating a Drupal site where the search form stopped working or never worked in the first place?

Enable 'Search' module in http://sitename.com/?q=admin/module
See ?q=admin/settings/search to see how many items are left to index. If you see that the site says 0% indexed, 177 items to go or something along those lines, run cron.

Run 'cron.php' from your browser like http://www.sitename.com/cron.php

Check ?q=admin/settings/search again to see the status of search module.

That's it.

Something I never thought to do while making the site, so hopefully this post helps someone else out.

Category Sort Plugin For Wordpress

2012-10-19T15:02:00.000-07:00

I was recently using a theme that had a secondary posts section and I wanted to organize the categories of posts independently of each other.

Thankfully, I stumbled across this plugin for Wordpress that is just an all-around great plugin: Category Order and Taxonomy Terms Order.

After installation, it creates a quick little Ajax driven drag and drop category sorter under your posts menu.

.htaccess Redirect

2012-07-27T10:41:00.000-07:00

Previously, I posted a quick .htaccess tip which you can find here: http://2bluesolutions.blogspot.ca/2012/07/apache-modrewrite-all-files-temporarily.html

As an addendum, I have recently discovered this great site: http://htaccessredirect.net/index.php

This site will generate an .htaccess file for you based on a whole bunch of variables you can enter into the form. It's probably not as complex as some of you would need, but those of us making complex .htaccess files don't need this site, right?

It's a great tool for creating fast and simple .htaccess file for handling a bunch of redirections.

http://htaccessredirect.net/index.php

Apache - Mod_Rewrite All Files (Temporarily) To One File

2012-07-10T22:19:00.000-07:00

For example, say you want to put up a coming soon page on a Drupal site and you don't want to edit the "Down for Maintenance" file, you can just quickly alter the .htaccess file.

This example involved a Drupal site where I had FTP access, but not admin access to the installation. So, the quickest option was to whip up a coming soon page, upload the file as index.html and then put up a new .htaccess file (backing up the original).

The .htaccess file should look like this:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule !^/index.html$  /index.html [R=302]

</IfModule>

Specific CSS Based On Orientation

2012-07-03T15:12:00.000-07:00

A quick and easy way to load specific CSS based on the orientation of the viewing device (ie. iPad / iPhone).

Just put the following in your header and create the appropriate stylesheets.

<link href="portrait.css" media="all and (orientation:portrait)" rel="stylesheet"></link>
<link href="landscape.css" media="all and (orientation:landscape)" rel="stylesheet"></link>

Brackets - A Possible Replacement For Notepad++?

2012-07-02T12:27:00.002-07:00

Read an article via Smashing Magazine regarding a new editor called Brackets and decided to give it at try.

Initial reaction is that it is actually a pretty nice editor for Web Developers. It's more of a true IDE than Notepad++ with a nice listing of open files on the left.

So, why use Brackets? Well, I do like the IDE type layout. Though, I do know that there is a file listing component in Notepad++.

I suppose the best that Brackets has to offer now is the live CSS editing. Linked with Google Chrome, Brackets can live update any changes to your CSS files immediately in the Chrome browser. It's pretty nifty to see in action.

Give it a try: Brackets

EZPZ One Click Backup For Wordpress

2012-06-21T09:15:00.001-07:00

I just learned that one of my favourite (well, my only) backup utility for Wordpress isn't in the Wordpress Plugin Repository anymore for some reason unknown even to the author of the utility. For those of you looking for it somewhere, you can find it on his site here: http://ezpzsolutions.net/ocb-wp-plugin/

Or you can find it here: http://2bluesolutions.ca/files/ezpz-one-click-backup-latest.zip

Why do I like this plugin so much? It's simple, easy to install and setup, and even includes a scheduling program that will email you with a direct link to the backup when it has created a new one. Also, it's free which is always a huge plus.

Restoring from a backup is also dirt easy as well. It really reminds me a lot of the Joomla backup tool I use.

Proper Viewport Scaling on iPad and iPhone

2012-05-14T22:05:00.001-07:00

So, this is a little silly and I'm a little embarrassed to say that I've spent far too much of my time on this issue.

I had a multi-page site that wasn't displaying correctly on my iPad. One page would look great, but the next would have the top menu cut off on the right and everything would be slightly zoomed in.

I realized that it was a scaling issue, but for all the experimenting I did with the meta viewport tag, I couldn't get it to work.

Then I thought of something...some pages didn't have as much content as the others. The longer pages were displaying great, it was the pages short on content that weren't. So, I went ahead and set a min-height for each page of 1050px (I figured it had to be a little larger than the 1024px portrait height of an iOS device) and voila, it worked.

All the pages showed correctly. Now, I fully admit that this is most likely a hack that isn't considered the "proper way", but I am absolutely open to suggestions for the proper method of handling this situation.