76 comments found

Thanks a lot for the reply. Yeah I hadn’t thought of field value pairs being tabular. If you’re displaying the label on the left and the input on the right then it seems more obvious.

I had a read myself and like you say opinion is divided. I was just curious more than anything as its been a long time since I’ve seen a table used for form fields. I think my mind has been over-trained to think that tables are dirty unless its used for tabular data.

A bit of a grey area :)

The only real downside I can see, is that a table is a little less flexible. For example if you wanted to redesign a site with hundreds of forms, so that the label displays above the inputs, then you would have to rewrite the html.

Anyway this is no criticism of the theme or the HTML , as its one of the best I’ve used on Theme Forest.

themio

Thank you for the kind words :)

As you said it is a bit of a grey area. I agree with tables being a bit inflexible in the regard that you cannot stack them, but I like them since they are just so easy to use and they work painlessly. Since then, we have released another admin theme where we did use divs instead of tables for forms. At the end, it uses more HTML markup, but we managed to make labels display above input just by adding a class (link to demo). Bit of a see-saw really. :)

csaona Purchased

Hi.

While integrating it, I’ve noticed that the theme obliterates the borders of legends, at least when used in forms. I’m afraid the visual effect is not very good, because the legend label is left dangling in the form.

Any chance you update this?

Thanks,

themio

of course! I’ll check it out and let you know ASAP .

themio
Hullo. Try adding these three lines to style.css line 174
fieldset {border-top: 1px solid #ddd}
form table td:first-child {padding-left: 10px}
fieldset legend {font-weight: bold;padding: 5px 10px;}
and making the html structure of your form something like this
<form>
    <legend>Fieldset Title</legend>
    <fieldset>
        <table>
            ...
        </table>
    </fieldset>
</form>
Default-user
csaona Purchased

It works, thanks!

Just a quick question, do you have a PSD for the larger logo that is used in the login area? Or did you blow up the size from the original PSD ?

themio

The larger logo used in the login page was a blown up from the original PSD

For logo with a different dimensions, you can simply select the logo group, and transform it to any size. :)

Congratulations, this is a great job!

This is a great theme.

My question is this . . . I don’t want to use the switcher to change between fixed and fluid. I simply want my pages to be fluid—how do I achieve this?

Thank You,

-David

themio

In the <head>...</head> section of the file, right after

<link href="style/style.css" rel="stylesheet" type="text/css" />

just have

<link href="style/fluid.css" rel="stylesheet" media="screen" type="text/css" />
Or
<link href="style/fixed.css" rel="stylesheet" media="screen" type="text/css" />

instead of both, depending on whether you want fixed or fluid version.

Hope it helps :)

njslater Purchased

Hi!

Quick question, trying to implement tabs on a page while using your template. Whilst trying different aspects of the Clear/Clearfix hacks I keep getting mutated form items (specifically selects).

Tab 1 looks great! http://i367.photobucket.com/albums/oo112/ozziavi80r/ok.png

