1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Responsive Custom Banner Styles

Discussion in 'Styling and Customization Questions' started by Ji2myTran, Oct 18, 2013.

  1. Ji2myTran

    Ji2myTran Active Member

    Hi Guys,

    I'm using these custom CSS class names for the banner styles:

    Code:
    /* User group banners */
    .userBanner {margin-left: 0 !important; margin-right: 0 !important;}
    .userBanner.wrapped span.after, .userBanner.wrapped span.before {display: none;}
    
    .admin-rank {
      background: none #ea8b8b;
      border: 1px solid #b54b4b;
      padding: 2px 0 2px 0;
      color: white;
      text-shadow: 0 0 1px #500f0f;
      text-align: center;
      font-size: 11px;
      border-radius: 0;}
    
     .member-rank {
      background: none rgb(249, 249, 249);
      border: 1px solid #888;
      padding: 2px 0 2px 0;
      color: #333333;
      text-shadow: 0 0 1px rgb(249, 249, 249);
      text-align: center;
      font-size: 11px;
      border-radius: 0;} 
    .supermod-rank {
      background: none #00adff;
      border: 1px solid #176093;
      padding: 2px 0 2px 0;
      color: #ffffff;
      text-shadow: 0 0 1px #a1d9ef;
      text-align: center;
      font-size: 11px;
      border-radius: 0;} 
    .vip-rank {
      background: none #c68ae2;
      border: 1px solid #9862b2;
      padding: 0 5px;
      color: white;
      text-shadow: 0 0 1px #500f0f;
      text-align: center;
      font-size: 11px;
      border-radius: 0;}
    
    
    How can display it in responsive version with the same style? I mean what exactly responsive codes that i should put in extra CSS?

    Thanks!
     
    Last edited: Oct 18, 2013
  2. Brogan

    Brogan XenForo Moderator Staff Member

    It displays exactly the same no matter the browser width.

    It does on my site at least.
     
  3. Ji2myTran

    Ji2myTran Active Member

    I was tried to put:

    Code:
    <xen:if is="@enableResponsive">
    
    ABOVE CSS CODES
    
    </xen:if>
    in EXTRA.CSS to display it in responsive version, but it is not display correctly.
     
  4. Ji2myTran

    Ji2myTran Active Member

    @Brogan :

    Sorry Brogan, i was just edited the CSS code in the #1 Post
     
  5. Ji2myTran

    Ji2myTran Active Member

    To explain more details, plz see both of the displays in mobile and browsers:

    Responsive display:

    responsive-display.jpg

    Browser display:

    broswers-display.jpg

    Actually, not much different but i didn't put any border-top-left-radius and border-top-right-radius in the codes, but seems it has something to do with responsive version.
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    Try adding !important to the border-radius.

    I have no border radius on my style at all which is why it doesn't do that.
     
    Ji2myTran likes this.
  7. Ji2myTran

    Ji2myTran Active Member

    Yep, it is okay now, thanks Brogan :)
     

Share This Page