Hide Bootstrap nav on click: Meteor

Seen a few comments about the version of Bootstrap commonly used by Meteor developments, the menu toggle doesnt close when a user clicks on a link.

 

The solution below is added to the JavaScript associated with whatever the template for the nav-bar is called. When a user clicks anywhere, the nab-bar collapse is hidden.

 

Just makes the UI better.

Template.nav.events({
‘click .addInterest’:function(){
//$(".create-pattern-box").css(‘visibility’, ‘visible’);
$(".create-pattern-box").removeClass("hidden");
},
‘click’:function(){
$(".navbar-collapse").collapse(‘hide’);
}
})

 

 

 

Custom CSS for loginbuttons from accounts-ui Meteor package

Using MeteorJS, it is really easy to just add a simple login accounts system using packages. The problem arises when we try to customise the CSS to our will. Some complex solutions can be found olnine, but I found it easier to just right-click and “inspect” the CSS from web developer tools in Chromium Browser.

 

Below is the CSS I used to customise loginbuttons, just copy and paste this into your own apps style sheet and change as you see fit.

#login-buttons .login-close-text, #login-buttons .additional-link{
  color: #000;
  text-transform: lowercase;
  font-family: 'Source Code Pro';
}

#login-buttons .login-link-text, .accounts-dialog label, .accounts-dialog .title{
    text-transform: lowercase;
    font-family: 'Source Code Pro';
}

#login-buttons .login-button, .accounts-dialog .login-button{
    color: #000;
    background: #c9cacc;
    border: 1px solid #c9cacc;
    border-radius: 4px;
    text-transform: lowercase;
}

Why We Love Using AMPPS to Install WordPress on Our Local PC And Other Applications

Studying web development in college, we used to argue over which was better way to install WordPress on our local computer. WAMP and XAMP were at the time the more popular options at the time. Sometimes using these servers can cause a lot of pain and heartache for hours trying to everything to work. Now I have come across AMPPS as the best solution installing a local server for either testing out WordPress developments or other CMS for music, gaming, social networking or e-commerce.

 

Click here to download AMPPS.

 

Using AMPPPS is straight forward one click install for everything.

 

WordPress in AMPPS

 

However some tricky problems may arise. It possible to get error while you are trying to run Apache such as:

Apache port 80: is being used by another application.

 

First option is to panic, second option use try workout what other process or service is using the same port as Apache. Use to the command prompt to see what is the PID of the program that using the same port.

C:\> netstat -aon

 

It is still possible that you cannot find the source of the problem. It is possible that if you are using Windows that you may have installed Internet Information Services(IIS), which is a curse and a blessing at times. To solve this, we have to go to our control panel, find the administrative tools(which can be a little hidden if you are using Vista), then open IIS Manager. Select “HTTP Response Headers” and then press stop.

 

While AMPPS can have some problems in its installation, it is such a joy to use with the freedom just click and install new software toys to play with.

 

 

Responsive Favcion With Real Favicon Generator

I do not know to express how much this made me happy today. Having a favicon that responsive for all mobile and desktop devices probably should not give me this much of a kick, but it does. Tomorrow Google will start punishing websites that arent not responsive to mobile devices by pushing them drastically down the Google rank. Having a favicon that is ready for different devices, with different pixel sizes, is just one more responsive trick one can do to stay one step ahead of the game. Just another reason why you SEO advisor should be a web developer.

 

But why have a favicon in the first place? As my sister puts it, a favicon just gives your website that extra little professional polish that it needs to stand out in the global market. One many reasons why your small or medium sized business should be using WordPress as its custom management system(CMS) is that it is easy to install plugins to do all these repetitive tasks for you. Setting up responsive favicons is easy, but boring to do and take up an entire day. But with Real Favicon Generator the task is done with in minutes.

 

Real Favicon Generator prepares your favicon for Windows, Mac, Linux, Android, Samsung, iPad and more.

 

Download Plugin.

 

Just go to Appearance in the admin menu and select Favicon.   Select and upload your image, which should be larger than 266px in width and height.  Double check that it works, and all done.

 

Favicon demo