Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Styling WordPress Admin Bar

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #32756
    Brightonmike
    Member

    If like me you’ve made wordpress sites where people can login you may want them to see the admin bar, but you might not like the way it looks.

    I’m not sure if there’s a wordpress hook that would do this a better way, but sticking the following into my themes CSS allowed me to adjust its styling.

    It’s not perfect and there is a bug (see if you notice!) but I thought it’d still be useful to post up. As you can see I’ve used “!important” to make sure these styles over-ride the defaults.

    #wpadminbar{
    background: rgb(226,226,226)!important;
    background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%)!important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1)))!important;
    background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%)!important;
    background: -o-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%)!important;
    background: -ms-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%)!important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 )!important;
    background: linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%)!important;
    -webkit-box-shadow: 0px 12px 40px #000000;
    -moz-box-shadow: 0px 12px 40px #000000;
    box-shadow: 0px 12px 40px #000000;
    }

    #wpadminbar .quicklinks a, #wpadminbar .shortlink-input {
    color:#111!important;
    text-shadow:#c2c2c2 0 -1px 0!important;
    }
    #wpadminbar .quicklinks a:hover, #wpadminbar .shortlink-input:hover {
    color:#f0f0f0!important;
    text-shadow:#222 0 -1px 0!important;
    }
    #75975
    ccc630
    Member

    Thanks for sharing! Strictly for reference, Jeff Starr recently posted on the same topic at Digging Into WordPress (which he co-admins with Chris Coyier), including ways to move, disable, and customize the bar:

    http://digwp.com/2011/04/admin-bar-tricks/

    Haven’t taken time to read it in depth yet, but might be worth a look.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.