Feature request: new type of columns display (dynamic classes)
-
Please add new option. Give us option where we can chose to have more dynamic classes depending of field values. It sholud be not so difficult for you coders, but dont want to sound rude. This way we have more freedom to style, colorize, give other CSS properties depending of row value. Usefull in plenty of situation. It is difficult to hijack output of AC plugin.
– We chose a custom column.
– In post listing display of rows are for instance like this:
– Field value = 34, class is “.column-something .column-row-34“
Or:
– Field value = Task finished, class is “.column-something .column-row-task-finished“Something like this, but you get picture.
Just for styling and CSS control of output.
Viewing 5 replies - 1 through 5 (of 5 total)
-
Heya!
We’ve been thinking about adding an option for this, but we’re still unsure as to whether we actually want to implement this. It seems that this would be more the territory of an addon than of the main plugin. I don’t believe this feature will be implemented in the near future, but you could search for a developer would develop an addon for you!
Cheers!
JesperYou already have options “before” and “after”. Jus adapt them to accept/parse HTML tags too.
Before = <div class=”some-class-
After = ></div>This way we have dynamic class names from field values.
I managed this. Will write it if it can help someone. This way you can style, colorize any values in columns, as you need and wish.
/** * Change the column value for a Custom Field column * * @param $value the original value which would otherwise be displayed * @param $id the ID of the object * @param $column the Column object which contains all information about the column. * $column->storage_model->key contains the posttype * $column->storage_model->type contains the contenttype; post, media, user, link or comment. * $column->options->field contains the name of your custom field * @return $string Custom value */ function my_custom_field_value( $value, $id, $column ) { $post_type = 'ticket'; $custom_field = 'slider_milestone'; // make sure we have the correct posttype and custom field if ( $post_type == $column->storage_model->key && $custom_field == $column->options->field ) { if ( $value ) $value = '<div class="progress-wrapper">' . '<div class="progress-' . "$value" . '">' . "$value" . '</div>' . '</div>'; // elseif ( '3' == $value ) // $value = 'New York'; } return $value; } add_filter( 'cac/column/meta/value', 'my_custom_field_value', 10, 3 ); function my_admin_theme_style() { wp_enqueue_style('my-admin-style', get_template_directory_uri() . '/admin-override.css'); } add_action('admin_enqueue_scripts', 'my_admin_theme_style');And CSS lines. Sorry if it is a bit long for this forum.
Just as example to other, to get picture how dynamic rows (not columns) in backend listings can be..progress-wrapper { width: 100%; margin: 0; border: 1px solid #ddd; background: #f9f9f9; padding:5px; box-sizing: border-box;} /* .progress-20 { width: 6%; } */ /* .progress-20 { width: 6%; } */ .progress-0 { width: 1%; background-color: #da4453; color:#fff; text-align:center; } .progress-1 { width: 1%; background-color: #da4453; color:#fff; text-align:center; } .progress-2 { width: 1%; background-color: #da4453; color:#fff; text-align:center; } .progress-3 { width: 2%; background-color: #da4453; color:#fff; text-align:center; } .progress-4 { width: 2%; background-color: #da4453; color:#fff; text-align:center; } .progress-5 { width: 3%; background-color: #da4453; color:#fff; text-align:center; } .progress-6 { width: 4%; background-color: #da4453; color:#fff; text-align:center; } .progress-7 { width: 4%; background-color: #da4453; color:#fff; text-align:center; } .progress-8 { width: 5%; background-color: #da4453; color:#fff; text-align:center; } .progress-9 { width: 5%; background-color: #da4453; color:#fff; text-align:center; } .progress-10 { width: 6%; background-color: #da4453; color:#fff; text-align:center; } .progress-11 { width: 6%; background-color: #da4453; color:#fff; text-align:center; } .progress-12 { width: 7%; background-color: #da4453; color:#fff; text-align:center; } .progress-13 { width: 7%; background-color: #da4453; color:#fff; text-align:center; } .progress-14 { width: 8%; background-color: #da4453; color:#fff; text-align:center; } .progress-15 { width: 8%; background-color: #da4453; color:#fff; text-align:center; } .progress-16 { width: 9%; background-color: #da4453; color:#fff; text-align:center; } .progress-17 { width: 10%; background-color: #da4453; color:#fff; text-align:center; } .progress-18 { width: 11%; background-color: #da4453; color:#fff; text-align:center; } .progress-19 { width: 11%; background-color: #da4453; color:#fff; text-align:center; } .progress-20 { width: 12%; background-color: #da4453; color:#fff; text-align:center; } .progress-21 { width: 13%; background-color: #da4453; color:#fff; text-align:center; } .progress-22 { width: 14%; background-color: #da4453; color:#fff; text-align:center; } .progress-23 { width: 15%; background-color: #da4453; color:#fff; text-align:center; } .progress-24 { width: 16%; background-color: #da4453; color:#fff; text-align:center; } .progress-25 { width: 18%; background-color: #da4453; color:#fff; text-align:center; } .progress-26 { width: 20%; background-color: #da4453; color:#fff; text-align:center; } .progress-27 { width: 22%; background-color: #da4453; color:#fff; text-align:center; } .progress-28 { width: 24%; background-color: #da4453; color:#fff; text-align:center; } .progress-29 { width: 26%; background-color: #da4453; color:#fff; text-align:center; } .progress-30 { width: 27%; background-color: #da4453; color:#fff; text-align:center; } .progress-31 { width: 28%; background-color: #da4453; color:#fff; text-align:center; } .progress-32 { width: 29%; background-color: #da4453; color:#fff; text-align:center; } .progress-33 { width: 30%; background-color: #da4453; color:#fff; text-align:center; } .progress-34 { width: 31%; background-color: #da4453; color:#fff; text-align:center; } .progress-35 { width: 32%; background-color: #da4453; color:#fff; text-align:center; } .progress-36 { width: 33%; background-color: #da4453; color:#fff; text-align:center; } .progress-37 { width: 34%; background-color: #da4453; color:#fff; text-align:center; } .progress-38 { width: 35%; background-color: #da4453; color:#fff; text-align:center; } .progress-39 { width: 36%; background-color: #da4453; color:#fff; text-align:center; } .progress-40 { width: 38%; background-color: #da4453; color:#fff; text-align:center; } .progress-41 { width: 39%; background-color: #da4453; color:#fff; text-align:center; } .progress-42 { width: 40%; background-color: #da4453; color:#fff; text-align:center; } .progress-43 { width: 41%; background-color: #da4453; color:#fff; text-align:center; } .progress-44 { width: 42%; background-color: #da4453; color:#fff; text-align:center; } .progress-45 { width: 43%; background-color: #da4453; color:#fff; text-align:center; } .progress-46 { width: 45%; background-color: #da4453; color:#fff; text-align:center; } .progress-47 { width: 47%; background-color: #da4453; color:#fff; text-align:center; } .progress-48 { width: 48%; background-color: #da4453; color:#fff; text-align:center; } .progress-49 { width: 49%; background-color: #da4453; color:#fff; text-align:center; } .progress-50 { width: 50%; background-color: #da4453; color:#fff; text-align:center; } .progress-51 { width: 52%; background-color: #da4453; color:#fff; text-align:center; } .progress-52 { width: 53%; background-color: #da4453; color:#fff; text-align:center; } .progress-53 { width: 55%; background-color: #da4453; color:#fff; text-align:center; } .progress-54 { width: 56%; background-color: #da4453; color:#fff; text-align:center; } .progress-55 { width: 58%; background-color: #da4453; color:#fff; text-align:center; } .progress-56 { width: 59%; background-color: #da4453; color:#fff; text-align:center; } .progress-57 { width: 60%; background-color: #da4453; color:#fff; text-align:center; } .progress-58 { width: 61%; background-color: #da4453; color:#fff; text-align:center; } .progress-59 { width: 62%; background-color: #da4453; color:#fff; text-align:center; } .progress-60 { width: 63%; background-color: #da4453; color:#fff; text-align:center; } .progress-61 { width: 64%; background-color: #da4453; color:#fff; text-align:center; } .progress-62 { width: 66%; background-color: #da4453; color:#fff; text-align:center; } .progress-63 { width: 67%; background-color: #da4453; color:#fff; text-align:center; } .progress-64 { width: 69%; background-color: #da4453; color:#fff; text-align:center; } .progress-65 { width: 70%; background-color: #da4453; color:#fff; text-align:center; } .progress-66 { width: 72%; background-color: #da4453; color:#fff; text-align:center; } .progress-67 { width: 73%; background-color: #da4453; color:#fff; text-align:center; } .progress-68 { width: 74%; background-color: #da4453; color:#fff; text-align:center; } .progress-69 { width: 75%; background-color: #da4453; color:#fff; text-align:center; } .progress-70 { width: 75%; background-color: #da4453; color:#fff; text-align:center; } .progress-71 { width: 76%; background-color: #da4453; color:#fff; text-align:center; } .progress-72 { width: 78%; background-color: #da4453; color:#fff; text-align:center; } .progress-73 { width: 79%; background-color: #da4453; color:#fff; text-align:center; } .progress-74 { width: 80%; background-color: #da4453; color:#fff; text-align:center; } .progress-75 { width: 81%; background-color: #da4453; color:#fff; text-align:center; } .progress-76 { width: 83%; background-color: #da4453; color:#fff; text-align:center; } .progress-77 { width: 84%; background-color: #da4453; color:#fff; text-align:center; } .progress-78 { width: 85%; background-color: #da4453; color:#fff; text-align:center; } .progress-79 { width: 86%; background-color: #da4453; color:#fff; text-align:center; } .progress-80 { width: 88%; background-color: #da4453; color:#fff; text-align:center; } .progress-81 { width: 89%; background-color: #da4453; color:#fff; text-align:center; } .progress-82 { width: 90%; background-color: #da4453; color:#fff; text-align:center; } .progress-83 { width: 91%; background-color: #da4453; color:#fff; text-align:center; } .progress-84 { width: 92%; background-color: #da4453; color:#fff; text-align:center; } .progress-85 { width: 92%; background-color: #da4453; color:#fff; text-align:center; } .progress-86 { width: 93%; background-color: #da4453; color:#fff; text-align:center; } .progress-87 { width: 93%; background-color: #da4453; color:#fff; text-align:center; } .progress-88 { width: 94%; background-color: #da4453; color:#fff; text-align:center; } .progress-89 { width: 94%; background-color: #da4453; color:#fff; text-align:center; } .progress-90 { width: 95%; background-color: #da4453; color:#fff; text-align:center; } .progress-91 { width: 95%; background-color: #da4453; color:#fff; text-align:center; } .progress-92 { width: 96%; background-color: #da4453; color:#fff; text-align:center; } .progress-93 { width: 96%; background-color: #da4453; color:#fff; text-align:center; } .progress-94 { width: 97%; background-color: #da4453; color:#fff; text-align:center; } .progress-95 { width: 97%; background-color: #da4453; color:#fff; text-align:center; } .progress-96 { width: 98%; background-color: #da4453; color:#fff; text-align:center; } .progress-97 { width: 98%; background-color: #da4453; color:#fff; text-align:center; } .progress-98 { width: 99%; background-color: #da4453; color:#fff; text-align:center; } .progress-99 { width: 99%; background-color: #da4453; color:#fff; text-align:center; } .progress-100 { width: 100%; background-color: #da4453; color:#fff; text-align:center; }Put all your CSS code in theme folder, admin-override.css file, and use this in functions.php.
function my_admin_theme_style() { wp_enqueue_style('my-admin-style', get_template_directory_uri() . '/admin-override.css'); } add_action('admin_enqueue_scripts', 'my_admin_theme_style');
Viewing 5 replies - 1 through 5 (of 5 total)
- The topic ‘Feature request: new type of columns display (dynamic classes)’ is closed to new replies.
