HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Core Button Magic

There are no pages beneath this page

Posted
Submitted by Fletch
The buttons used by ocPortal core (system) areas are defined in the CSS and use a background image (gradient.png) for all of them. This is an extremely efficient use of an image, but it won't necessarily merge seamlessly into your new theme and colour scheme. The buttons targetted by this discussion are:
input[type="reset"].wide_button, input[type="reset"].button_micro, input[type="reset"].button_page, input[type="reset"].button_pageitem,
input[type="submit"].wide_button, input[type="submit"].button_micro, input[type="submit"].button_page, input[type="submit"].button_pageitem,
input[type="button"].wide_button, input[type="button"].button_micro, input[type="button"].button_page, input[type="button"].button_pageitem,
button.wide_button, button.button_micro, button.button_page, button.button_pageitem, .hero_section .hero_button a
I am concentrating on the 'system' buttons, not the graphic buttons that are contained in various sub-folders in the default 'images' folder. Those buttons may well be changed for you if you use the theme wizard, or you may edit them in a good imaging editor, but it is outside the scope of this article.


Here is a graphic presentation of how the buttons look under different circumstances:


  • Line 1 - This is how the 'default' buttons are displayed. They blend in well with the 'default' theme.
  • Line 2 - This display can be achieved by building an alternative 'gradient.png' image and saving it in the appropriate 'images_custom' folder. However, if you look closely at the 'micro' button you will notice that the new gradient image doesn't quite manage to 'fit'.
  • Line 3 - HTML5 and CSS3 to the rescue. The CSS change looks incredibly complicated, but it is a simple case of copy/posting code that can be obtained from a good on-line gradient tool. My preference is Ultimate CSS Gradient Generator which does a magnificent job of producing the right code with the right vendor prefixes, even generating the correct code for IE9, allowing for backwards compatibility for IE8 and anticipating IE10. All you have to do is copy/paste.


This is the default global.css property:

Code (css)

input[type="reset"].wide_button, input[type="reset"].button_micro, input[type="reset"].button_page, input[type="reset"].button_pageitem,
input[type="submit"].wide_button, input[type="submit"].button_micro, input[type="submit"].button_page, input[type="submit"].button_pageitem,
input[type="button"].wide_button, input[type="button"].button_micro, input[type="button"].button_page, input[type="button"].button_pageitem,
button.wide_button, button.button_micro, button.button_page, button.button_pageitem, .hero_section .hero_button a
{
        display: inline-block;
        border: none;
        cursor: pointer;
        border: 1px solid {$GET,dark_border};
        background-color: {$GET,lgrad};
        color: {$GET,native_ui_button_foreground};
        {$BETA_CSS_PROPERTY,border-radius: 6px;}
        background-image: url('{$IMG;,gradient}');
        text-shadow: 1px 1px 1px {$GET,dark_shadow};
        margin: 0 2px;
}
.button_micro {
        background-image: none !important; /* Too loud for such a small space */
}
 

Please note that I have included the extra '.button_micro' property which should be self-explanatory. If you don't change that or comment it out, it doesn't matter what you try to insert in the preceding rule - it won't display!


This is what the edited (custom) CSS will look like to get the display in 'Line 3' of the image attachment:

Code (css)

input[type="reset"].wide_button, input[type="reset"].button_micro, input[type="reset"].button_page, input[type="reset"].button_pageitem,
input[type="submit"].wide_button, input[type="submit"].button_micro, input[type="submit"].button_page, input[type="submit"].button_pageitem,
input[type="button"].wide_button, input[type="button"].button_micro, input[type="button"].button_page, input[type="button"].button_pageitem,
button.wide_button, button.button_micro, button.button_page, button.button_pageitem, .hero_section .hero_button a
{
        display: inline-block;
        border: none;
        cursor: pointer;
        border: 1px solid {$GET,dark_border};
/*      background-color: {$GET,lgrad}; */
/*      color: {$GET,native_ui_button_foreground}; */
        color: #000;
        {$BETA_CSS_PROPERTY,border-radius: 6px;}
/*      background-image: url('{$IMG;,gradient}'); */
/*      text-shadow: 1px 1px 1px {$GET,dark_shadow}; */
        margin: 0 2px;
        background: #f2f5f6; /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjVmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iI2UzZWFlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjOGQ3ZGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top,  #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-8 */
}

.button_micro {
/*      background-image: none !important; /* Too loud for such a small space */ */
}
 

The IE9 'property' looks horrendous, and it isn't anything I would be able to hand-code no matter how long I played with this technology. However, the on-line generator does the hard work, and it is a simple matter of copy/pasting your final result after tweaking the gradient in the generator UI to get it to display exactly how you want it to.

I have a habit of retaining the original code, commented out, in case I screw up something and it all goes TU. It is also useful to retain the notes.

I hope you found this of interest.

 
CEDI change-log Post