trying to alter a sites color with Stylish but some elements refuse to change

Question

the element that won't change is in this page (http://www.animefansftw.org/community/threads/fate-kaleid-liner-prisma%E2%98%86illya-3rei.641/add-reply) the code that doesn't seem to take effect is

 body[style="overflow-y: hidden; min-height: 259px; background: black none repeat scroll 0% 0%;"]
 {
   background: blue !important;

 }

my real questunion is why it doesn't work & how to make it work

my Style(FF v47.0.1) @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("animefansftw.org")
{
  a:link{color: #b7e2fb !important;}
  a:visited{color: #1eadff !important;}
  a:hover{color: green !important;}
  a:active{color: red !important;}


 *, body, #content-wrapper, #footer-widgets,
 single-post,.discussionList .discussionListItem.sticky .posterAvatar,
 .discussionList .discussionListItem.sticky .stats,
 .discussionList.discussionListItem.moderated .listBlock,
 .discussionListItem.InlineModChecked .posterAvatar,
 .discussionListItem.InlineModChecked .main,
 .discussionListItem.InlineModChecked .stats,
 .discussionListItem.InlineModChecked .lastPost,
 .discussionListItem.moderated.InlineModChecked,
 .discussionListItem.deleted .posterAvatar
 {
   background: black;
   color: white !important;
 }

 .footer-widgets-border-left, #DiscussionListOptionsHandle a
 {
   background: #00004d;
 }

 .footer-widgets-border-right
 {
   background: #000080;
 }

 img[alt="default"]
 {
   -webkit-filter: invert(100%);
   filter: invert(100%);
 }

 .cat-list li.ep-title:hover
 {
   background: gray !important;
   border-left: 5px solid #f5f211;
   border-right: 5px solid #1143f2;
 }

 li.ep-title
 {
   margin: 0 !important;
   background: black !important;
   border-bottom: 3px solid #00004d;
   border-left: 0px solid transparent !important;
   border-right: 0px solid transparent !important;
 }

 .dl-box
 {
   background: black;
   border: 1px solid black;
   box-shadow: -10px -10px 5px 0px #00004d;
 }

 .dl-title
 {
   background: -moz-linear-gradient(45deg, #00004d, blue, blue, #00004d);
 }

 .post-date .date, #social-wrapper, #nav, h3.newanimetitle,
 #footer-bottom, .hasFlexbox .nodeList .categoryStrip,
 .hasFlexbox .sidebar .visitorPanel .secondaryContent,
 .sidebar .section .secondaryContent,
 .threadListSeparator,.discussionList .sectionFooter
 {
   background: -moz-linear-gradient(top, #00004d, #000080, #000080, #00004d) no-repeat !important;
 }

 .dl-item
 {
   background: #1a1a1a;
 }

 #header-bottom
 {
   float: left;
   background: url("http://puu.sh/2b5au.jpeg") #000000 !important;
   width: 980px;
   height: 165px;
 }

 #respond textarea
 {
   font-family: "Times New Roman", Times, serif;
   font-size: large !important;
   background: #00001a !important;
   border: 1px solid #00004d !important;
 }

 .nodeList .node.level_1
 {
   background: #00001a !important;
   box-shadow: 1px 2px 3px #00001a;
 }

 .nodeList .categoryStrip
 {
   border-top: 2px solid blue;
 }

 .hasFlexbox .node.level_2 .nodeInfo, .visitorPanel .stats dl,
 .blendedEditor .redactor_box .redactor_toolbar
 {
   background: 0;
 }

 .hasFlexbox .message .messageUserInfo
 {
   background: #00001a !important;
 }

 div[style="background: #eeeeee; width: 620px; margin: 0 auto; padding:15px; font: 10pt italic; border: 1px solid #333333;"],
 .message .dark_postrating.likesSummary, .dark_postrating
 {
   background: rgb(0, 0, 26) none repeat scroll 0% 0% !important;
 }

 .quickReply,.mainContainer .mainContent, .mainContainer_noSidebar
 {
   background: #00001a;
   border-top: 2px solid #000080;
 }

 .blendedEditor .redactor_box .redactor_toolbar, .messageList .message
 {
   border-top: 2px solid #000080;
 }

 body[style="overflow-y: hidden; min-height: 99px;"],
 .submitUnit .button, .redactor_toolbar
 {
   background: rgb(0, 0, 26) none repeat scroll 0% 0% !important;
 }

 element, body[style="overflow-y: hidden; min-height: 259px; background: black none repeat scroll 0% 0%;"]
 {
   background: blue !important;

 }

}

score 0 · Answer 1 · answered Jul 23 '16 at 08:55

0

Remember the basic rule of css hierarchy for implication and importance:

Inline - highest importance
Internal
External

To my understanding of css, and Whatever I am able to get from your code is you have first implied a css property as !important to a parent element, and then might have used something on child.

Though remember it will not show its impact even on implying !important, as it is under that parent property. So, you need to write inline css for it, though not recommended.

e.g: if font-size is set as 15px!important to parent itself, then an inline css is used to change font-size of a child.

The best rule I follow is never imply !important property until it is the last possible solution. You can use better and unique names for your classes and ids, if you are worried it will get disturbed with some other piece of code.

answered Jul 23 '16 at 08:55

Anant

534
11
40

You say something takes precedence, like in the source something is telling the box to be white !important, lets say it is so (can't look right now), what I do to overwrite it? tried even a specific selector !important & it still didn't did it – user2598826 Jul 26 '16 at 06:25
as I said, try implying inline css in html element directly. e.g:
If it then reflect changes, then chances are that some parent element is showing its properties right now,
– Anant Jul 26 '16 at 11:26
1

maybe I donn't get you,are you teling me to alter the html code?, not my site, I'm only writing a "Stylish" style, mainly for myself (maybe would share in the "Stylish" site. – user2598826 Jul 27 '16 at 19:44
yes I am telling you to alter HTML code. Ok if this is not possible, try to find any important property that you have given to parent element. In your case its 'background' property. What I am getting is, you have applied important property to parent, then again giving important property to child. This won't work at external/internal level css – Anant Jul 28 '16 at 07:33

trying to alter a sites color with Stylish but some elements refuse to change

1 Answers1