WordPress.org

Forums

WP Symposium Toolbar
[resolved] Add site logo and align (17 posts)

  1. style960
    Member
    Posted 1 year ago #

    Is it possible to add a site logo with this plugin and add it to the toolbar?

    Also, is it possible to align toolbar items (logo & menu) so they display above the page content rather than be aligned to the far right for example?

    Thanks,
    Paul.

    https://wordpress.org/plugins/wp-symposium-toolbar/

  2. Guillaume Assire
    Member
    Plugin Author

    Posted 1 year ago #

    To add a logo to the Toolbar, you could use a custom menu. If you don't want a dropdown menu on it, use a one-item menu. If you don't want a link over that icon, first create your menu item with any URL (homepage for instance), then edit the menu item and remove that link.

    To add an icon to your menu, and as described in the User Guide ยง4, upload the image file somewhere on your server, and add the URL to the field "custom icon" of that menu.

    As far as alignement, if you mean like what's on WordPress.org / BuddyPress / bbPress, you could add custom CSS like so:

    #wp-toolbar {
    width: 960px;
    }

    I'll see if I can add it to the plugin. I'm a bit concerned that it may be too theme-dependent, and break responsiveness...?

  3. style960
    Member
    Posted 1 year ago #

    I'll test adding a logo today thanks. I'm don't really want to adjust the width of the toolbar - I wanted to use Symposium to create the kind of fixed header users see on Facebook or Twitter. And it makes more sense to use the toolbar for this as the user account links are already part of it. If I can't align logo and menu links for larger desktop displays, I'll have to write my own fixed header with css.

  4. Guillaume Assire
    Member
    Plugin Author

    Posted 1 year ago #

    I've had interesting results by using max-width instead of width:

    #wp-toolbar {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 1040px;
    }

    1040px being the width of your page content. Also note I'm addressing the div.quicklinks, not the whole Toolbar.

  5. style960
    Member
    Posted 1 year ago #

    Thanks, I'll have a look at this shortly.

  6. style960
    Member
    Posted 1 year ago #

    That's the sort of thing I'm looking for but I'd like the user account menu to stay in the left corner to prevent masking content as a drop-down. If I remove max-width, I can align the account menu with #wp-toolbar.quicklinks and some padding. If I could figure out the selector for a custom menu, it should do the same thing.

  7. Guillaume Assire
    Member
    Plugin Author

    Posted 1 year ago #

    Sure, if you align the quicklinks so they fit the page content, dropdown menus will mask it :)

    Custom Menus added by WPS Toolbar have their menu ID as selector, it may look weird or ugly but it ensures unicity. So it gives, as an exmaple: #wp-admin-bar-30, and the dropdown menu underneath would be #wp-admin-bar-30 > .ab-sub-wrapper

  8. style960
    Member
    Posted 1 year ago #

    I saw the menu ID's acting as selectors earlier. My main menu (as seen when logged-in) is made up of parent items, therefore multiple selectors. I don't know how I can pad or apply a margin to these links so they site above the main content?

  9. Guillaume Assire
    Member
    Plugin Author

    Posted 1 year ago #

    While leaving the User Menu in its upper right corner ? You could address div#wp-admin-bar-root-default, the container for the left-side menus:

    #wp-admin-bar-root-default {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 1040px;
    }
  10. style960
    Member
    Posted 1 year ago #

    Just tried that, as above, but the menu (main navigation) remained upper left. Also tried removing the max width and increasing the margin and padding...

  11. Guillaume Assire
    Member
    Plugin Author

    Posted 1 year ago #

    Try adding "!Important" to the margins...?

  12. style960
    Member
    Posted 1 year ago #

    Yeah that's working. Thanks for sticking with this :)

  13. Guillaume Assire
    Member
    Plugin Author

    Posted 1 year ago #

    You're welcome.

    FYI and as an outcome of this case study, I've added a setting to limit the width of the items' container #wp-toolbar, so admins can align Toolbar items with page content. Not quite exactly what you end up with, but I thought it could be of interest to others.

    That's in the development version just updated, and will be in next release of the plugin, Styles tab, Toolbar Items section, Max Width.

  14. style960
    Member
    Posted 1 year ago #

    Hi Guillaume,

    The items container sounds like a good idea. I've also had problems aligning items for different screen sizes. Think I have a workaround but any other suggestions would be welcome.

    Do you know why the menu items on the toolbar are aligned differently for visitors and logged in users? If I apply styling to force for visitors, this has a knock-on effect when logged in.

    Your account still works, advice would be welcome :)

    http://falcon.everygoalmatters.com

    Thanks,
    Paul.

  15. Guillaume Assire
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Paul

    Quick question as a preamble, you're not using WPS Toolbar to style the Toolbar, are you ? I'm asking this, because I don't see what would then be added to the page by the plugin, when picking custom CSS from the "Styles" tab.

    There's no real way to get Toolbar items centered that I can think of. As far as your question regarding items alignment - the height of the ab-item should be 40px high, in your case they aren't for visitors, you could try

    #wpadminbar #wp-toolbar > ul > li > a {
        line-height: 40px;
    }

    Actually, I'm not sure why it works for logged-in users, this file adminbar-38.css, is that yours ? Is it loaded for visitors ?

    AG

    PS on wp-login, the link over "ECM" goes to WordPress
    PPS sorry for England. Fingers crossed for France ;)

  16. style960
    Member
    Posted 1 year ago #

    Hi Guillaume,

    I added the CSS you suggested and it was better, but it seems good now after I set the toolbar height in WPS Styles.

    I can't figure out where the hover behaviour over the logo is coming from? I've set the default Login / Register links to display:none and that works, the Logo menu is a custom link with no URL? I'm confused?

    I'll be changing the admin panel and removing the 'Powered by WordPress' text. I intend for the users to never see it once I had some custom redirects.

    England play well and with plenty of passion (despite what some fans think), we lack the edge between winners and losers. I think Rooney called it "nastiness"!

    France look a very good team, quick and well balanced. Really enjoyed the Switzerland game. You look a better team than Brazil or Argentina for sure!

    Can you see what's causing the hover behaviour over the logo?

    Thanks,
    Paul.

  17. Guillaume Assire
    Member
    Plugin Author

    Posted 1 year ago #

    Paul,

    You probably understood from my silence, I don't have the answer to your question about the logo hover, sorry. Ultimately, my only advice would be to force the hover color back to your background color for this item. Like so, obviously untested:

    #wpadminbar .ab-top-menu > li.wp-admin-bar-326:hover > .ab-item,
    #wpadminbar .ab-top-menu > li.wp-admin-bar-326.hover > .ab-item {
        background: #555;
    }

    (But then, your users may miss the link over this item...?)

    Hope This Helps,
    Guillaume

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WP Symposium Toolbar
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic