Black Responsive User Banner Modification

Discussion in 'XenForo 1 Support' started by ibenick, Feb 23, 2018.

  1. ibenick

    ibenick New Member

    Arty,

    I'd like to customize the user banner in Black Responsive so that it only shows a small graphic. I've been playing with changing it in Extra.css but I'm not having much luck. I know this is out of the realm of support, but is there any chance you could point me in the right direction?

    I have already assigned it a custom style and have these classes controlling it but all I've really been able to do is halfway hide the existing banner.

    Code:
    .userBanner.bcp-style
    {
    background-color: #none;
    border-bottom: none;
    background-image: url('https://backcountrypost.com/uploads/lifetime-grey.png'); background-repeat: no-repeat; background-attachment: fixed;                   
    background-repeat: no-repeat;
    }
    This is the image I'd like to replace the banner with:
    https://backcountrypost.com/uploads/lifetime-grey.png

    Side note - I'm super stoked for your upcoming XF2 styles! Keep up the awesome work!
     
  2. Arty

    Arty Administrator Designer

    First line could be causing problems. Remove #

    Also try adding height and remove background-attachment.
     
  3. ibenick

    ibenick New Member

    Thanks, Arty! That got me where I needed to be. One last question, do you know how I can hide the text in the user badge? I tried just deleting it in the control panel but that then hides the badge entirely. I checked code and couldn't find a class in which to assign display: none to.
     
  4. Arty

    Arty Administrator Designer

    Code:
    .userBanner.bcp-style strong { opacity: 0; }
     
  5. ibenick

    ibenick New Member

    Awesome. Thanks so much!
     
  6. ibenick

    ibenick New Member

    Sorry, one more question. I've been trying and trying to figure this out but I'm stumped.

    By default, the background image shows up like below, to the left of where it should be. If I add "background-position: center center;" it fixes it on the desktop view in threads, but it then indents it to the right on the user profile page and in the threads on mobile devices. I've been trying to find a way to only assign the background-position to the desktop thread view but nothing is working. Any thoughts? And do you have a donation button somewhere for your help?

    positioning.jpg
     
  7. ibenick

    ibenick New Member

    Or perhaps a paypal address I can send a payment for your assistance?