For years I have been using Firebug to run all sorts of tasks related to web development. One of the key uses was on the design or front end, for I found Firebug to be the best CSS editing tool I could find. I have Dreamweaver and have been using it since the Macromedia days and am currently using CS 5.5, but despite all those years of use, I always found the CSS editing cumbersome. By comparison, the live updating CSS editing coupled with great element selection and recognition within Firebug makes it a far superior choice. So much so, that even Firebug’s one huge flaw, that fact that you cannot SAVE the edits, still did not stop me from using it. I would simply copy & paste every single CSS edit I made. Over the years I would search for a solution, and found some that seemed promising, but they ended up either being not compatible with my settings or I found them too difficult to implement. Then recently I found cssUpdater.

The Fix

cssUpdater is an extension for Firebug that installs through an Adobe AIR application. It fixes the aforementioned problem, making saving changes to your CSS documents through Firebug a breeze. Once it is installed, it needs to be opened as a software program along side your browser. Within the program you create projects and within these projects load up the CSS files you wish to be able to make changes to. the initial release of this extension allowed the user to create many projects and load up as many CSS documents as you needed. Currently with registration you get a beta version which allows you to create one project and load one stylesheet within that project. for my purposes that is just fine. While it would be nice to create and load projects and stylesheets, I find just having one project and changing the CSS document within not so tough, especially with the bitter memories of copying, pasting, saving, Alt + Tabbing, etc. So many lines of CSS…

Another great thing about this tool is that it allows a designer to design within the browser. Before I would make PSD mocks, and when I started development of the code I would simply add my dimensions and best guesses for the majority of the CSS. I would then open the page up in Firefox and incrementally fix the mess.

Installation/Usage

1. Make sure you have Firefox, Firebug for Firefox, and Adobe AIR.
2. Install the Firefox add-on
3. Register at cssUpdater.com in order to receive a registration code, it won’t work without it.
4. After registration, log in and go to the ‘Install now’ tab.
5. Under the Download section is a badge that reads ‘cssUpdater | Install Now’, click it.
6. Save or open the Adobe AIR file and run it, and go through the installation process.
7. After installation, you will be prompted to enter your registration code.
8. Go to Firefox and reload the page your on. Then open Firebug, and you should see a cssUpdater tab. Within that tab, click ‘Test Connection’, you will get a response in the logging window below. If the connection was unsuccessful, try restarting Firefox. If you still do not get a successful connection, make sure your ports are correct.
9. In the cssUpdater window, click Manage Projects and create a new one. Then load a stylesheet into the project. You can also drag and drop CSS documents into the window.
10. Go to Firefox, and change some CSS that is in the document you just loaded into your project in the cssUpdater window.
11. After making a change, hit the ‘Sync now’ button & refresh the page. Your change should be implemented. Go to the cssUpdater window. You will see a message: 1 item synced. There is also an option to undo this sync.

Current Issues

While this is a great time saving solution, it is still very much a project under development. the issues I have spotted are listed as such:

• If the same element is defined in multiple areas, sometimes when syncing cssUpater will grab styles from one declaration and place them under another.
• Some changes that are made in Firebug and then deleted are sometimes still logged, and after syncing and refreshing the page, these deleted declarations and styles reappear. Usually after getting rid of them once more and refreshing solves the problem.
• Sometimes syncs just don’t go through.

The author of the plugin is looking for errors and bugs, so go to the Disqus page to tell him what you think.

Next Phases?

In the future I would like to see this become an extension that lives solely within Firefox so that all the control is done within the browser and it would no longer be necessary to Alt + Tab between windows. The CSS Updater can be minimized to the tray while your working, but it is within this program window that lists all your changes. It’s reassuring seeing all your changes and that they were saved before you refresh or change pages. I think this is where the developer is going though, for there is a cssUpdater tab, but the only information I have ever seen in it are connection test results. There is a button to clear the list of actions, but no changes are ever listed here, for now it seems that these changes will only be logged in the program window outside of the browser.

Another update I would like to see is a simplification of the installation process. Since there is a stand alone application that runs along side your browser you must install both it and the Firebug extension, one from the cssUpdater web site and one from Firefox’s add-on repository.

Currently you are able to undo one step of changes in the cssUpdater window. It would be nice if there was a more complete log of alterations made during the session along with the option to get rid of specific instances.

One last idea would be a keyboard shortcut. There is F12 to bring up Firebug, or Ctrl+C to bring up inspector, and F5 to refresh the page. If cssUpdater could Sync through a keystroke, we’ll be saving even more time, and that’s what it’s all about.

Similar Tools

Other methods of saving CSS within the browser: Backfire, Firediff, Web Developer Toolbar

Backfire: You can find more information on this app here.

