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

XF 1.5 extra.css not working

Senpai

Formerly RamzanHD
#1
im not really sure if this is a bug or i was the one who caused it but whenever i add code to extra.css my forum doesn't read it
Code:
/* shake it baby */
@-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:hover,
.shake:focus {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.shake {
display:inline-block
}

/* editor message */
.wnr2 {
color: #99a0a8;
}
.c_bad {
color: red;
}



.awesome {
      font-family: futura;
      font-style: italic;
      width:100%;
      margin: 0 auto;
      text-align: center;
      color:#f20000;
      font-size:16px;
      font-weight: bold;
      -webkit-animation:colorchange 3s infinite alternate;
    }

    @-webkit-keyframes colorchange {
      50% {
       
        color: red;
      }
     
      100% {
       
        color: #17687c;
      }



}
::-webkit-scrollbar {
    background: #2c2c2c; 
    width: 12px;

}
::-webkit-scrollbar-track {

}
::-webkit-scrollbar-thumb {
    background: #17687c; 
    -webkit-box-shadow: inset 0 0 6px rgba(23, 104, 124); 
}
::-webkit-scrollbar-thumb:hover {
    background: #17687c; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0,0,0,0.6); 
}
@-webkit-keyframes headershine {
    0%        { opacity: 0.4; }
    50%        { opacity: 1; }
    100%     { opacity: 0.4; }
}

/* User Rank Images: Prolapse */
.userrank {
    display: block;
    margin-left: 16px;
}

.ownerinfo {
    border-top: 1px dotted #000;
    display: block;
    margin-left: 4px;
}

.message .messageUserBlock .userBanner { display: none; }




}

.pleasesearchbeforeask {
    width: 151px;
    padding: 4px 0px;
    text-align: center;
    border-radius: 3px;
    font-size: 11px;
    text-shadow: none;
    text-transform: uppercase;
    margin: 0 auto;
    font-weight: 500;
    background: #131313;
    color: #00fa2f;
    margin-right: 29px;
    text-shadow: 0px 0px 8px #00fa2f;
    position: absolute;
    right: -29px;
    width: 148px;
    /* wolfs css dont change */
}

.ramzan {
    padding: 6px 457px;
    text-align: center;
    border-radius: 0px;
    font-size: 11px;
    text-shadow: none;
    /* margin: 0 auto; */
    font-weight: 510x;
    background: #f17405;
    color: #000000;
    margin-right: -178px;
    right: 50px;
    margin-left: -18px;
    text-decoration: none;
    /* wolfs css dont change */ 
    }
nothing seems to work it was working before but not anymore damn :( could someone please help
 

Russ

Well-known member
#3
Try adding !important right before every ;
That's not exactly how it works, !important doesn't need to be used all the time. If XenForo has say...

Code:
.messageText { font-size: 12px; }
Rather than putting an important! you could just use a higher CSS selector.

Code:
.message .messageText { font-size: 14px; }
Giving your CSS the higher priority.

@Senpai I'm seeing an extra closing bracket after: .message .messageUserBlock .userBanner { display: none; } which could cause some problems.
 

Senpai

Formerly RamzanHD
#4
That's not exactly how it works, !important doesn't need to be used all the time. If XenForo has say...

Code:
.messageText { font-size: 12px; }
Rather than putting an important! you could just use a higher CSS selector.

Code:
.message .messageText { font-size: 14px; }
Giving your CSS the higher priority.

@Senpai I'm seeing an extra closing bracket after: .message .messageUserBlock .userBanner { display: none; } which could cause some problems.
thanks for trying to help me out bro im gonna look at that now :)
 

Senpai

Formerly RamzanHD
#5
That's not exactly how it works, !important doesn't need to be used all the time. If XenForo has say...

Code:
.messageText { font-size: 12px; }
Rather than putting an important! you could just use a higher CSS selector.

Code:
.message .messageText { font-size: 14px; }
Giving your CSS the higher priority.

@Senpai I'm seeing an extra closing bracket after: .message .messageUserBlock .userBanner { display: none; } which could cause some problems.
ahh ******** it still didn't work what is causing this yesterday it was fine and now it decided to break
 
#7
@Senpai I know this might seem obvious but sometimes the obvious things are the easiest to miss...Are you sure you are adding to the EXTRA.css of the current theme and not another theme you have installed?
 
Last edited:

Chris D

XenForo developer
Staff member
#9
Can you provide a URL where this code can be seen in action and explain what the expected results are?
 

Optic

Well-known member
#15
You must have a typo or missing opening/closing { } somewhere..

Copy and paste your whole EXTRA.CSS into a text file on your device, then empty EXTRA.CSS on your XenForo..

Then slowly add each section one by one - you should be able to find the typo that way..
 

Optic

Well-known member
#16
Also font-weight in .ramzan has a typo, you're missing px:

Code:
.ramzan {
    padding: 6px 457px;
    text-align: center;
    border-radius: 0px;
    font-size: 11px;
    text-shadow: none;
    /* margin: 0 auto; */
    font-weight: 510x;
    background: #f17405;
    color: #000000;
    margin-right: -178px;
    right: 50px;
    margin-left: -18px;
    text-decoration: none;
    /* wolfs css dont change */
    }
 

Mr Lucky

Well-known member
#19
@Senpai you have a "}" two lines below this css line:
.message .messageUserBlock .userBanner { display: none; }
Yes. This was mentioned by Russ in post #3 so presumably Senpai fixed that. If not then that does explain everything.

An extra curly bracket will screw the whole thing.

These things can be sorted by removing all code and adding back in bit by bit, or check the code here:

http://jigsaw.w3.org/css-validator/