# Regroup and change positions of labels in image\_manual tasks?

**URL:** <https://support.prodi.gy/t/regroup-and-change-positions-of-labels-in-image-manual-tasks/3852>\
**Category:** Uncategorized\
**Tags:** usage, image, custom, front-end\
**Created:** [February 5, 2021, 2:35pm UTC](https://support.prodi.gy/t/regroup-and-change-positions-of-labels-in-image-manual-tasks/3852 "2021-02-05T14:35:30Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [February 7, 2021, 2:06am UTC](https://support.prodi.gy/t/regroup-and-change-positions-of-labels-in-image-manual-tasks/3852/2 "2021-02-07T02:06:25Z")

</div>

> [@AK\_Fischer](#):
>
> However, I'm fuzzy on whether I can simply wildly re-arrange and re-style the elements in the DOM. What sort of changes would break things? Is there an overview on what I can and can't (or shouldn't) do?

By labels, you mean the label list where you select the label to annotate? You can select the title bar containing the labels in CSS using the classes `.prodigy-title-wrapper` and `.prodigy-title` (if you look at the elements in your browser's developer console, you'll see the elements it targets). So you could definitely re-style them and move them around and provide the overrides via the `global_css`: [Custom Interfaces · Prodigy · An annotation tool for AI, Machine Learning & NLP](https://prodi.gy/docs/custom-interfaces#js-css)

I just did a quick test and there's definitely some CSS magic you can do to re-order the labels (especially if you know their order and know which one should go on which side). For example, like this:

 ![Screenshot 2021-02-07 at 12.58.26](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/a/a77ca509d255860bee57178c31a9847e2e576102.jpeg)

The idea here is to make the labels a wider grid container with 3 columns (left column to the left of the annotation card, right column to the right). You can then target each label by its order and either place it in the left column, or in the right. Here's how it works:

```css
.prodigy-title {
    /* Make container wider and move it to the side */
    position: absolute;
    left: -200px;
    width: calc(100% + 400px);
    background: transparent;
    /* Set up the left and right columns */
    display: grid;
    grid-template-columns: 150px 1fr 150px;
    /* Make sure you can click through it */
    pointer-events: none;
}

.prodigy-title > div, .prodigy-title > div > div {
    /* "Ignore" the wrapper containers so the labels themselves are grid children */
    display: contents;
}

.prodigy-title label {
    /* Some styling so the labels are not white and clickable */
    color: #000;
    pointer-events: initial;
}

/* Put first and third label in column 1 and second and fourth label in column 3 */
.prodigy-title span:nth-child(1),
.prodigy-title span:nth-child(3) {
    grid-column: 1;
}

.prodigy-title span:nth-child(2),
.prodigy-title span:nth-child(4) {
    grid-column: 3;
}

```

> [@AK\_Fischer](#):
>
> I'm thinking this will boil down to a wrapper page that requests and embeds the Prodigy app as an iframe, then modifies it after it has loaded.

That wouldn't really work, because a modern browser typically won't give you access to the content of an iframe, unless it's hosted on the same domain (which makes a lot of sense for security reasons). And even if you did host it on the same domain, it's probably more convenient to just use Prodigy's built-in settings for providing custom CSS and JS.

---

_[View the full topic](https://support.prodi.gy/t/regroup-and-change-positions-of-labels-in-image-manual-tasks/3852)._