CiviCRM Community Forums (archive)

*

News:

Have a question about CiviCRM?
Get it answered quickly at the new
CiviCRM Stack Exchange Q+A site
This forum was archived on 25 November 2017. Learn more.
How to get involved.
What to do if you think you've found a bug.



  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Support »
  • Using CiviCRM »
  • Post-installation Setup and Configuration (Moderator: Dave Greenberg) »
  • Button CSS update
Pages: [1]

Author Topic: Button CSS update  (Read 2637 times)

brendan.johnson

  • Guest
Button CSS update
December 12, 2008, 02:49:30 pm
After a fresh install of 2.1.2 I noticed all of the button graphics (.button class) were off-kilter (In IE7 and FF 3 anyway). I see that they use the "sliding door" method. Anyway, in civicrm.css, in the  "#crm-container a.button" definition I changed "padding-right:14px" to "padding: 0 14px 0 0;" and it looks good. I haven't tested this on anything but IE7 and FF3, but it's just expanding on assumed values so I think it'll work everywhere.

Code: [Select]
#crm-container a.button {
    background: transparent url('bg_button_a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding: 0 14px 0 0; /* sliding doors padding */
    text-decoration: none;
}

Kurund Jalmi

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 4169
  • Karma: 128
    • CiviCRM
  • CiviCRM version: 4.x, future
  • CMS version: Drupal 7, Joomla 3.x
  • MySQL version: 5.5.x
  • PHP version: 5.4.x
Re: Button CSS update
December 12, 2008, 11:48:25 pm
Quote
"padding-right:14px" to "padding: 0 14px 0 0;"

This changes seems to be not working in FF3, Mac , It cuts the right curve of the button link

Kurund
Found this reply helpful? Support CiviCRM

brendan.johnson

  • Guest
Re: Button CSS update
December 14, 2008, 05:29:29 pm
Quote from: Kurund Jalmi on December 12, 2008, 11:48:25 pm
Quote
"padding-right:14px" to "padding: 0 14px 0 0;"

This changes seems to be not working in FF3, Mac , It cuts the right curve of the button link

Kurund

I am using FF3 Mac as well, as well as XP IE7, but need the change. This is using various default drupal templates (garland, pushbutton) and with no custom blocks to put potential conflicting css out there.
I would think for troubleshooting explicit padding would be preferable. Obviously the original styling assumes a value for top, left and bottom padding (it only has a padding-right value). Assigning those values to 0 works for me, but what are the designer's assumed values?
If I have time I'll strip personal info out of my dev site and post it for your review.

Dave Greenberg

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 5760
  • Karma: 226
    • My CiviCRM Blog
Re: Button CSS update
December 15, 2008, 12:21:56 pm
Hmm - I did some testing with the suggested "explicit padding" declaration - in FF 3.0.4 on Mac and in Safari 3.2 - and it works fine (looks the same as with the padding-right declaration only).  I've committed the change to civicrm.css in "trunk" - for 2.2 (r18761). We'll have time to verify that it's working on most / all current browsers during the alpha / beta cycle.

Note that when I used Firebug to exclude the padding declaration for that class, I see the behavior that Kurund reported - so wondering if the "test" was flakey for some reason.
Protect your investment in CiviCRM by  becoming a Member!
Pages: [1]
  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Support »
  • Using CiviCRM »
  • Post-installation Setup and Configuration (Moderator: Dave Greenberg) »
  • Button CSS update

This forum was archived on 2017-11-26.