Category Archives: importing

Connect Facebook To Twitter, Connect Twitter To Facebook

There’s 2 frustrating separate processes for this – lemme show you.

First, let’s examine the 2 reasons people use Facebook in the first place:

  1. To replace their MySpace profiles and occasionally talk shit
  2. To connect their business with others and network

These are pretty much the same reasons for getting on Twitter in the first place. But a lot of people realized that using these social media platforms nets you great coverage in terms of exposure. There is added value in a marketing sense. That’s why everyone and their grandmother has a Facebook or Twitter profile these days. Each has a current valuation of just over a billion dollar$ and that’s not by accident!

So big whoop. It’s important to use both for business; I get it. But sometimes, I wanna tweet something and have it show up in my Facebook without tediously having to log into Facebook. Or vice versa. I’m in a rush and don’t have the time.

I just don’t want to necessarily log-in to one account just to post the same shit on the other!

Well, that’s the whole point of this blog post!

  • Can I send a tweet and have it automatically show up on my Facebook wall? Yes.
  • Can I write something in my Facebook wall and have it show up in my Twitter stream? Yes.

The Difference Between a Facebook Profile and a Facebook Page

Simple. The Profile is used for personal stuff, the Page is used for business.

You need to know that the Page is a sort-of attached add-on to the Profile, like an arm or a leg. Neither exists separately.

When I started my FB Page in 2009, it didn’t ask for cumbersome details. I ignored my Page for a whole year, then logged in to find FB asking me to fill in the details of my name and such. Like an idiot, I filled in ONLY my name (I thought it’d go to my Page details) but NO00o! Instead, it began a completely new FB Profile for me! I didn’t want that!

Later, I discovered that if you start a FB Profile that you CANNOT delete it.  Not without taking down your Page with it! Believe me, I tried. Thanks a lot FB.  “”(>_<)””  *jerks

Now, because Facebook consistently changes their rules and regulations, what I just said may not hold water weeks or months from now. This nuisance is subject to change as well, so do take it with a grain of salt.

But you probably know this if you do have a FB already set up.  Question is, do you want to link up your Twitter account to your FB Profile, or FB Page?

Let’s get started.

Why Connecting Facebook And Twitter Seems Complicated

Connecting Twitter to Facebook is a much different process than connecting Facebook to Twitter. Why?

Because connecting Twitter > Facebook only serves to help Twitter users.

And by that same logic, connecting Facebook > Twitter only serves Facebook users. Each corporation offers it’s own unique method. Frustrating, because neither party mentions this annoying reason. (you heard it here 1st folks!)

Q. But SuperMunk, if I connect one to the other, isn’t that all I need?

A. If you connect one to the other, only one RECEIVES info and, AND, only one SENDS info. You want to grant your receiver the ability to also SEND info as well, yes?

So let’s begin the connecting process, shall we?

  1. Log in to http://www.Facebook.com.
  2. Log in to http://www.Twitter.com. (don’t do this from Tweetdeck or other standalone platform)
  3. Keep them both open for this to work

I haven’t tried this from a cell phone or any other device, so I’ve no idea if it’ll work from there. I’d advise against it.

Let’s start off the process by first connecting Twitter > Facebook, shall we?

How To Connect Twitter To Facebook Page or Facebook Profile

Remember – both Twitter and Facebook must be open and you must be logged in to both of them, because they detect one another during the connection process.

  1. We’re connecting the Twitter for Facebook app by Twitter (to post your tweets to Facebook)
  2. Twitter has a Facebook profile. Go to it, I’ll wait…
  3. Underneath Twitter’s app picture, there’s a blue box that says Go To Application – go ahead and click on it
  4. This window below opens. This is where you get to choose to connect either your Facebook Profile or Facebook Page
  5. The green checkmark ensures the synchronization worked. And underneath it, you have the option of disconnecting both.
  6. Even though you want to link to your Page, it seems like only the Profile and Twitter avatars connecting. Don’t worry, it shows your Profile avatar by default because that’s the one your Facebook  username opens when you log in to FB. Remember you get to pick & choose which one to connect to.
  7. Let’s do a TEST TWEET:
  8. Now let’s check our Facebook Wall:
  9. The app should now be listed in Twitter; go to Settings > Connections tab to see it.

How To Connect Facebook To Twitter

To Recap both Twitter and Facebook must be open simultaneously for this to work.

  1. We’re gonna connect theFacebook, by Facebookapp, just so you’re aware of the distinction
  2. Now that you’re logged in Facebook, either go to your Profile or your Page (whichever you wanna connect Twitter to)
  3. At the top of your web browser, type www.facebook.com/twitter and go to that address
  4. The window above opens. For purposes of this exercise, the Utilicon name you see there is for my own business FB Page but you should see your own Page or Profile  name come up in it’s place
  5. Let’s do a TEST RUN:  I’m posting a message onto my Facebook Wall and it should show up in my Twitter profile
  6. Go to your Twitter and check if the message went through:
  7. The app should now be listed in your Facebook. Unfortunately, Facebook has to do things all complicated, so—->
  • From your FB Profile—> Top right-hand corner click Account > Account Settings > Notifications tab > scroll all the way down the screen to until you see Other Applications
  • Make sure Twitter‘s listed in there and the box is checked on

OR,

  • From your FB Page—> Under your Page pic, Edit Page > Applications (listed at the top of the left-hand menu) > scroll all the way down and it’s listed at the bottom of that list there

Remember – this app lets you post anything FROM FB and it shows up in Twitter, not the other way around!

You can edit your apps also if you tire of having your tweets sending over to FB or vice versa. You just find where your apps are listed (like in the FB instructions above) or in Twitter.

To remove the app from Twitter: Log in to Twitter account>  Settings> Connections tab> find the app and Remove it. Done!

This is what your apps list looks like in Twitter! Now lemme know if you have any questions and I’ll answer them in the Comments section. Happy Holidays!

How To Save Pics Images Text Sound Files From the Internet With Evernote

It’s basically a drag n’ drop digital scrapbook/ bulletin-board/ container of stuff. FEAR NOT- I’ll show you step-by-step. It looks like a lot, but it’s super easy!

Evernote is another cloud computing application. That’s not important; what you need to know is how to use it and I’m gonna show you how. Read on—>

Evernote's Home Page

What Does Evernote Do?

Evernote lets you pluck anything off the internet and drag it into your own Evernote app for storage. Hell, you can even edit it there or add little notations to it, like Post-It’s.

What can you save into it Images/ photos/podcasts/links/scans

What else? Make To-Do-Lists right into it/ quick text notes/ draw a quick doodle/import folders into it/ etc.

Can I use it outside my web browser? Yes.

Does it come with a bookmarklet? Yes.

Can I use it in my smartphone? Yes.

Can I use it in my iPad? Yes.

Evernote is FREE for up to 5 gigs of storage space. You wanna store more than that per month, you have to cough up $5 a month for a Premium Account.

Smartphone downloads are also FREE. Awesome!

Evernote also supports these languages:

Language support for Evernote

Evernote’s On the Cloud

Like I said. Evernote’s a cloud app. Meaning that everything gets stored in cyberspace by them. So if you constantly clip on your phone, and that phone gets stolen or dropped in water and dies, the info is still in cyberspace because that’s where it all gets stored.

But that’s only as long as you Sync your new clippings…

Evernote from the web doesn’t have the Sync button; pay attention. Evernote for the computer (standalone) and for mobile all have it. That is because everytime you take a pic of something, or find something on the web that you wanna save to Evernote, the Sync button makes web Evernote understand you added more stuff. So it ‘syncs’ with your mobile or computer to add the new goodies.

So that’s the Sync button mystery explained in laments terms.

