How do I hide Comala Workflows' banner button that pops up on page request

[Stan Ry]

Howdy,

I'd like to hide the annoying Comala's icon that pops out every time you refresh the page, runs all the way right-to the left and then hides itself.

I looks so irritating that my users are going to assesinate me if only I leave this intact. :)

The button looks as:

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgOTkuODkgMTQyLjMzIj4KCTx0aXRsZT5Xb3JrZmxvdzwvdGl0bGU+Cgk8cGF0aCBkPSJNNzEuMTcsNDkuOTRhMjEuNzcsMjEuNzcsMCwwLDAtNC42Ny41M0w0OS40MSwzMy4zOGEyMSwyMSwwLDAsMCwuNTMtNC42NkEyMS4yOCwyMS4yOCwwLDEsMCwzMy4zOCw0OS40MWwxNy4wOSwxNy4xYTIwLjc1LDIwLjc1LDAsMCwwLDAsOS4zMkwzMy4zOCw5Mi45MmEyMS4yOCwyMS4yOCwwLDEsMCwxNiwxNkw2Ni41LDkxLjg2YTIxLjIyLDIxLjIyLDAsMSwwLDQuNjctNDEuOTJaIiBzdHlsZT0iZmlsbDojZmZmO3N0cm9rZTojZmZmO3N0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZS13aWR0aDoxNXB4Ii8+Cgk8cGF0aCBkPSJNNzEuMTYsNTBBMjEuMjMsMjEuMjMsMCwwLDAsNDkuOTQsNzEuMjZhMjEuNywyMS43LDAsMCwwLC41Miw0LjY3TDM4LjEzLDg4LjI2QTI3LjU5LDI3LjU5LDAsMCwxLDU0LjQ1LDEwNGwxMi0xMmEyMS42NywyMS42NywwLDAsMCw0LjY2LjUxLDIxLjIyLDIxLjIyLDAsMSwwLDAtNDIuNDRabTUuNzYsMzEuNTFoMGwtLjQ0LjIzTDc2LDgybC0uNDMuMTljLS4yNi4xMS0uNTMuMi0uOC4yOWwtLjM2LjExLS43My4xOS0uMjQsMGMtLjMyLjA3LS42NS4xMi0xLC4xNmwtLjI3LDBjLS4zNiwwLS43MS4wNi0xLjA3LjA2YTExLjgxLDExLjgxLDAsMCwxLTExLjc5LTExLjhjMC0uMzUsMC0uNzEuMDYtMS4wNmwwLS4yN2E4LDgsMCwwLDEsLjE1LTFjMC0uMDgsMC0uMTcsMC0uMjUuMDYtLjI0LjEyLS40OC4xOS0uNzFzLjA3LS4yNi4xMS0uMzguMTgtLjUzLjI5LS43OS4xMy0uMjkuMi0uNDQuMTMtLjI4LjItLjQybC4yMy0uNDVoMGExMS43OSwxMS43OSwwLDEsMSwxNiwxNloiIHN0eWxlPSJmaWxsOiM3MTcwNzAiLz4KCTxwYXRoIGQ9Ik02MC43OSw5Ny42OEEzNi4wNywzNi4wNywwLDAsMCw0NC41NSw4MS44NGwtNi40Miw2LjQyQTI3LjU5LDI3LjU5LDAsMCwxLDU0LjQ1LDEwNFoiIHN0eWxlPSJmaWxsOiM3MTcwNzAiLz4KCTxwYXRoIGQ9Ik0yOC43Miw5Mi40OGEyMS4yMywyMS4yMywwLDEsMCwyMS4yMiwyMS4yM0EyMS4yMywyMS4yMywwLDAsMCwyOC43Miw5Mi40OFptMCwzM2ExMS43OSwxMS43OSwwLDEsMSwxMS43OS0xMS43OUExMS44LDExLjgsMCwwLDEsMjguNzIsMTI1LjVaIiBzdHlsZT0iZmlsbDojNzE3MDcwIi8+Cgk8cGF0aCBkPSJNNDkuNDIsMzMuNDlhMjEuMjIsMjEuMjIsMCwxLDAtMTYsMTZsMTIsMTIuMDZhMjcuNTQsMjcuNTQsMCwwLDEsMTYtMTZaTTE2LjkzLDI4LjgyQTExLjc5LDExLjc5LDAsMCwxLDM5LDIzLjA3aDBjLjA3LjE0LjE0LjI5LjIyLjQzbC4yMi40NS4xOC40MmMuMTEuMjYuMjEuNTMuMy44LDAsLjEyLjA3LjI1LjExLjM3cy4xMy40OC4xOC43MmExLjgzLDEuODMsMCwwLDEsLjA2LjI1Yy4wNy4zMi4xMS42NS4xNSwxbDAsLjI3YzAsLjM1LDAsLjcsMCwxLjA2QTExLjgsMTEuOCwwLDAsMSwyOC43Miw0MC42MWMtLjM2LDAtLjcxLDAtMS4wNiwwbC0uMjcsMGMtLjMzLDAtLjY2LS4wOC0xLS4xNWwtLjI0LS4wNS0uNzMtLjE5TDI1LjA3LDQwYy0uMjctLjA5LS41NC0uMTktLjgtLjNsLS40MS0uMTgtLjQ2LS4yMkwyMywzOS4xMUExMS43OSwxMS43OSwwLDAsMSwxNi45MywyOC44MloiIHN0eWxlPSJmaWxsOiM3MTcwNzAiLz4KCTxwYXRoIGQ9Ik02MS40Nyw0NS41NGwtNi4zOC02LjM4YTM2LDM2LDAsMCwwLTE2LDE2bDYuMzgsNi4zN0EyNy41NSwyNy41NSwwLDAsMSw2MS40Nyw0NS41NFoiIHN0eWxlPSJmaWxsOiM3MTcwNzAiLz4KCjwvc3ZnPg==

 And here it is before it gets hidden:

And it hides away because it is an instance of the 'hidden' class:

<a href="/wiki" title="Workflow Information" id="adhocWorkflowsInfoBanner" class="hidden"><span>Workflow</span></a>

The CSS they use looks as

#adhocWorkflowsInfoBanner {

padding-left: 18px;

background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiI…41NSwwLDAsMSw2MS40Nyw0NS41NFoiIHN0eWxlPSJmaWxsOiM3MTcwNzAiLz4KCjwvc3ZnPg==)!important;

background-repeat: no-repeat!important;

background-position: 3px center!important;

background-size: 16px 16px!important;

(oh, why do they use the !important flag by the way, I've heard it isn't a good coding practice.)

I was going to use this script on the page:

<script type="text/javascript">
(function($) {
  $('#adhocWorkflowsInfoBanner').remove();
 })(AJS.$); 
</script>

But it didn't work out because it seems like the function is invoked after the button hides away.

Is there any way I could hide this button from appearing when the users refresh the page?

I am in no way a developer and that's pretty much one of the first scripts I am have ever written...

Thank you. 

[Steven F Behnke · Accepted solution]

Perhaps this would work? CSS doesn't wait to execute like Javascript does.

<style>
  #adhocWorkflowsInfoBanner {
    display:none;
  }
</style>

[Stan Ry]

Hi Steven,

Thanks for your response! Actually, that was the first one I've tried. It didn't work. Dunno why.

More to that, I've added the !important bit to override the behavior:

<style>
  #adhocWorkflowsInfoBanner {
    display:none !important;
  }
</style>

All to no avail. This popping out icon is driving my bosses nuts. :)

Any clues?

I am using Markdown macro to insert the CSS style.

I am doing it like that:

1. Insert a new page layout section while in the Edit mode. 

2. Add the Markdown macro to this section.

3. Add the CSS above to this Markdown macro.

4. The CSS gets injected into the source code.

[Stan Ry]

Figured: for some reason, to fully eliminate the appearance of Comala's banner button you have to apply the CSS to the entire space.

Seems like adding the css to the page by using macros like Markdown may not work due to some lag that appears before the macro injects the CSS into the make markup.

At least adding Steven's macro to the space stylesheet hid the nagging batter from appearing on the page.

Any clues how to force that without having to apply this to the whole space?