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

Download button is all wrong i Resource Manager

Discussion in 'Styling and Customization Questions' started by fredrikse, May 14, 2013.

  1. fredrikse

    fredrikse Active Member

    Hi,

    The download button in Resource Manager does not look good. What's wrong here?

    resource manager.png
     
  2. ShadyX

    ShadyX Well-Known Member

    What style are you using? Post a link (if its a live forum) and I will take a look.
     
  3. fredrikse

    fredrikse Active Member

    The button looks good when I revert to the default style. Any clues what's going on here with the current style?
     
  4. Steve F

    Steve F Well-Known Member

    A link to your site would help, impossible to make any suggestions at the moment
     
  5. fredrikse

    fredrikse Active Member

    I use this CSS code for the sign up button:

    Code:
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #032a46;
    padding: 21px 10px;
    background: -moz-linear-gradient(
      top,
      #ffffff 0%,
      #abe2fc 10%,
      #a1e1ff 28%,
      #29a1d9 95%,
      #204057);
    background: -webkit-gradient(
      linear, left top, left bottom,
      from(#ffffff),
      color-stop(0.10, #abe2fc),
      color-stop(0.28, #a1e1ff),
      color-stop(0.95, #29a1d9),
      to(#204057));
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    border: 4px solid #ffffff;
    -moz-box-shadow:
      0px 1px 3px rgba(000,000,000,0.6),
      inset 0px 0px 3px rgba(93,118,148,1);
    -webkit-box-shadow:
      0px 1px 3px rgba(000,000,000,0.6),
      inset 0px 0px 3px rgba(93,118,148,1);
    box-shadow:
      0px 1px 3px rgba(000,000,000,0.6),
      inset 0px 0px 3px rgba(93,118,148,1);
    text-shadow:
      0px -1px 1px rgba(10,59,94,0.2),
      0px 1px 1px rgba(255,255,255,0.6);
    I believe the download button uses the same CSS because they visually look the same.
     
  6. Shelley

    Shelley Well-Known Member

    You've been asked to provide a link for the following reason. The person who will help can debug the issue as there may be other factors involved. If you post a link directly to the area where this issue is occurring you'll get the usual speedy help.
     
    Tracy Perry and Steve F like this.
  7. Arty

    Arty Well-Known Member

    Your syntax is outdated.

    Gradients code uses old syntax that works only in 2 browser engines and has been deprecated in both those engines. Use this code instead that works in all modern browsers:
    Code:
    background: -webkit-linear-gradient(
      top,
      #ffffff 0%,
      #abe2fc 10%,
      #a1e1ff 28%,
      #29a1d9 95%,
      #204057);
    background: linear-gradient(
      to bottom,
      #ffffff 0%,
      #abe2fc 10%,
      #a1e1ff 28%,
      #29a1d9 95%,
      #204057);
    Also you don't need prefixed versions of border-radius and box-shadow. All browsers support unprefixed syntax.
     
  8. Arty

    Arty Well-Known Member

    But that doesn't cause that issue. Add styling for .downloadButton .minorText. Most likely it uses display:block that causes your button to break into several lines. Change it to inline-block and remove styling.

    Use your browser's developer tools to inspect that element to see what css rules are applied to it.
     
  9. Tracy Perry

    Tracy Perry Well-Known Member

    Apparently he doesn't really want any help as he's logged on since your response and still can't see fit to either post his link or at least put it in his profile. Even lowly me would be happy to try and help, but it IS difficult when the requestor makes it impossible.
    It's a pity that you can't make it so that when someone asks something like this and doesn't reply to a request for a link for help that a big "blow up" notice would appear upon their next logon reminding them that someone would be willing to help if they would just help themselves out a little. :p
     
  10. fredrikse

    fredrikse Active Member

    I do want help very much. But as it is right now you need to be a member to get access to this feature and also placed in a special permission group. However, I think I found the CSS code I was looking for in resource_view_header.css:
    Code:
    .resourceInfo
    {
        overflow: hidden; zoom: 1;
        margin-bottom: 10px;
    }
    
        .resourceInfo .avatar
        {
            float: left;
            margin-right: 10px;
        }
        .resourceInfo h1
        {
            @property "h1";
            font-size: 18pt;
            overflow: hidden;
            zoom: 1;
            @property "/h1";
        }
        .resourceInfo .primaryLinks
        {
            float: right;
            margin-left: 10px;
            min-width: 180px;
        }
     
            .resourceInfo .primaryLinks.noButton
            {
                min-width: 0;
                margin-top: 5px;
            }
            .resourceInfo .primaryLinks li
            {
                text-align: center;
                margin-bottom: 5px;
            }
            .resourceInfo .primaryLinks li:last-child
            {
                margin-bottom: 0;
            }
        .resourceInfo small.minorText
        {
            display: block;
            font-size: 11px;
            font-weight: normal;
        }
    .downloadButton
    {
        @property "signupButton";
        background-color: white;
        padding: 3px;
        margin: 15px 30px;
        text-align: center;
        line-height: 30px;
        display: block;
        cursor: pointer;
        height: 30px;
        @property "/signupButton";
        margin: 0;
        line-height: normal;
        height: auto;
    }
    .downloadDisabled
    {
        border-color: @mutedTextColor;
    }
        .downloadButton .inner
        {
            @property "signupButtonInner";
            font-weight: bold;
            font-size: 11pt;
            font-family: @button.font-family;
            color: @textCtrlBackground;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 16px;
            color: #032a46;
            padding: 21px 10px;
            background: -moz-linear-gradient(
      top,
      #ffffff 0%,
      #abe2fc 10%,
      #a1e1ff 28%,
      #29a1d9 95%,
      #204057);
            background: -webkit-gradient(
      linear, left top, left bottom,
      from(#ffffff),
      color-stop(0.10, #abe2fc),
      color-stop(0.28, #a1e1ff),
      color-stop(0.95, #29a1d9),
      to(#204057));
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            border-radius: 8px;
            border: 4px solid #ffffff;
            -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.6),
      inset 0px 0px 3px rgba(93,118,148,1);
            -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.6),
      inset 0px 0px 3px rgba(93,118,148,1);
            box-shadow: 0px 1px 3px rgba(000,000,000,0.6),
      inset 0px 0px 3px rgba(93,118,148,1);
            text-shadow: 0px -1px 1px rgba(10,59,94,0.2),
      0px 1px 1px rgba(255,255,255,0.6);
            @property "/signupButtonInner";
            padding: 3px 10px;
        }
     
        .downloadButton.purchase .inner
        {
            padding: 6px 10px;
        }
        .downloadButton:hover .inner
        {
            @property "signupButtonHover";
            text-decoration: none;
            background-color: @secondaryLight;
            @property "/signupButtonHover";
        }
        .downloadButton:active
        {
            @property "signupButtonActive";
            box-shadow: 0 0 3px rgba(0,0,0, 0.2);
            position: relative;
            top: 2px;
            @property "/signupButtonActive";
        }
        .downloadDisabled .inner,
        .downloadDisabled:hover .inner
        {
            background-color: @mutedTextColor;
            color: white;
        }
    .resourceAlerts
    {
        border: 1px solid @primaryLighterStill;
        border-radius: 5px;
        font-size: 11px;
        margin: 10px 0;
        padding: 5px;
        line-height: 16px;
        background-image: url('@imagePath/xenforo/gradients/form-button-white-25px.png');
    }
        .resourceAlerts .icon
        {
            float: right;
            width: 16px;
            height: 16px;
            margin-left: 5px;
            background: url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat -1000px -1000px;
        }
         
                .resourceAlerts .deletedAlert .icon { background-position: -64px -32px; }
                .resourceAlerts .moderatedAlert .icon { background-position: -32px -16px; }
    I'm going to play around a bit and see what parameter that needs to be altered here.
     
  11. fredrikse

    fredrikse Active Member

    Any good ideas how to solve this issue? Haven't been able to sort this glitch out myself :)
     

Share This Page