Fred Marion http://www.fredmarion.com Coding is fun Tue, 21 May 2013 02:49:46 +0000 en-US hourly 1 http://wordpress.org/?v=3.5.1 Beautiful CSS3/HTML 5 navigation bar http://www.fredmarion.com/beautiful-css3html-5-navigation-bar/ http://www.fredmarion.com/beautiful-css3html-5-navigation-bar/#comments Thu, 09 May 2013 18:46:41 +0000 Fredricky http://www.fredmarion.com/?p=592 … Read more ›]]> Smashing Magazine has a good post on Beautiful and User-Friendly Navigation Menus. I really liked the following example they posted:

So, I decided to take a shot at making similar buttons using CSS and HTML. Here’s the result:

There are two interesting things to note here: 1) I used CSS triangles to generate the carrots underneath the boxes; and 2) I’m using a couple fun CSS3 effects, specifically box shadow and opacity. Here’s the HTML:


<ul class="nav-buttons">
    <li><a href="#">Button 1<span class="arrow-down"></span></a></li>
    <li><a href="#">Button 2<span class="arrow-down"></span></a></li>
    <li><a href="#">Button 3<span class="arrow-down"></span></a></li>
</ul>

And the CSS:


.nav-buttons {
font-size: 19px;
padding-left: 0;
}
.nav-buttons li {
background-color: #40a5ec;
box-shadow: 0 8px 6px -6px black;
color: white;
display: inline-block;
font-family: Century Gothic;
font-weight: bold;
height: 20px;
margin-top: 1em;
opacity: 0.9;
padding: 2em 0 0.5em 0.7em;
}
.nav-buttons li a {
color: white;
display: inline-block;
text-decoration: none;
}
.nav-buttons li:hover {
cursor: pointer;
opacity: 1;
}
.nav-buttons li:hover span.arrow-down {
position: relative;
opacity: 1;
}
.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #40a5ec;
left: -10px;
float: right;
bottom: -26px;
position: relative;
}

One of the things I really like about opacity is it gives you a fast way to add hover effects to buttons. I like setting the button’s normal opacity to 90 percent, then popping it up to 100 percent on hover. It’s subtle, but it does the job. Feel free to use this code and let us know in the comments section below if you have any ideas for making it better… I’ve also posted it to JSFiddle so you can play around with it.

]]> http://www.fredmarion.com/beautiful-css3html-5-navigation-bar/feed/ 0 Nice call-to-action button http://www.fredmarion.com/nice-call-to-action-button/ http://www.fredmarion.com/nice-call-to-action-button/#comments Wed, 08 May 2013 13:39:31 +0000 Fredricky http://www.fredmarion.com/?p=576 … Read more ›]]> Call to action buttons can’t look like every other button on your site, or they’re going to get treated like every other button on your site (i.e. ignored). So, I was Googling around for some inspiration yesterday when I came across HongKiat’s post: 38 “Call To Action” Button Templates That Really Stand Out. Unfortunately, the download link for the button I liked the most was broken! Here’s an example of the button:

CALL TO ACTION Second line

So, I recreated the PSD for the button: http://www.fredmarion.com/wp-content/uploads/2013/05/call-to-action.zip. I also offered up an example of using the button with HTML text (instead of adding the text as a graphic in Photoshop) here: http://jsfiddle.net/nq7ja/3/. To recap:

Here’s the HTML you’ll need to use:

<a href="#" class="call-to-action-btn">
    <span class="top-line">CALL TO ACTION</span>
    <span class="bottom-line">Second line</span>
</a>

And here’s the CSS:

.call-to-action-btn {
    background-image: url('http://s16.postimg.org/be2991ddx/call_to_action_blank.png');
    background-repeat: no-repeat;
    box-shadow: 0 18px 16px -10px black;
    color: white;
    display: block;
    font-family: arial;
    font-size: 1.2em;
    font-style: italic;
    height: 68px;
    opacity: 0.95;
    text-indent: 1em;
    text-decoration: none;
    width: 232px;
}
.top-line {
    display: block;
    font-style: normal;
    padding-top: 0.5em;
}
.bottom-line {
    display: block;
    text-indent: 1em;
}
.call-to-action-btn:hover {
    color: #fff;
    opacity: 1;
}

]]> http://www.fredmarion.com/nice-call-to-action-button/feed/ 0 Fred’s list of the best WordPress plugins for bloggers http://www.fredmarion.com/freds-list-of-the-best-wordpress-plugins-for-bloggers/ http://www.fredmarion.com/freds-list-of-the-best-wordpress-plugins-for-bloggers/#comments Wed, 01 May 2013 00:36:58 +0000 Fredricky http://www.fredmarion.com/?p=567 … Read more ›]]> I’ve spent dozens of hours trying out crappy WordPress plugins. The list below is the product of more than five years of focused WordPress development. These plugins do their jobs, and they do it well:

1) WORDPRESS EMAIL NEWSLETTERS

Wysija Newsletters. Use a WYSIWYG editor to create a beautiful email newsletter, or set up Wysija to automatically send beautiful newsletters on timed intervals or whenever you post new content.

2) WORDPRESS ECOMMERCE

You can’t beat Shopp for ease of implementation with smaller-scale ecommerce sites. I’ve heard it doesn’t scale great if you’re expecting hundreds of orders a day, but it’s perfect for 90 percent of the small family shops out there. Note that Shopp is a paid plugin. It costs $55, but it’s simple, straightforward and very customizable.

3) WORDPRESS BACKUPS

Schedule automatic backups of your WordPress site for free with UpdraftPlus. This is essential if you’re building WordPress sites for clients.

4) WORDPRESS POPUP FOOTER EMAIL SUBSCRIPTIONS

I like how simple Dreamgrow’s Scroll Triggered Box is. As the user scrolls down the page, a box prompting them to sign up for your site’s email newsletter appears. Replace the contents of the box and style it however you’d like. You can even set how often you want the box to appear to visitors.

5) WORDPRESS PRIVATE SITE

Want your WordPress site to be private while you’re fine-tuning its presentation? Jonradio’s Private Site limits access to whoever you want. I used to like Password Protect WordPress, but I’ve noticed it causes issues with a lot of plugins.

6) WORDPRESS TWITTER BOOTSTRAP CSS

If you want to utilize Twitter Bootstrap’s design elements and functionality (like modal popups), WordPress Twitter Bootstrap CSS make it incredible simple.

7) WORDPRESS POLLS

YOP Poll offers very simple polling software for WordPress. Set up your poll and display graphical results publicly or save them for private viewing. The only limitation I know of is limiting users to voting once per poll. YOP Poll is great if that’s not a concern.

8) WORDPRESS FACEBOOK COMMENTS

Great software by Alex Moss that allows your blog readers to comment on your posts with their Facebook logins. No more setting up those annoying WordPress accounts!.

9) WORDPRESS TWITTER FEED EMBEDS

Twitter Feed Pro is a paid plugin ($19.99), but I really like how easy it is to use. There are free alternatives out there if you’re just posting tweets from a single Twitter account. If you want to post tweets from lots of different Twitter accounts, though, Twitter Feed Pro makes it simple. There may be good free alternative out there, but there are literally hundreds of Twitter plugins for WordPress, and I had trouble finding an up-to-date, functional plugin.

]]> http://www.fredmarion.com/freds-list-of-the-best-wordpress-plugins-for-bloggers/feed/ 0 Full list of Major League Baseball (MLB) teams http://www.fredmarion.com/full-list-of-major-league-baseball-mlb-teams/ http://www.fredmarion.com/full-list-of-major-league-baseball-mlb-teams/#comments Fri, 12 Apr 2013 15:33:25 +0000 Fredricky http://www.fredmarion.com/?p=562 … Read more ›]]> Sometimes you need to just copy and paste a list of all the current major league baseball teams (say, for instance, when you’re organizing a 13-run pool, which is what I’m doing). Here’s that list:

Arizona Diamondbacks
Atlanta Braves
Baltimore Orioles
Boston Red Sox
Chicago Cubs
Chicago White Sox
Cincinnati Reds
Cleveland Indians
Colorado Rockies
Detroit Tigers
Houston Astros
Kansas City Royals
Los Angeles Angels of Aneheim
Los Angeles Dodgers
Miami Marlins
Milwaukee Brewers
Minnesota Twins
New York Mets
New York Yankees
Oakland Athletics
Philadelphia Phillies
Pittsburgh Pirates
San Diego Padres
San Francisco Giants
Seattle Mariners
St. Louis Cardinals
Tampa Bay Rays
Texas Rangers
Toronto Blue Jays
Washington Nationals

This is a full list of all 30 of the Major League Baseball (MLB) teams as of 2013.

]]> http://www.fredmarion.com/full-list-of-major-league-baseball-mlb-teams/feed/ 0 How to share photos privately with Picasa http://www.fredmarion.com/how-to-share-photos-privately-with-picasa/ http://www.fredmarion.com/how-to-share-photos-privately-with-picasa/#comments Sun, 17 Mar 2013 16:54:00 +0000 Fredricky http://www.fredmarion.com/?p=531 … Read more ›]]> 1) Download and install Picasa: http://picasa.google.com/

2) Launch Picasa.

3) Choose where you want Picasa to search for pictures. I chose the first option:

4) Choose whether you want Picasa to be your default photo-viewing app (which means it will launch when you click on a photo to view it). I’d recommend selecting the second option: “Don’t use Picasa Photo Viewer”, so you can continue to use the programs you’re already familiar with:

5) Create a new album to store all the photos from an event:

6) Give the event a name, date and description:

Now, that album will show up on the left-hand navigation menu:

