Skip to:
Content
Pages
Categories
Search
Top
Bottom

How to move the notifications bubble from right to left?

  • Avatar of Shahzaib Sabir
    Shahzaib Sabir
    Participant

    @shahzaib147

    I want to move the buddypress notifications bubble from right to left side of the admin bar and in place of it wanted to add another link..
    tried firebug but this moves all, whereas i want to move only bubble.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Avatar of Shahzaib Sabir
    Shahzaib Sabir
    Participant

    @shahzaib147

    @hnla your dp looks ugly to me but i ‘ll love this if you plz solve my problem. seriously, please.

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

    @shahzaib147 your dp looks ugly to me

    What!

    Just managed to misread your requirement. Not sure what ‘bubble’ refers to but if you mean the profile links on adminbar on the extreme right that isn’t going to be so easy to do and adding a new link ? Where? on it’s own? that would be¬† WP function really using the add_node function¬† for the WP adminbar

     

    To move the profile links from right to left:

    #wp-admin-bar-top-secondary.ab-top-secondary {float: left;}

     

    To add links you need to check the WP codex or search this forum as there is a current topic in a similar vein – ading links to adminbar.

    Avatar of Shahzaib Sabir
    Shahzaib Sabir
    Participant

    @shahzaib147

    On the extreme right side there is profile link and beside it there is a notifications link.
    I want just the notification link to float right.

    Secondly, i want to add the link on the extreme right side. I tried search and still trying and i even did a lot of experiments but because of my beginner stage i could not manage to do what i want.
    I could only add a link on the left side but not on the right side.

    The thought is simple, as facebook has “Home” beside “profile link” and “notifications” on the left side. same is i want.

    here is a photo link you may understand better:

    http://wstest.tk/wp-content/uploads/2013/03/sshot-2.png

    Avatar of Shahzaib Sabir
    Shahzaib Sabir
    Participant

    @shahzaib147

    @djpaul @hnla please do help any one. please..

    Avatar of danbpfr
    danbpfr
    Participant

    @chouf1

    hi @shahzaib147,

    Moving the notification count to left.
    Replace the notification on the right with a link.

    Here is my solution !

    Copy/paste the code from

    http://bp-fr.net/BuddyBin/?4cf895a4c5dc62dd#EFIRmbV3LYBFSHHpXiP7oYoar9B4ZYfwi5UP5GmpIk4=

    and you’ll be done !

    Avatar of Shahzaib Sabir
    Shahzaib Sabir
    Participant

    @shahzaib147

    @chouf1 thank you. This really works.
    Is there any idea that it works the same for the front end of the website too?
    I mean by applying the above code the counter moves at the back end bar but when visits the front end there, at bar, the counter still remains on the right side.
    I would love to listen. Again, thank you so much.

    Avatar of danbpfr
    danbpfr
    Participant

    @chouf1

    @shahzaib147, so far i know there is only one Toolbar in WP

    If the code works on the backend bar it should also work on the frontend !
    That’s the case on my test site. Have you refreshed the page (F5) ?

    Or have you an extra theme with an extraaaaaa Toolbar ? Give more details about your config or a picture, because i don’t see what you’re talking about.

    Avatar of Shahzaib Sabir
    Shahzaib Sabir
    Participant

    @shahzaib147

    @chouf1 I think i detect the problem. The conflict was, because i added the following code to my style.css to float a link(wstest.tk) on extreme right of the buddypress bar. `#wpadminbar li {
    float: right;
    }`

    When i remove the code from style.css this works.

    Is there any code, by applying i could float a link to right instead of applying the above code, which floats all the links from left to right?

    Here is the link of my test website http://wstest.tk/
    Username: test
    password: test

    @chouf1 Please have a look into and tell whether you could help me? plz..

    Avatar of danbpfr
    danbpfr
    Participant

    @chouf1

    i know BP, no need to give me a test user access: that have no effect on your code.

    You removed many things in the toolbar i guess. So i would recommand you reload a fress bp-default folder, with untouched css at least.

    Apply the code and don’t touch the css! and come back with questions.

    Avatar of Shahzaib Sabir
    Shahzaib Sabir
    Participant

    @shahzaib147

    I understand, as i said earlier your given code works well if i do not apply this

    `#wpadminbar li {
    float: right;
    }`

    to style.css to float some other link to right.

    Please do tell if you have any other good option to add a link on extreme right of the bar rather than what i am using.

    Avatar of danbpfr
    danbpfr
    Participant

    @chouf1

    the extrem right of the bar is occupied by the search box, who normally appear when you’re on the front -end.

    So the limit on the rigth is at the left of the HowDy witch ends with the user avatar. At the right of the avatar is some jquery for the search box. And it’s better you don’t try to touch this, if you don’t know what you make.

    Be also aware that CSS styling begins always on the left top corner, because it’s the only common point of the multiple existing screen sizes.
    The #wpadminbar li applies to any list on the Toolbar. So your CSS in completly false and unusable as is.

    Avatar of Shahzaib Sabir
    Shahzaib Sabir
    Participant

    @shahzaib147

    So could i add a link beside HowDy? if it is then placing the code here will be a good thought.please.

    Avatar of danbpfr
    danbpfr
    Participant

    @chouf1

    So could i add a link beside HowDy?

    you have the solution for that in the code i linked to in a previous answer ! ;-)

    The link is called extra link in the example and it goes close to the left of the howdy. You couldn’t have it on the right, as already explained.

    Read a little more carefully, please ! :evil:

    Avatar of Shahzaib Sabir
    Shahzaib Sabir
    Participant

    @shahzaib147

    @chouf1 Thank you. Thank you so very much. You proved a blessing for me.

    There was the problem because i was some code in my style.css which was causing a little conflict with the code you provide.

    I manage finally, thanks a lot. Marked as resolved :)

Viewing 14 replies - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.