I started typing this post some 4 months back. Seems like Evernote added a page for the Sync button in simplified terms:http://www.evernote.com/about/getting_started/#5

Why I Use Evernote

Evernote is a pretty darn good app. Actually, the reason I downloaded it was because my friend bought a condo and since I decided to go move in with him in a few weeks, we’re talking about interior design. So I’ve been dragging & dropping pics of pillows, furniture, interiors into Evernote. You know, to inspire and drive our design tastes.

He lives in NC and I’m in NY so this is where Evernote REALLY helps, since we can’t meet face to face until the move.

Plus, we share it so he can log in and see the same notebooks I’ve been saving to all the scrap images off the internet. He can add and delete any of it’s content, same as I can. It kicks email’s ass because there’s no worry about attachments or accidentally ending up inside a spam folder. It’s simple and right in front of you.

This would’ve been great for us when we entered that design contest 2yrs ago. We kept emailing photos, pictures and drawings of prototypes and we had diff. schedules so checking email was cumbersome.

As a project management tool, this rules!

What Evernote Looks Like

Welcome to the front page of Evernote!

Evernote's front page

You with me so far? Good. Everything I said up to this point sounds like murky yakety-yak, but I’ll show you how easy-squeezy it all is.

Sign Up With Evernote

Evernote takes up this much space on your computer so check your requirements:

Evernote is about 80Mb big

Evernote sign up menu

So that’s the menu where you sign up. (www.evernote.com) Once you do, it’ll create your Evernote account for you. Looks like this:

Welcome to Evernote menu

Evernote on the web. Notice there's no Sync button.

So this menu is your Evernote account which you are using inside Evernote itself. It comes with a little welcome message up there called Welcome to Evernote with a check box.  The message is a brief overview of what you can do in Evernote. If you check the box, it’s selected for whatever action you want to take, including deleting to the Trash bin.

We can leave the message alone for now. What you want to do; now that you’re signed in; is download the standalone version of Evernote. Doing so would be like using Tweetdeck instead of Twitter. We say yes to this.

Download Evernote For the Computer (stand-alone platform)

Go to http://www.evernote.com/about/download/.

This is the download page:

Evernote download

Here is a list of all the gadgets you can download Evernote into (as stated on their website):

For computers
Web clipper
Mac OS X
Windows
For site owners
Site Memory button
For mobile devices
iPhone / iPod Touch
iPad
Android
BlackBerry
Palm Pre / Palm Pixi
Windows Mobile

I use the standalone version for the PC for the same reason I first began using Tweetdeck. I’m more comfortable using the platform side-by-side of my web browser instead of inside it.

Evernote and Firefox side by side

How To Use Evernote

How to use it? Simple.

You ‘Clip’ anything you see off the internet and dump it right into Evernote. Like a sorta scrapbook.

(note that Evernote has folders it calls Notebooks)

So let’s say you already downloaded and installed Evernote. Go ahead and log out of www.Evernote.com and open the installed version, log in.

We are brought again into your Evernote account. Remember the welcome message? Yeah, double-click on it:

Evernote's Web Clipper

What, is a Web Clipper indeed!

Well, it’s the magic button you click on to clip something off the internet so you can dump it into Evernote.

So let’s install it, shall we? Sure. The Web Clipper is located on the Downloads page:

Web Clipper button for Evernote

Evernote for Safari

As the picture above shows, go ahead and click down on that green button I circled in pink, and place it on your bookmarks list in your web browser of choice. (I’m using Safari in this tutorial) And that’s it. There it is, ready to go.

If you’re using Firefox, the Web Clipper page automatically resets itself to detect Firefox and offers a plug-in for it:

Evernote for Firefox

How To Clip Images In Evernote

Let’s try to clip any ol’ image off the internet. I go to a website with a really nice picture of this pink piano:

Image from web to clip into Evernote

So I wanna ‘Clip’ the image. But, how?