Tab 3 … Not so great :(

http://i367.photobucket.com/albums/oo112/ozziavi80r/not_ok.png

Any ideas?

Default-user
njslater Purchased

I’ve tried playing around w/ the layout to see if it fixes it, but it’s still breaking the selects… would it be because I’m nesting grid_8 widgets in a grid_16 widget?

<div class="clear"></div>

<div class="grid_16 widget tabs first">
<div class="widget_title clearfix">
<h2>Tables</h2>
<ul>
<li class="active"><a href="#hons">Honours</a></li>
<li><a href="#table2">Organizational</a></li>
<li><a href="#table3">Simple Table</a></li>
</ul>
</div>
<div class="widget_body">            

<div id="hons">

<div class="grid_8 widget first">
<div class="widget_title clearfix">
<h2>Give Award</h2>
</div>

<div class="widget_body" style="min-height: 220px">

<form name="award_decoration" method="post" action="/resources/includes/award_decoration.inc.php">
<table class="simple">
<tr>
<td width="100"><label for="select_award">Select Award</label></td>
<td width="400">
<?php include '/resources/includes/unique_award_select.inc.php' ?>
</td>
</tr>

<?php if ($uniq_numrow?>= 1) { ?>

<tr>
<td width="150"><label for="citation">Enter Citation</label></td>
<td width="400">
<textarea name="citation" rows="6" cols="40" style="resize: none"></textarea>
<input name="pilot_id" value="<?php echo $pilot_id ?>" type="hidden" />                               
</td>
</tr>

<tr>
<td width="150"></td>
<td width="400"><input name="submit" class="btn blue" value="Submit" type="submit" /></td>
</tr>
<?php } ?>

</table>
</form>
</div>
</div>

<div class="grid_8 widget">
<div class="widget_title">
<h2>Add Commendation</h2>
</div>

<div class="widget_body" style="min-height: 220px">

<form name="add_commendation" method="post" action="/resources/includes/add_commendation.inc.php">

<table class="simple">

<tr>
<td width="150"></td>
<td width="300"><i>This will add a non-decorated commendation to the members personnel jacket.</i></td>
</tr>

<tr>
<td width="150"><label for="Commendation">Commendation:</label></td>
<td width="300">
<textarea name="Commendation" rows="6" cols="40" style="resize:none;"></textarea>
<input name="pilot_id" value="<?php echo $pilot_id ?>" type="hidden" />
</td>
</tr>

<tr>
<td width="150"></td>
<td width="400">
<input name="Submit" class="btn blue" value="Submit" type="submit" />
</td>
</tr>

</table>

</form>
</div>
</div>

<div class="clear"></div>
</div>

<div id="table2">
<div class="grid_8 widget">
<div class="widget_title clearfix">
<h2>Update Rank</h2>
</div>

<div class="widget_body" style="min-height: 55px">

<form name="update_rank" method="post" action="/resources/includes/update_rank.inc.php">
<table class="simple clearfix">
<tr>
<td width="150"><label for="select">Select Rank</label></td>
<td width="300">
<select name="select_rank">
<option value="1">Virtual Officer Cadet</option>
<option value="2">Virtual Pilot Officer</option>
<option value="3">Virtual Flying Officer</option>
<option value="4">Virtual Flight Lieutenant</option>
<option value="5">Virtual Squadron Leader</option>
<option value="6">Virtual Wing Commander</option>
<option value="7">Virtual Group Captain</option>
<option value="8">Virtual Air Commodore</option>
<option value="9">Virtual Air Vice-Marshal</option>
<option value="10">Virtual Air Marshal</option>
<option value="11">Virtual Air Chief Marshal</option>

</select>
<input name="pilot_id" value="<?php echo $pilot_id ?>" type="hidden" />
</td>
<td width="300">
<input name="submit" class="btn blue" value="Submit" type="submit" />  
</td>

</tr>

</table>
</form>

</div>
</div>

<div class="grid_8 widget">
<div class="widget_title clearfix">
<h2>Transfer Member</h2>
</div>

<div class="widget_body" style="min-height: 55px">

<div id="table">
<form name="transfer_member" method="post" action="/resources/includes/transfer_member.inc.php">
<table class="simple">
<tr>
<td width="150"><label for="select_unit">Select Unit</label></td>
<td width="300">
<select name="select_unit">

<?php include '/resources/includes/unit_select.inc.php'?>

</select>
<input name="pilot_id" value="<?php echo $pilot_id ?>" type="hidden" />
</td>
<td width="300">
<input name="submit" class="btn blue" value="Submit" type="submit" />  
</td>

</tr>

</table>
</form>
</div>

</div>

</div>    
</div>
</div></div>
themio

From your screenshot I see that in the third tab, the not okay one, the problematic element seems to be the select menu, which is taking a width of zero. Try to select the ID of the select menu using firebug, and then force the select menu to take a width.

Like so, (note that my element ID and yours will be different)
a#ui-selectmenu-469396c8-button {width: 250px !important}

If the problem is only select, then we can work from there. If the above doesn’t fix it, we can assume the problem is in the layout.

Default-user
njslater Purchased

Works a treat! thanks :D

Hello,

Nice admin template i like it.

I found a “bug” http://awesomescreenshot.com/08fpa2i33 the select menu is not aligned to the input

Tested on Google Chrome

themio

Thanks for letting us know. We’ll take a look.

Much appreciated.

csaona Purchased

Hi.

I think I’ve found a bug. If you view your demo site with IE7 , when you click the date picker you will see that the calendar that pops up looks bad: it takes the whole width of the page, and as a result the day cells are huge.

I’ve checked and it works OK with IE8 , FF 3.6 and Chrome.

themio

Thanks for letting us know. Looking into the issue.

arismom Purchased

Do you have bare bones html? :stress:

themio

yes, it is provided in the downloadable zip.

higgler Purchased

Excellent theme, I’m loving it!

I have one question though, I’m trying to change the table headers so that it shows which columns are being sorted and if they are asc/desc sorted, just like the default one shown on datatables.net. I went through the js/css files and dataTables settings but I don’t see how you are disabling this feature, how do I enable these icons/symbols?

themio

Try adding these lines at the bottom of the jqueryui.css

.DataTables_sort_icon {
    display: inline-block;
    height: 16px;
    vertical-align: middle;
    width: 16px;
}

.ui-icon-triangle-1-s {background: url("jquery/custom-theme/images/ui-icons_222222_256x240.png") repeat scroll -64px -16px transparent;}

.ui-icon-triangle-1-n {background: url("jquery/custom-theme/images/ui-icons_222222_256x240.png") repeat scroll 0 -16px transparent;}

That should work

arismom Purchased

Hi there!

Your theme has taught me a lot on CSS layout, JQuery, etc…thank you. I found this good article on understanding the 960 grid:

http://sixrevisions.com/web_design/the-960-grid-system-made-easy/

According to this article push/pull and suffix/prefix are similar, but not the same. I’m wondering why your CSS uses push/pull for creating space in the grid rather than suffix/prefix?

Thanks!

LC

themio

While you are absolutely correct, in most cases it really doesn’t matter how I am creating the space as long as there is a space. There are no semantic or browser issues, so it really comes down to a choice.

arismom Purchased

Hi there,

I have one more question for you….I’m trying to nest widgets…in this case I have 3 grid_4 widgets nested in one grid_12 widget…could you tell me if there is anything glaringly obvious in my code that I’m missing?

Nesting Issue

Did I use alpha/omega correctly?

Thank you for your help!

LC

themio

CC can not nest widgets, unfortunately. You can have several widgets in the same rows, but without any nesting.

csaona Purchased

Hi. Any news on the issue with the date picker and IE7 I reported some days ago? Are you planning to fix it? If so, do you have a time estimate?

I ask so we can plan on our side what to do and when.

Thanks

fmontero Purchased

I just bought your template, it was really the best admin template I found. I have to add also a blog to our intranet website, so having it as a Wordpress template would help me a lot. Are you considering it?

themio

There are currently no plans to convert this into a wordpress theme.

Hi,

is it possible to use the forms within the grid without any table layout, just the way you do it in the login form? I would like to use the label, the form field and the require note in the same row but without a table/tr/td combination.

Regards ;) Andrea