Web Developer Toolbar: This would probably be the next best option. the only problem is that it’s CSS editing capabilities are not an add-on to the Firebug extension, so you will end up using both, Firebug to inspect, and then switch back to Web Developer for CSS editing. Also it does not support a type of live syncing. You have to click on a SAVE icon and save the CSS document in Windows Explorer.

Firediff: I have never seen a version of this plugin that is compatible with my current Firefox version.

Examples

How To Install

1. Download the RAR file
2. Open the download, and extract Shadows.atn
3. For Windows users, in the Folder Options, go to the View tab and select ‘Show hidden files, folders, or drives’ and hit Apply. Folder Options can be found in the Control Panel.
4. For Windows 7 & Vista, go to Users/[user name]/AppData/Roaming/Adobe/Adobe Photoshop CS5/Presets/Actions.
   For Windows XP, go to Documents and Settings/[user name]/Application Data/Adobe Photoshop CS5/Presets/Actions.
   For MAC OS, go to Users/[user name]/Library/Application Support/Adobe/Adobe Photoshop CS5/Presets/Actions.
5. Copy Shadows.atn into the Actions folder
6. Open Photoshop or restart it if it is already open.
7. Press F9 to see the ‘Actions Panel’ and the ‘Shadows’ folder of actions. If you do not see the ‘Shadows’ folder of actions, within the Actions panel, click on the top-right drop-down menu and select ‘Load Actions…’. You should be taken to the folder in which we copied the ‘Shadow.atn’ actions file. Double-click it and the ‘Shadows’ actions set is now loaded in your Actions panel.

How To Use The Actions

To give your object one of these shadows, have the desired object selected, and then with your ‘Actions Panel’ open, select the desired shadow. With the shadow action selected, click the ‘Play Selection’ button at the bottom of the actions panel, and the shadow will be produced.

• jquery.min.js – the latest version of jQuery
• rotate.js- the file we use to animate our feed
• tweets.css – the file used to style our feed
• tweets.js – contains the JavaScript used to retrieve our twitter updates
• index.php – a blank PHP or HTML page

How It Works

We will start with a blank PHP page and some basic CSS. Then we will add div elements that will contain our twitter feed. We will connect to a remote JSON page to retrieve user specified status updates, and JavaScript to build the feed. Then we will create a separate JavaScript file to create a rotating  fade-effect using jQuery. Let’s start by creating a new directory on your local server for the project files then create an index.php with the following code within the body:

<body>

    <div class="full-width">

        <div class="container">

            <div class="content">

                <p>
                    Just the good ol' boys, never
                    meanin' no harm. Beats all you've
                    ever saw, been in trouble with
                    the law since the day they was born.
                </p>

            <!-- end .content --></div>

        <!-- end .container --></div>

    <!-- end .full-width --></div>

</body>

Then create and link to a CSS doc for some basic style(includes a CSS reset):

@charset "utf-8";

/************************************************************************/
/************************************************************************/
/************************************************************************/

/* css reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    background-color: transparent;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

a {
text-decoration: none;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* end css reset */

/************************************************************************/
/************************************************************************/
/************************************************************************/

body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #FFFFFF;
    margin: 0;
    padding: 0;
    color: #000;
}

h1, h2, h3, h4, h5, h6, p {
font-family: Tahoma;
font-weight: lighter;
margin-top: 0;
padding-left: 15px;
padding-right: 15px;
}

a:link {
    color: #09c;
    text-decoration: none;
}

a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus {
    text-decoration: none;
    color: #09f;
}

/************************************************************************/

div.full-width {
margin: 0 auto;
width: 960px;
}

/************************************************************************/

.container {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
margin: 0 auto 25px;
position: relative;
top: 100px;
width: 960px;
float: left;
}

/************************************************************************/

.content {
border: 1px solid #FFFFFF;
border-radius: 3px 3px 3px 3px;
float: left;
padding: 30px;
width: 898px;
}

.content h1 {
color: #333333;
font-size: 20px;
text-shadow: 0 1px 0 #FFFFFF;
margin-bottom: 0;
}

.content p.description {
color: #666666;
font-size: 11px;
line-height: 25px;
padding: 5px 45px 25px;
text-shadow: 0 1px 0 #FFFFFF;
}

Then, from our index.php file, we need to reference a few more files. Place these lines as the last to be placed next to the closing body tag:

<!-- jQuery -->
<script src="jquery.min.js"></script>

<!-- rotate tweets -->
<script src="rotate.js"></script>

<!-- get and build the tweets -->
<script src="tweets.js"></script>

<!-- tweets username and count -->
<script src="http://twitter.com/statuses/user_timeline/***username***.json?callback=twitterCallback&amp;count=5" type="text/javascript"></script>

On the last script, which links back to twitter.com to get the tweets, is where you will set the username and the amount of feeds to be retrieved in the form of count=x. The JavaScript file tweets.js then grabs that information and builds our tweets with the data.

Now let’s create the elements that the feed will be placed in. Using the index.php template flow, let’s create another set of div elements with the classes of “container” and “content”. Within the content div, let’s add a div to hold all the elements used for the feed, a title for the feed, and a div to hold the list of feeds:

<div id="tweets">

    <div id="twitter_container">

        <h3> Latest Tweets </h3>

    </div>

</div>

Now, under the title, let’s add the <ul> elements for an unordered list. We are not going to add any <li> elements here, for they are going to be created by our tweets.js file, as they will contain the data we retrieve from the tweets.

<div id="tweets">

    <div id="twitter_container">

        <h3> Latest Tweets </h3>

        <ul id="twitter_update_list">

        </ul>

    </div>

</div>

Now we look at the JavaScript file which will use the parameters we set on the index.php page to create our status updates. Here I’m calling it tweets.js.

 // tweets.js - get the feeds from username set on
// index.php and generate list items with the
// data(status updates, feed date, links) 

function twitterCallback(twitters) {
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)://[^"s<>]*[^.,;'">:s<>)]!])/g, function(url) {
      return '<a href="'+url+'">'+url+'</a>';
    }).replace(/B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<li><span>'+status+'</span> <a style="font-size:65%; color:#999;" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}

function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset() * 60);

  if (delta < 60) {
    return 'less than a minute ago';
  } else if(delta < 120) {
    return 'about a minute ago';
  } else if(delta < (60*60)) {
    return (parseInt(delta / 60)).toString() + ' minutes ago';
  } else if(delta < (120*60)) {
    return 'about an hour ago';
  } else if(delta < (24*60*60)) {
    return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
  } else if(delta < (48*60*60)) {
    return '1 day ago';
  } else {
    return (parseInt(delta / 86400)).toString() + ' days ago';
  }
}

Now we take a look at the jQuery used to rotate the tweets. Essentially it is saying every four seconds set a variable for the current item and the next item(the items are the individual status updates). If we are at the end of the list(the last list-item element), then set the next item as the first list item, so that it goes around and around continuously. After checking the order, fade out the current item and fade in the last.

/* Tweet Scroller */

$('document').ready(function() {

    setInterval("scrollTwt()", 4000);});

    function scrollTwt() {

        var oCurTwt = $('ul#twitter_update_list li.current');
        var oNxtTwt = oCurTwt.next();
        if (oNxtTwt.length == 0)
        oNxtTwt = $('ul#twitter_update_list li:first');

        oCurTwt.fadeOut('fast').removeClass('current');
        oNxtTwt.fadeIn('slow').addClass('current');

    }

Now we need to style the twitter feed. Below are the styles I used for the example. The only vital part is that the list-items in the <ul id=”twitter_update_list”> are positioned absolutely. It is also wise for the fade effect that I am using to give the list-items an opaque background. This is because letters fading in and out over top one another in not a very attractive effect. Since the list-items are sitting one on top of another, using a background color or image helps with our jQuery animation.

@charset "utf-8";
/* CSS Document */

#tweets {
margin: 0 auto;
width: 452px;
}

#tweets h3 {
color: #999999;
font-family: tahoma;
font-weight: lighter;
padding: 0;
text-shadow: 0 1px 0 #FFFFFF;
}

#tweets #twitter_container {}

#tweets ul#twitter_update_list {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
bottom: 10px;
box-shadow: 0 10px 10px -10px #AAAAAA;
font-size: 10px;
height: 40px;
margin: 0 auto;
padding: 10px;
position: relative;
width: 430px;
}

#tweets ul#twitter_update_list li {
position: absolute;
list-style: none;
display: none;
background-color: #FFFFFF;
padding: 5px;
}

#tweets ul#twitter_update_list li.current {
display: block;
}

#tweets p a {
font-size: 10px;
}

#tweets a {}

p.follow {
padding: 0;
}

The WordPress function to display the catagory of a post is

<?php the_category(', '); ?>

This will display all the categories, parent and children. To get the child, we have to load a string with the child after checking if there is in fact a child category.

<?php

     foreach((get_the_category()) as $childcat) {
     if (cat_is_ancestor_of(11, $childcat)) {
     echo $childcat->cat_name;
     }}
?>

HOW IT WORKS: You set the basic parameters for your widget at the ‘twitter/profile widget’ site, download & copy the code for the widget, and add it to the desired location on your site(usually a sidebar). The widget sets styling parameters at the local level while also referencing a JavaScript file that includes two more CSS files. We want to take control by altering the JavaScript file to reference our own customized CSS files, not twitters. This will allow us to do almost anything to the widget we want.

To get this app, go to your twitter account, and on the bottom of the aside or sidebar, there is a link for ‘Widgets‘, go there. This will take you to a site with the options of getting the ‘Tweet Button‘, ‘Widgets‘, & ‘Buttons‘. Select ‘Widgets‘. You can also get to this page by going to http://twitter.com/goodies.

In the ‘Widgets‘ section, select ‘My Website‘, then select ‘Profile Widget‘. The page you come to now shows you an example of the widget given the current settings within the options panel: Settings, Preferences, Appearance, Dimensions. You can edit these settings and see the updated example to the right which gives you a feel for what it will look like on your site. The only settings you really need to focus on are the ‘Preferences‘ because we are going to edit the appearance in more depth once the widget is on our site, even though you can still alter most if not all of the ‘Preference‘ settings once it is on your site. However, you may want to set some of the 5 appearance settings just to give you a base theme from which to work with, either way it is of no consequence. Once you are done editing the settings, on the bottom of the widget editor page, you will see two links, ‘Test Settings‘ & ‘Finish & Grab Code‘. Let’s grad the widget. Below is an example of the code you will see:

<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>

new TWTR.Widget({

version: 2,

type: 'profile',

rpp: 8,

interval: 6000,

width: 250,

height: 300,

theme: {

shell: {

background: '#333333',

color: '#ffffff'

},

tweets: {

background: '#000000',

color: '#ffffff',

links: '#4aed05'

}

},

features: {

scrollbar: false,

loop: false,

live: false,

hashtags: true,

timestamp: true,

avatars: false,

behavior: 'all'

}

}).render().setUser('acpote').start();

</script>

This is very simple code, and you can understand what affects what quite easily. What we are focusing on here is how to style, in detail, our app, so how do we do go beyond the styles given to us? To do this we must capture the CSS documents that are styling our widget and add them to our own server so we can have them modified to our liking. The twitter widget connects to these generic stylings through the JavaScript file referenced in the top of the widget code which you have placed on your site:

<script src="http://widgets.twimg.com/j/2/widget.js"></script>

It is within this JavaScript file that the CSS files we need are referenced, so we are going to have to capture and modify this file as well as the CSS that we need. To do this, simply go to the URL of the file:

http://widgets.twimg.com/j/2/widget.js

Once at the page, save it (Ctrl + S) and store it in a folder within your server. For this example, I am going to store this file in a folder named ‘js’ (for JavaScript). Once you have the file, let’s test it to make sure it works. Go to the page which you have the code for the widget inserted, and change the file path of the JavaScript file to point to your local version. Mine looks like this: <script src=”js/widget.js”></script>

Then go to your localhost or website, and make sure that you have the same results once you refresh the page. If you do, that means that your are still referencing the default twitter styles, only now you are accessing them from your JavaScript file, not Twitter’s. This will give us the control to tell the ‘widget.js’ file where to find the styles we want.

To do this, open up your ‘widget.js’ file in any text editor. What we are looking for in this file are the CSS documents that it references. These files are what gives your widget the majority of it’s appearance, and by getting these files and editing them to our liking, we can create widgets for any site style or preference.

The Twitter ‘widget.js’ file links to two CSS files. To find them, use your editor’s ‘Find’ command (in most programs this will be Ctrl + F), and search for ‘widget.css‘(with no quotations). This will highlight the document that we need to grab, for it is the style for the widget. The file path looks like this:

https://twitter-widgets.s3.amazonaws.com/j/2/widget.css

Now we want to capture this file to our server. Go to the URL and save it, and add it to your server. I saved it within the folder ‘css/twitter/widget.css‘.

If within your ‘Find’ dialouge box, you hit ‘Find Next’, you will get another widget.css file right after the first one. This is just a another copy of the same file, the first file is under an ‘https://’, and the second is under the normal ‘http://’ protocol. For my own use, I simply duplicated the path for the second CSS file.

Now we must tell ‘widget.js‘ file to reference our now localized ‘widget.css‘ file. To do this just change the file path in the widget.js file to’ the desired local CSS file. Mine looks likes this:

{Q.loadStyleSheet("<span style="color: #33cccc;">/css/widget.css</span>",this.widgetEl)}else

{Q.loadStyleSheet("<span style="color: #33cccc;">/css/widget.css</span>",this.widgetEl)

<strong>NOTE</strong>: There should be no line break in the above code.

One is inserted here only for the readability of the site.

Now test the results by going to your localhost, refreshing, and making sure that your widget works and that all the default styles are loaded. If your app is visible and styled, then you can go ahead and start customizing the ‘widget.css’ file to your liking. If you see the app but the styles are not coming into play, check your file paths.

If you do not feel like retrieving these two files yourself, here they are. Just download this .rar and extract them to the desired positions on your site.

TIPS: Do not forget about the inline styles that exist on the page of the widget itself. These are easy to set, but also easy to forget about.

rousseau.acpote.com