Select the image you want, ( I highlited mine) and click on the Clip To Evernote button (that’s what the Web Clipper is, silly!)

Clipping (saving) to Evernote

Aaand BINGO!

Confirmation of clipping to Evernote

Then you click the Done button at the bottom there and that’s it.

Now it shows up inside your Evernote dashboard:

successfull image clipping

Wasn’t that FUN?! Yes! Yes it was!

You want MOAR? You got it!

So I clipped two more images:

Take a moment to study the next image. It’s the middle pic you see above after I double-clicked on it:

saved image inside Evernote

  • You can always return to the website the image came from (even if you don’t remember) by clicking on Go To Source. By scrolling the cursor over it, you see the name of the website you clipped from.
  • Where it says 4 Notes at the top left, that means 4 items are saved into my Evernote account. That’s the Welcome message and 3 images I saved.
  • At the very top you have the option of Invite A Friend to open and see the same content you already saved.

Let’s save something else to Evernote.

How To Save Tweets In Evernote

So if you have Twitter (and who doesn’t?) you can save them too.

Go to www.Evernote.com and sign in.

*PLEASE NOTE*Just because you’re logged into the standalone Evernote doesn’t mean you’re automatically logged into it at their website.

To link your Evernote account with Twitter you must log in first. Then go into Settings> Twitter and link or unlink to your Twitter account.

Evernote Sign In page

Linking Twitter with Evernote

The notification that you’re now linked should appear now.

Evernote Twitter linkup confirmation

And now I sign into my  Twitter account and check for that Evernote tweet:

check your Twitter for Evernote's message

And by clicking on that link, you finally activate your Twitter to Evernote. Done.

From here on, just Direct Message any tweet with @myEN and those tweets get sent to your Evernote account.

Customizing Your Evernote

As you can see below, I can save Twitter replies from my account right into Evernote.

The Basics of Evernote

TAGS: You can apply tags to items same as anything. Makes categorizing easier.

NOTEBOOKS: Your default notebook is labeled with your account’s username. You can add more of your own, or download pre-made notebooks on all kinds of information from Evernote’s library which totally rocks, btw.

ITEMS VIEW LIST: Everything you clip is listed in that middle pane there. When you scroll over it, it shows up large on the right pane there. In this example, I used the Bugatti espresso machines as you can plainly see. The right pane shows you the tag name and the website link it came from. Click the web link and it’ll take you to the website.

SYNC BUTTON: After you finish clipping stuff, clicking the Sync button allows standalone Evernote to update your account at http://www.Evernote.com so it can contain all your new clippings. Works the same way if you clip from your cell phone or wherever.

CURRENT MONTHLY USAGE: This is a meter Evernote uses to keep track of how much space every month your clippings take up. Which is why they offer a paid upgrade for more space.

TRASH: Just check off any notes in your list and click the Trash can on the left window pane. Empty it. Done.

How To Draw In Evernote

Yes, you can draw and doodle in Evernote! Here’s how:

drawing in Evernote

*NOTE* You can use your mouse, but I have a Wacom tablet so I use my pen stylus which is a whole lot easier!

Select the Ink Note icon at the top, and the memopad shows up in the right pane as you can see above. Then select the pencil icon. (pink arrow’s pointing to it)

Those 3 List View buttons will organize your clippings however you want to see them arranged. I click on it and you can see my doodle automatically saved into All Notebooks. This is because I didn’t specify where to save it.

How To Write In Evernote

Apparently, you can also write notes or documents inside Evernote:

Writing in Evernote

How To Upload Folders In Evernote

Yes, you can upload an entire folder into Evernote. But only as long as you still have enough monthly space in your account. (file  size cannot exceed size allotted per month)

For example, here’s my file folder:

Let’s upload. Tools> Import Folders > and find the one you want in the list. If you don’t see what you want, click the Add button and search for it:

Uploading a folder in Evernote

It’s a little confusing to say you can upload a folder, because the folder itself doesn’t get uploaded. It’s the folder’s content that gets into Evernote:

Folder contents uploaded to Evernote

So it worked as you can see. The tattoo images have been imported from the Tat folder.

You see the monthly Current Monthly Usage meter there? It’ll turn red and a pop-up warning window will appear if that folder is too big to import. You can get around this if you shrink down the size of your folder’s contents, such as photos. Or, if you delete some of the files in that folder, that’ll take up less space.

Now there’s two ways you can view each item. In the right window pane, or in a floating window by itself. Neat, huh?

Viewing preferences in Evernote

YOu can even select a note and add notations to it, like so:

Add text to notes in Evernote

And you can change the colors and fonts as well…

Change fonts and colors of text in Evernote

Customizing rules!

How To Email From Evernote

YES, you can email any content inside Evernote to yourself! Yes we can-can!

Select any note (item) in your Evernote account and click the Email icon you see at the top. That easy.

Emailing from Evernote

Again, if you’re extremely close to using up what’s left of your monthly storage, you may not be able to perform the emailing action.

In this example, I was able to send the image to my email account as you can see:

How To Save Sound, Audio Files In Evernote

Let me explain one thing here. You can save the audio files into Evernote, but Evernote cannot web clip the actual sound byte because it’s not like it has a download manager. You cannot use Evernote to do any MP3 downloads.

What you can do is add that download page with the download link as a new item into Evernote. You can even drag n’ drop the actual MP3 into it. (provided you downloaded one)

Like any other web clipping, you just highlight the download link and click the Evernote icon. Usually works; if the website’s formatted weird it may not clip all the content.

I did not have enough space in my Evernote this month, so the MP3 didn’t make it in. It did however, make a link to where it is stored on my computer as you can see above.

I actually love Evernote so much that I made  a second account. So I logged into it and tried the same thing; I have more space in this account:

Warning message in Evernote

The warning message came up again because I’m dangerously close to exceeding the storage limit, however, the info was saved into the note. So I have not only the link to the website for the MP3 but also, the actual MP3. Because I dragged it in there after I downloaded it.

As a bonus, right after dragging the MP3 into my note, my computer automatically starts playing it with whatever default media player you have loaded onto your computer:

Adding an MP3 into a new note in Evernote

Someone wrote this in the Evernote forums about tips for MP3s in Evernote. It’s a quick read and informative.

And if you’re interested, the Dial2D0 app can be found in the Trunk. It offers a FREE and paid version of a software that transcribes your Evernote sound files.

What Is the Trunk Button For?

I’m covering this now because I wanted you to get the hang of Evernote first, before exploring all the add-on doodats. The Trunk button is that second button you see at the top of the menu with the plus sign. It takes you to a page listing  all the apps compatible with Evernote.

Here’s one of them. Did you know that there’s an app for scanning receipts & business cards???

The Shoeboxed.com app for Evernote scans receipts and businesscards

Which Web Browsers Evernote Supports

If you’re using an older version of your web browser, a similar message like this will pop up:

Evernote currently supports these web browsers

Help For Evernote

I think I’ve pretty much covered all the basic functions. My only gripe is that because I have two Evernote accounts, the web clipper automatically signs me in with whichever one I used when I installed the stand-alone Evernote. I have hopes the Evernote people will correct this in the future. I’d really hate to have to keep uninstalling/ reinstalling just to access either account!

Evernote keeps adding features to let you add all kinds of media so keep checking back; I believe video apps may be available now. (check the Trunk section)  Bottom line, Evernote’s amazing as a project management tool. Or for people with ADHD like me. Rowrr!

Check Edit HTML Code with Firebug

Are you an HTML moron like me? Read on!

I don’t have $$$ or TIME to sign up for 3 semesters of courses in HTML, CSS, C +++ (do they still teach that?), PHP, Pearl, Ruby On Rails, and all other shit most of you ain’t ever heard of!