Just an FYI :

I experienced some problems when attempting to display large amounts of text in the jqueryui dialog box. Specifically, the text that did not fit within the modal window would not render as hidden (showing up below the window). In addition, there was never any vertical scrollbars.

To fix, I edited css/jqueryui.css and changed the following lines

.ui-dialog {background: #fff;border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px}

TO

.ui-dialog {background: #fff;border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; overflow: hidden; }

AND

.ui-dialog-content {border: 1px solid #C1C1C1; border-radius: 0px 0px 3px 3px; -moz-border-radius: 0px 0px 3px 3px; -webkit-border-radius: 0px 0px 3px 3px; padding: 5px}

TO

.ui-dialog-content {border: 1px solid #C1C1C1; border-radius: 0px 0px 3px 3px; -moz-border-radius: 0px 0px 3px 3px; -webkit-border-radius: 0px 0px 3px 3px; padding: 5px; overflow: auto; }}

Note the addition of the overflow properties.

This is a really great theme. Your team did a really great job. I’ve been working with it for a about 6 weeks and have had wonderful results.

themio

Thanks for the report. We will surely include it in our next update. :)

What a theme:) And the css is beautify done, nice one! Thanks for sharing at such a low price.

I do have a question though. What does examples.js do? If examples.js is loaded on the same page I use the cleditor the editor does not function correctly.

I have removed examples.js and it causes me no problems but would be good to know what examples.js should do.

Thanks

awesome admin theme! i got another one i liked better but your documentation and setup make it almost self explanatory. nice and clean, and LOTS of plugins, i definitely dont need any other admin theme for a long time.

QUESTION : i am concerned about versions of jquery and overlaps of styles and .js files; is it possible to put the files in say root/chameleon/ (css|js|images|etc) so i can keep your theme isolated yet centralized? Thanks

themio

Ok, thats a good suggestion. I will update it in the next update. Thanks again for the nice words :)

Very pretty picture! :)

Stupid question – Where do we use them? Can they me installed as admin theme for WordPress?

Great Work.

When I try to incorporate a form into one of the tabs of a widget, the drop down menu <select><options> fails to output correctly. The same code works outside of a tabbed widget. Could you advise me on a fix for this problem?

by
by
by
by
by
by