Download button is all wrong i Resource Manager
- Thread starter fredrikse
- Start date
I use this CSS code for the sign up button:
I believe the download button uses the same CSS because they visually look the same.
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.
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.
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:
Also you don't need prefixed versions of border-radius and box-shadow. All browsers support unprefixed syntax.
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.
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.
Use your browser's developer tools to inspect that element to see what css rules are applied to it.
TPerry
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.
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:
I'm going to play around a bit and see what parameter that needs to be altered here.
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; }