I’m also  NOT a software developer, computer programmer, nor an I.T. geek or anything of the sort. I most certainly DO NOT HAVE TIME TO CODE FROM SCRATCH! I am, an artist. One who spends countless hours on just one drawing. I’d much rather put my focus on that than spend countless hours sitting on my fat ass figuring this crap out.

No smarts/no time to learn/ no time to create or install source code by hand/ no $$$ to hire a professional to edit my webpages. What is a broke-ass moron to do?

Answer: Firebug.

What is Firebug for $200.00? (no really, gimme the money- cuz I’m all gangsta!) (wait, no I’m not)

Firebug is anothe nifty downloadable Firefox extension.

So yes, you can only use Firebug within the Firefox web browser. And I will be using the full version for Firefox as I tell you all about it.

However, you can download Firebug Lite for Internet Explorer, Safari, Opera, or any other web browser.

How Complicated Is It To Use Firebug?

Can you modify your MySpace page? Can you cut & paste embedded codes for things like YouTube videos? Can you change your blog’s template? Do you know where CSS code and HTML starts and ends? If you said yes to any of them, then you will have very little difficulty using Firebug.

Where to get Firebug

Three trustworthy places:

  1. Firebug website
  2. Cnet downloads page and type in Firebug in the search bar; select Mac or Windows to the right of it
  3. Mozilla Firefox Add-Ons page and type Firebug in the search bar

I’m sure you can find it elsewhere but best to go to the source and not some shady spammy website whose servers are outside the country. If you don’t wanna listen to my sage advice, oh well, you’re on your own!

Install Firebug

So! Download it> Save To Computer when it asks you> run an anti-virus check on it’s folder before opening (for good measure) >  install it. Go ahead, I will patiently wait. On the ceramic throne, so TAKE YOUR TIME!

Welcome back! Ok, so now it’s on your Firefox. Good. It should look something like this:

See the Firebug Icon?
See the Firebug Icon?

The Firebug Icon looks like a little cucaracha and it’s placed on the Status Bar (along bottom of browser). In case you don’t have the Status Bar showing, go to the top of your Firefox browser, go into View and select Status Bar. Make sure it’s checked on.

You can also switch it on/ off by clicking on the Firebug icon:

This window shows up when you scroll over Firebug icon
This window shows up when you scroll over Firebug icon

Firebug Menu Options

And guess what? If you right-click over the icon and it will bring up a menu of the following options. (for Mac users: hold down Ctrl button and click) But please take your time and read it through first before jumping the gun…

  • Open Firebug in New Window
  • Clear Console
  • Enable All Panels
  • Disable All Panels
  • Off for All Web Pages
  • On for All Web Pages

This is what that menu looks like:

Things I should mention first before going ahead

Firebug has ‘options on top of options’ and endless features. So I’m gonna tell you what you need and where to look so you don’t get lost in the mix.

Now pay attention, son!

Firebug opens up into two panels that automatically docks itself onto the bottom of your browser’s screen- in this case it’s Firefox. (it’s what I’m using) Some people may not like this option because it splits your screen in two and that could be visually annoying.

You can actually pull off Firebug and let it float anywhere on your desktop by clicking on the red button on the top far right. Here is an example:

How to undock Firebug from Firefox
How to undock Firebug from Firefox

And you click on that red button I circled and voilá! Firebug is floating as it’s own window on your screen. To reset it, click on the Firebug icon twice from the Status Bar.

To Enable Firebug

Now the Firebug icon will be installed but may show up in black & white. To check, go into the browser’s Tools at the top and Firebug should be listed there on dropdown menu. A  B/W icon means that while Firebug is indeed loaded on your computer, that it has not yet been enabled for all the panels.

To enable, right-click on the Firebug icon and select Enable All Panels. After you’re done it should look like this:

The Firebug cucaracha is now in color!

You can choose only one panel too. It’s just preference.

Another thing I should mention is that you can set it so that Firebug doesn’t show up in all pages and just your own. This is because in Firefox, you can have multiple tabs open simultaneoulsy of diff. websites.

Right-click over the icon and select On for All Web Pages or Off for All Web Pages. And that’s it.

What does Firebug look like?

We gotta put it over a website first to try it out. Let’s use Google.com for this exercise. And for those who don’t know, this is what the  Google search engine looks like:

And Google with Firebug activated looks a  little something like this:

See what I mean about ‘docking itself to the bottom’ ? Booyah-shaka.

I don’t want to confuse you but I manually highlited that piece of code. (it turns grey) It doesn’t show up colored on it’s own.

Anyway, let’s survey all the bells & whistles on this thing shall we?

  • Top Navigation Bar: Has all Firebug options (like increasing text size), Inspect Elements icon, Console, HTML, CSS, Script, DOM,  Net and it’s very own search bar
  • Left pane: All source code is displayed here.
  • Righ pane: All the Style and Layout information. So you won’t have to scroll thru all that code jargon just to find the style font or text size, for example. Don’t ask me what DOM is, I have no freaking clue. 😛

What I Use Firebug For

To be honest, the most frequent features I use is the HTML inspector and the Layout to show me sizes & padding.

When I check out other people’s blogs, I sometimes see a cool script and wonder what the name of it is, and where I can grab it? Firebug helps me see the code for it, so sometimes the author’s name is listed in there and I can just look it up.

Before Firebug, I had to look at endless source code to know how to format my own sites (I have a few blogs, not just the SuperMunk). It hurts the eyes to scroll through all that jargon. The more flash/ widgets/ tables/ galleries on your site, the more jargon you will see. It’s especially worse to read when the author of that source code left it looking like a miserable mess.  The kind of HTML/ CSS mess you type up in Notepad in one long consecutive line, or several broken spaces so you can’t figure out what goes where! Frustrating to the hilt 😛

I mentioned before I’m not some I.T. geek, and never took classes for this. I’m also short on time. Honestly, I’d rather be painfully waxing my legs than sitting in front of my screen for several hours reading a big fat mess.

But I do understand the importance of having a fully functioning site with useful scripts, so getting my hands on good code is essential. And not just that, but Firebug helps me see where I screwed up my own code and how it’ll look in a preview before making permanent changes to my own site.  Super helpful tool, it is!

Using Firebug To Make Changes

I will show you how to do this. First, let’s bring up that Google image once again:

The grey code I highlighted  pertains to the Google logo. It’s embedded on as an image file called nav_logo6.png.

As an experiment, we’re gonna mess with this Google’s front page. I am gonna change the blah white background color to a cranberry color.

To change the background color we change the hexachromal values  from white (#ffffff) to our cranberry color.

But SuperMunk, how am I supposed to know what that means? WTH?

Ok you impatient-Ishmael! Pay attention now. In cyberspace, all colors are assigned number values called hexachrome values made up of multiple digits/ letters. The color white happens to be #ffffff , see? We can take shortcuts here because no one in their right mind has these color values memorized. Don’t worry, no one’s gonna judge you!

For my shortcut, I use a helpful website called ColorPicker and it looks a little like this:

And that’s the value we’re going to use. Good ol’ #DD4571 .

So we actually just click on the background value in Firebug. Yes, it lets you change it from there. Just click on it and you’ll see, like so!

From white to cranberry, we change #ffffff to #dd4571 . It’s not case sensitive so don’t worry.

And behold! Here’s how it looks afterwards!

Isn’t that all peaches or what!

Wanna try something else?

How about erasing that Google image? We just have to go into Firebug and delete that grey highlighted code:

For any images on a website, Firebug will display a bite-sized preview of that image along with it’s pixel size. You can see that for this Google image above overlapping the grey code. When you have Firebug activated and you scroll over any websites, elements get automatically highlighted in blue. I scrolled over the Google image and it turned blue as you can see.

So I right-clicked over the code and chose Delete Element, and guess what happened?

Something you need to know is that while you see changes occur in real-time, Firebug itself cannot actually change an actual website’s code. That’s something you need to log into the actual website’s template to do. Firebug can show you previews of changes in real-time you are able to make, but doesn’t keep them.

Don’t get discouraged though! Keep reading and I’ll show you how to get around this❁

Selecting Elements On A Website With Firebug

I refreshed the Google page so it didn’t save the cranberry color and went back to boring ol’ white. It also brought back the image. But we can change it to a chartreuse color! (yellow-greenish) The reason for this, is so you can see the blue outline of the elements stand out as we put our cursor over them.

To be able to select elements:

  1. Click on the Firebug cucaracha icon like the picture above. (the icon on the left-hand side on the Navigation Bar, not the icon on the Status Bar)
  2. Click on the Elements icon. It’s the rectangle with the blue arrow on it. It’s placed to the left of the cucaracha. Ok, I circled it in black, just like in the above picture!
  3. Now you can click on HTML or CSS or anything on the Navigation Bar. Personally I want to see the HTML code so that’s what I selected

See? I passed my cursor over the image and it highlighted in blue. Simultaneously, it’s source code also highlighted in blue as you can see in the left pane of Firebug.

But now, hold the phone…what if this was your site and you messed with it’s look and now you want to actually make permanent changes?

Editing With Firebug

Like I said, Firebug can only show you previews of changes. It can make actual changes for you but not save them. Any changes revert to previous state upon page refresh. Because Firebug works alongside web browsers, not websites. So to say Firebug edits is a sort of misnomer in itself.

So SuperMunk, how the hell am I gonna set my changes now? I just finished tweaking my page for the last hour or so!

Don’t cry! Dry your eyes! For SuperMunk has your solution…☻

All you have to do is export those changes into an editor program, and you can save changes there instead for uploading later to your site.

Such editing programs to use: Notepad, Wordpad, Microsoft Word, or any text editor. Personally I use Notepad ++. It’s freeware, and helpfully sets each line of code in it’s own line space, so you don’t end up with a big fat mess like I mentioned earlier.

So after all your tweaking…

Click on the Firebug icon on the Nav Bar > Open With Editor > Configure Editor.

Now Configure Editor is your only visible option if you haven’t already set which editor to use. So let’s configure right now, shall we?

  • Under Name: You can call it whatever you want. Even some silly sounding gibberish.
  • Under Executable: Click the Browse… button and pick an editing program from your computer.
  • Click the Ok button when you’re done. That’s it. You’re done with that.

Did it work? Let’s find out…

So if I click on Notepad ++ there, it automatically pulls all the source code from whatever website I’m looking at right into my Notepad ++ editor. It will look like this:

And that’s all she wrote! So go ahead and edit what you’ve got now. Save a copy to your computer and upload to your website or blog. Done.

So that’s pretty much it.

I should mention it’s in bad form to just swipe code that someone worked very hard to make from scratch. Some folks give their scripts away; some don’t. Permission sets are usually written into the codes so you will see it in Firebug. Always ask or only use what’s for free. There are ways to find out if someone ripped your code so I suggest you not become an asshat that steals. Remember that everything in cyberspace leaves a trail right back to you. Major search engines can penalize you for this (will talk about it in another post) so I wouldn’t try it for anything other than educational purposes.

Know right now that any template adjustments you will ever make all take their sweet time, but this tutorial I just gave only means to cut that time short for you. Also, even if you’re a N00B, don’t sweat it.  The beauty of it is that you can fuck up all the changes you make, see it in real-time and undo over & over by clicking on the icon. Amazing.

Play with all the features on Firebug all you want. There are video tutorials on YouTube also. Have fun and lemme know how it goes!