WordPress.org

Ready to get started?Download WordPress

Forums

admin theme: changing class="updated fade" (4 posts)

  1. meganano
    Member
    Posted 8 years ago #

    So, I thought I would modify the wp-admin.css file a little and for the most part I've been successful. The main thing I wanted to fix is that on my PowerBook 64, 12-inch screen, when I'm in the theme editor, the "update file" button is below the fold and I have to scroll down to click on the button. Seems silly I know, but when I'm making lightning fast and minor changes, I want to be able to just drop the new code in, hit "update" and blammo.

    So... I tweaked the whitespace in the various headers and divs with success, but the one thing I cannot seem to modify to my liking is the little bar that pops to the top once you've made a change. A look at the code tells me that there are a couple things I could modify:
    <div id="message" class="updated fade"><p>File edited successfully.</p></div>

    However, "message" is nowhere to be found in wp-admin.css and although I found the class ".updated" ... I can't sort out the "fade" part of the deal. This must be a Javascript thing right?

    I've gotten the screen to where I want it with my changes, but at soon as I make a change the message "File edited successfully" shoves everything down so that my "Update File" button slides below the fold. I did experiment with moving the button around on the page, but that broke it. (I tried putting it to the right... which would have been fine, but then it didn't work.)

    So... how do I modify the message box that pops up to make it smaller and take up less vertical space? I've already tweaked the padding in the .updated class, but it's not enough to make a difference.

    And can a class be two words separated by whitespace? I'm baffled by this "updated fade" class.

    Cany anyone help?

  2. sadish
    Member
    Posted 8 years ago #

    class="updated fade" means the browser should apply the styles from both .updated and .fade.

    but in this case, fade is not defined in the stylesheet, but it is used in a javascript function.
    The function is present in wp-includes\js\fat.js (Line Number 14)

    The function basically loops through all the elements that have the style defined as "fade" and does the action.

    I will leave the rest to you.
    Thanks
    Sadish

  3. meganano
    Member
    Posted 8 years ago #

    Sadish, thanks for pointing to the culprit. I guess I was correct in suspecting this to be a javascript maneuver... and I'm also correct in fearing that I have absolutely no idea what to do with it. I've little to no js experience... without going into a huge tutorial (I'm working on improving my CSS knowledge right now before moving onto javascript) can anyone point me in the direction as to how to modify the wp-includes\js\fat.js so that the little message at the top of the screen takes up less whitespace?
    -MN-

  4. da_silva
    Member
    Posted 7 years ago #

    why don't you cut the fade part of the definition if that is to blame for the space ?!

Topic Closed

This topic has been closed to new replies.

About this Topic