Download button is all wrong i Resource Manager

[fredrikse]

Hi,

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

 

[dtmcl]

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

 

[fredrikse]

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

 

[Steve F]

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

 

[fredrikse]

I use this CSS code for the sign up button:

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.

 

[Shelley]

I use this CSS code for the sign up button:

<snip>

I believe the download button uses the same CSS because they visually look the same.

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.

 

[Arty]

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:

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.

 

[Arty]

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.

 

[TPerry]

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.

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.

 

[fredrikse]

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:

.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.

 

[fredrikse]

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