7) Click on your folders to find the photos you want to add to the Album, then click and drag those photos onto the new event you’ve created:

In the example above, I’m dragging a photo from the Screen Captures folder to the “San Francisco Event” Album.

8) If you can’t find a folder of photos that’s on your computer, you’ll need to add it to Picasa. Do that by going to File --> Add Folder to Picasa:

Then, locate the folder on the left-hand side of the popup window, and click the “Scan Always” button and hit “OK”:

You should now be able to see that folder in Picasa here:

9) After you’ve added all the photos to the Events folder, you can now privately share that folder. Do so by Clicking on the Event name, then Clicking the Share drop-down and selecting “Enable Sync”:

10) Login with your Google Account:

11) You may get an error message saying your account is not enabled for Google Photos. If that’s the case, click the Yes button to fix the problem:

You will then be prompted to Sign in to Picasa Web Albums:

After you’re signed in, go back to Picasa and click enable sync again (you’ll probably have to login again, too):

12) In the Enable Sync popup, click the “Change Settings” button:

13) Change the “Default Upload Size” to “Original Size” (if you plan to make high-quality prints of the photos), then click OK:

14) Click the Sync button:

15) Now, click the Share Dropdown again and select “Limited: Anyone with the Link”:

16) Click the “View online” link:

17) From your browser, click the “Share” button:

Enter the email address of the person you want to share the album with:

Now, the person who gets the email from you can download all the photos you’ve put in your events folder.

That’s it! If you have any questions, please feel free to use the comment form below, and I’ll try my best to answer them.

]]> http://www.fredmarion.com/how-to-share-photos-privately-with-picasa/feed/ 0 How to use Bracketpress for WordPress (for free) http://www.fredmarion.com/how-to-use-bracketpress-for-wordpress-for-free/ http://www.fredmarion.com/how-to-use-bracketpress-for-wordpress-for-free/#comments Sat, 16 Mar 2013 04:23:26 +0000 Fredricky http://www.fredmarion.com/?p=482 … Read more ›]]> article.post img { border: 2px solid #333; }

Bracketpress makes it simple to run your own NCAA bracket contest on your WordPress site. Here are the steps to get it up and running.

1) Install and activate the Bracketpress Plugin: http://wordpress.org/extend/plugins/bracketpress/

2) Install and activate the BracketPress Login/Register Widget: http://wordpress.org/extend/plugins/bracketpress-login-and-registration-widget/. NOTE: This step is optional. You could use a different login process, but the widget makes things easier as you’ll see below.

3) Upon installation, Bracketpress creates two unpublished blog pages. Navigate to your Pages and publish both of the drafts. They’ll be titled: “My Brackets” and “BracketPress Leaderboard”:

Change both posts from Draft to Published.

4) Flush your permalinks to make sure your brackets will show up after you published them (this is required because the plugin creates a new post type for brackets). Do this by going to Settings --> Permalinks, and clicking “Save Changes.” You don’t actually have to change anything, just clicking “Save Changes” flushes your permalinks:

5) Upon installation, the BracketPress Login plugin creates a new widget type that you’ll need to add to your site’s sidebar. Do this by going to Appearance --> Widgets and dragging the Bracket Widget into your sidebar, then saving the changes:

6) Enter data for the brackets by hand (if the tournament draw hasn’t been done yet, you can enter dummy data or last year’s data). Do this by going to Brackets --> Team Data and entering the Team, Conference, Region and Seeds:

7) Create a login for a user. Do this by going to Users --> And New, and typing in the required information. Set the user’s Role to Subscriber:

8) Visit your site’s Bracket page. This will the URL of the WordPress page you published that’s called “My Brackets”. When I was testing the plugin, that page was http://www.fredmarion/my-brackets/. Once you’re there, login using the subscriber account that you set up in Step 7:

9) Now, that user will be able to view and edit their bracket:

10) To update the scores for each round, you’re going to need to manually update the master bracket. Do this by going to Brackets --> Master Bracket --> View:

When you’re viewing that page, click the “Edit Bracket” button and enter the game data. If you’re testing, you can click the “Randomize” button to fill out the form with random guesses.

11) Process your scores. The plugin compares the brackets of everyone who plays against the “Master Bracket” to determine the scores each round. To process the scores, you first fill in the Master Bracket (as noted in Step 10), then you need to process the scores. Do that by going to Brackets --> Settings and Scoring. There, scroll to the very bottom of the page and hit the Process Scoring button.

If you run into any problems with this step, it’s probably because your master bracket Page ID isn’t correct. Make sure the Page ID for your Master Bracket matches the Page ID listed under Brackets --> Settings and Scoring:

Unsure what your page ID is? This post can help.

12) View the leaderboard. After you’ve processed your scores, you can point everyone to the leaderboard page that you set up in Step 3. There, they can see how they’re doing in the competition.

Best of luck getting your bracket up and running. Many props go out to the BracketPress team for creating a stellar app!

Alternative titles: