aristath
Supreme Deity
WPMU DEV Staff
Lifetime member
Support Hamster Likes (0)
I was asked to add colorful bars indicating the order status in the orders administration page.
So here's how it's done:
in marketpress.php, change line 1728 from
?><a class="mp_order_status" href="edit.php?post_type=product&page=marketpress-orders&order_id=<?php echo $post->ID; ?>" title="<?php echo __('View Order Details', 'mp'); ?>"><?php echo $text ?></a><?php
to
?><a class="mp_order_status" href="edit.php?post_type=product&page=marketpress-orders&order_id=<?php echo $post->ID; ?>" title="<?php echo __('View Order Details', 'mp'); ?>"><?php echo $text ?></a><div class="bar"><div class= "<?php echo $post->post_status ?>"</div></div><?php
Then you should go and add somehow some css in there.
I use easyblogging for my clients and have built a custom theme for it so that's where I put my css.
Add the following css (it seems like a lot but it's just to make it prettier)
.mp_orders_status .bar{
width: 100%;
height: 18px;
margin-bottom: 18px;
overflow: hidden;
background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
background-repeat: repeat-x;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.mp_orders_status .bar .order_received,
.mp_orders_status .bar .order_paid,
.mp_orders_status .bar .order_shipped{
width: 20%;
height: 18px;
font-size: 12px;
color: #ffffff;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #5eb95e;
background-image: -moz-linear-gradient(top, #62c462, #57a957);
background-image: -ms-linear-gradient(top, #62c462, #57a957);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
background-image: -webkit-linear-gradient(top, #62c462, #57a957);
background-image: -o-linear-gradient(top, #62c462, #57a957);
background-image: linear-gradient(top, #62c462, #57a957);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: width 0.6s ease;
-moz-transition: width 0.6s ease;
-ms-transition: width 0.6s ease;
-o-transition: width 0.6s ease;
transition: width 0.6s ease;
}
.mp_orders_status .bar .order_paid{
width: 60%;
background-color: #faa732;
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-image: -ms-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(top, #fbb450, #f89406);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
}
.mp_orders_status .bar .order_shipped{
width: 80%;
background-color: #dd514c;
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(top, #ee5f5b, #c43c35);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
}
.widefat tr.status-order_received td a.mp_order_status{background: none;}
.widefat tr.status-order_paid td a.mp_order_status{background: none;}
.widefat tr.status-order_shipped td a.mp_order_status{background: none;}
You can see the end result in the screenshots below. The first one is the way MarketPress intended it to be, the second one is what it becomes like after we apply our changes.

Responses (20)
Support Hamster (joined March 2012) Likes (0)
Oh! I forgot to mention... it's green for received, orange for paid and red for sent. (I forgot the text in the screenshots is in Greek and needs translating.)
Take care, Aris.
Inactive (joined February 2012) Likes (0)
Hey @aristath
That looks sweet. I will ask for this as a feature request so that the class is included in the package.
Thanks for the share :)
Support Hamster (joined March 2012) Likes (0)
I agree, it's really nice!
The css for the progress bars is from here: http://twitter.github.com/bootstrap/components.html#progress
Inactive (joined February 2012) Likes (0)
wow, that page is a heaven. Feels like am in a candy shop. My next project is getting a slice of that :)
Support Hamster (joined March 2012) Likes (0)
yes, bootstrap is really nice!
if you want the whole look, you can use the Roots theme http://www.rootstheme.com/
I'm using it on a MarketPress site and it really rocks!
All you have to do to get the appropriate look is add some classes to you markup. For example to get a link displayed as a button, all you need to do is
<a class="btn">...</a>Support Hamster (joined March 2012) Likes (0)
obviously in my original post my " 's were replaced by "
So Im posting again just in case someone wants to copy-paste it.
P.S. After the update to 2.6.1, it's not line 1728 but line 1723.
Inactive (joined February 2012) Likes (0)
Thanks for that mate, never came across this before :)
Member (joined September 2011) Likes (0)
+1
Put this BAR thing on the latest marketpress plugin
Support Hamster (joined March 2012) Likes (0)
along with lots of other pretty things, I included this "hack" in the boostrap admin theme! http://wordpress.org/extend/plugins/bootstrap-admin/
Inactive (joined February 2012) Likes (0)
Oh, I lo?e this plugin, everything looks so neat and clean. Let me be in touch with Sarah and get this some eyes on. Am not sure if wpmu.org covered this already. Lets see.
Support Hamster (joined March 2012) Likes (0)
@Arun Basil Lal
I'm glad you like it!
Any suggestions are welcome, I'm going to be using this a lot but I only have 2 eyes... so there's a chance I missed something. :)
Inactive (joined February 2012) Likes (0)
Well, I just installed it on two of my test sites already, I am in there most of my day testing themes and stuff for our users. I will let you know if my pair of eyes spot anything.
My clients are gonna love this. Lets see!
Support Hamster (joined March 2012) Likes (0)
Thanks for testing this! :)
Inactive (joined February 2012) Likes (0)
You are a super hero, Thanks for creating such awesome stuff!
Support Hamster (joined March 2012) Likes (0)
The funny thing is that I didn't study anything related to IT... A few years ago I was a sound engineer. :P
Well.... where's there's a will there's a way! :)
Thank you for your kind words and points! It's greatly appreciated...
Inactive (joined February 2012) Likes (0)
Electrical Engineer here, well at least that is what they tried to teach me. And am no where a developer as to which where you are. You know that weird age where you are not cute anymore to be hugged and not dude enough to be treated a guy? That is where I am now ;)
So Mr. Sound Engineer, Have you seen the movie "The Mechanic"? Jason Statham has a very cool looking turntable at his home. Internet wisdom says, this is that one: http://www.techradar.com/reviews/audio-visual/hi-fi-and-audio/turntables/pro-ject-rpm9-1x-acrylic-625885/review
That's like freaking expensive. Got any suggestions for something like that but still wallet-safe?
Not sure if that is your area, thought I would take a shot ;)
Support Hamster (joined March 2012) Likes (0)
yeah, that's freaking expensive...
If you want real sound quality and have a medium budget, I'd suggest any turntable by Dual... They're phenomenal! http://www.dualturntables.com.au/
Support Hamster (joined March 2012) Likes (0)
Of course they're not as cool-looking as the one you posted... but they sure sound nice!!
Inactive (joined February 2012) Likes (0)
Actually I like the way they look. Definitely getting one of these very soon. So, if I can afford it, I really shouldn't be looking for any other brands, right?
Thanks for the same :)
Support Hamster (joined March 2012) Likes (0)
At their price range no... don't look any further. :)
I'm getting one of those too next month... still trying to figure out which one though!
Become a member