Skip to main content
Topic: How to add the new 1.1.9 ILA button to your custom theme (Read 493 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

How to add the new 1.1.9 ILA button to your custom theme

The inline attachment (ILA) button that appears on the post page when you upload a file has been changed in 1.1.9  In previous versions it was a share icon that was often overlooked or not understood.  In 1.1.9 we added a new icon and increased the size/presence of the button so it is obvious there is something special you can do with the file you uploaded.  Of course ILA must be enabled in your admin panel.

The important part of the change that the old CSS class name was .share this has been replaced with .ila.  To start find ALL .share in your index.css file and append the new .ila class, for example, this will be found in 2 or 3 locations.
Code: (Find) [Select]
.abort, .remove, .share {
Code: (Append ILA) [Select]
.abort, .remove, .share, .ila {

Next we add a new specific style for the new class, again in your themes index.css
Code: [Select]
.ila {
min-width: 3em;
padding-top: 5px;
border: 1px solid;
}

Next,  in your color variant file, you need to append .ila to your common button styling tags so the new ILA button looks and acts much like all other buttons.  The code to change will look something like
Code: (Find) [Select]
.linkbutton:link, .linkbutton_right:link, .linkbutton_left:link,
.linkbutton:visited, .linkbutton_right:visited, .linkbutton_left:visited {
Code: (Append ILA) [Select]
.linkbutton:link, .linkbutton_right:link, .linkbutton_left:link,
.linkbutton:visited, .linkbutton_right:visited, .linkbutton_left:visited, .ila {
And
Code: (Find) [Select]
input[type="submit"]:hover, button[type="submit"]:hover, input[type="button"]:hover,
.linkbutton:hover, .linkbutton_right:hover, .linkbutton_left:hover {
Code: (Append ILA) [Select]
input[type="submit"]:hover, button[type="submit"]:hover, input[type="button"]:hover,
.linkbutton:hover, .linkbutton_right:hover, .linkbutton_left:hover, .ila:hover {

This next step is only needed if you have a custom icons_svg.css file in your custom theme.  If so add the new ila graphic to that file.
Code: [Select]
.i-ila::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 36'%3E%3Cpath fill='none' d='M-1-1h74v38H-1z'/%3E%3Cg%3E%3Cpath fill='%233f7f00' d='M31.025 12.8c0 1.722-1.337 3.12-2.984 3.12s-2.985-1.398-2.985-3.12 1.337-3.119 2.985-3.119 2.984 1.398 2.984 3.12zm15.92 6.24v7.278h-21.89v-3.12L30.032 18l2.487 2.599 7.96-8.318 6.467 6.759zm1.492-11.438H23.563c-.265 0-.498.244-.498.52v19.756c0 .276.233.52.498.52h24.874c.265 0 .498-.244.498-.52V8.122c0-.276-.233-.52-.498-.52zm2.487.52v19.756c0 1.43-1.119 2.599-2.487 2.599H23.563c-1.368 0-2.487-1.17-2.487-2.6V8.123c0-1.43 1.119-2.599 2.487-2.599h24.874c1.368 0 2.487 1.17 2.487 2.6z' stroke='null'/%3E%3Cg stroke-width='.001' stroke='red' fill='%23222'%3E%3Cpath d='M10.435 5.938h6v1.5h-6z'/%3E%3Cpath d='M10.435 7.063h2v22h-2z'/%3E%3Cpath d='M10.435 28.562h6v1.5h-6z'/%3E%3Cpath fill-opacity='null' stroke-opacity='null' d='M1.56 17.063h8.875v1.875H1.56z'/%3E%3C/g%3E%3Cg stroke-width='.001' stroke='red' fill='%23222'%3E%3Cpath d='M10.435 5.938h6v1.5h-6z'/%3E%3Cpath d='M10.435 7.063h2v22h-2z'/%3E%3Cpath d='M10.435 28.562h6v1.5h-6z'/%3E%3Cpath fill-opacity='null' stroke-opacity='null' d='M1.56 17.063h8.875v1.875H1.56z'/%3E%3C/g%3E%3Cg stroke-width='.001' stroke='red' fill='%23222'%3E%3Cpath d='M61.937 30.062h-6v-1.5h6z'/%3E%3Cpath d='M61.937 28.937h-2v-22h2z'/%3E%3Cpath d='M61.937 7.438h-6v-1.5h6z'/%3E%3Cpath fill-opacity='null' stroke-opacity='null' d='M70.812 18.937h-8.875v-1.875h8.875z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

Lastly as the new ILA button is bigger, and its a button, the insert overlay button also needs to be adjusted.  Replace your existing .statusbar .insertoverlay .button {} block,  in index.css, with the following.
Code: [Select]
.statusbar .insertoverlay .button {
font-weight: bold;
position: absolute;
top: -35px;
left: 2px;
width: 55px;
min-height: 34px;
margin: 0;
border-radius: 4px;
}