Help on Userstyle

[DrStyles]

.

 

[Xorifelse]

This has been posted in the General Tech help, while this is obviously a web designing question. In the future post it there.


You don't seem to understand css selectors, also I suggest you do some study about the XHTML or HTML 5 and CSS 3.0

To put it simple, you should use HTML only for website structure. Don't ever give color or layout inside your HTML page this should be done with Css. Neither HTML and CSS are designed for this mixture. 1 is made for structure and the other for layout. This way, we can have languages such as Javascript easily select elements from the HTML website without any layout data.

Now a css selector works a little like this. You grab an HTML element and compare it's attributes to the value.

<div id="meh">Without the css file, this sure looks boring plain ol'text!</div><div class="hmm">So just make sure you never style your page in HTML!</div>

div[id="meh"]{ color: red; }

Currently, the only attribute is id. You can compare that attribute from an element with css called selectors, but I guess you figured that out already.

So, what use is this? I mean, this can also be done doing "#meh" and ".hmm" , well you can just compare other attributes with the same class for example such as:

<input type="checkbox" disabled="disabled" /><input type="checkbox" />

input[disabled="disabled"]{ background-color: red; }

This would give a disabled checkbox a red background color, without styling this code inside the HTML page.

Once you get better at this stuff, I suggest you taking a look with jQuery. It is a great Javascript library which allows you to do what you wanted to do in the first place. This is however a little complicated when your DOM document isn't made correctly.

 

[DrStyles]

.

 

[Xorifelse]

huh? It's your site not mine. I don't know anything about web designing. >.<
I'm saying your topic is posted in the wrong section, this is css which is related to web-designing, and there is a forum here that suits the category.


I'm pretty nub here. Didn't really get what you were saying. Nothing seems to be there
Actually, there is. As I said before you should not use html for layout and styling your text, etc. This should only be done with css.
In your example, you write:

div,[color="#E1E4F2"]

The comma there is wrong, so I think you meant:

div[color="#E1E4F2"]

Now you are looking for a div with a color attribute with the value "#e1e4f2", however this says you are styling your text with html instead of css, which is wrong.

This doesn't work
Well, the css styling code is a bit undetectable by the eye since the background is usually already transparent. Try changing the background color to red, or give it a border color.
If that still doesn't work, I guess it's not working for the two attributes of class and id since they are already accessible with "." and "#".

I've done some, but I'm too lazy to actually understand it. This usually works for what I want to do. It was working, but then I couldn't get some text different colors.
If you're too lazy, I suggest you quit cause there is a lot to know. If you just want to make a simple website I suggest you keep it simple.

Ya, but then I wouldn't be able to choose which ones are red while disabled. I need to make this part I'm typing in remain "untouched" while everything else is changed, but I don't want to have to choose everything else and change it. Basically I just need to choose everything that lightblue color except a few things and change the background/text. Is this making sense, or and I just making a fool of myself again?
It is possible, as I previously said you can access it with javascript using jQuery. There are a couple of other Javascript library's out there, but jQuery is really powerful and simple.

With jQuery you can select html elements and fetch their attributes, compare and set and or change in just a few lines of code.

Like why doesn't this work to override my previous line? Is there a way to set priorities?
The previous line is ignored because the syntax is invalid. It needs an element to search an attribute.

td[width="95%"]{background-color: white !important;}
td[colspan="15"]{color: black !important;}

Prioritizing is done with !important, so you're on the right track there.

 

[DrStyles]

.

 

[codemonkey]

div,
{color:#ccc !important;
background-color: transparent !important;}

That works because you're declaring two different selectors. Just use

*[color="#E1E4F2"]
{color:#ccc !important;
background-color: transparent  !important;}

This is probably because it's not a div that has the color property, but you'd have to show the HTML to be sure.

 

[Xorifelse]

that why I put the coma.
>> ^Does... I'm confused (
Right, and again I still say the comma is placed wrong. The reason why it worked is because you where selecting a div and I repeat ONLY a div element. The comma in CSS allows you to select multiple elements and set the same style for each element selected.

div,[color="#E1E4F2"]

In here, you are selecting a div element and for the next part behind the comma is not valid CSS syntax and thus it is ignored.

So the only "valid" code I can make from this is:

div[color="#E1E4F2"]{}

Where that code would work for:

<div color="#E1E4F2"></div>

However, this code suggest you style your code with HTML and this is wrong and would not even validate as any recent HTML standards through w3.org.
What this means, is that most likely the page will render differently in most browsers. Where IE would probably support this FireFox, Chrome, Safari would most likely not.

You mean like a DOM inspector??
You could see it like that, in here there are clickable elements that can collapse, etc. Elements have attributes, attributes have values and with JavaScript you have access to all of them. jQuery however makes it very easy to select, modify any data inside the DOM. Not only that, you have also access to the style sheet, and with some proper coding you can compare the color through Javascript instead by making invalid HTML code.

Well, I can do most of what I want, but whenever there isn't "td,ul,li,tr.. etc" in front I can't select it. For example I can select td[class="vbmenu_control"] , but not <form method="post" action="/index.php"> or <select name="count" onchange="this.form.submit()">\
1 easy fix, the other one should have been obvious.

<form name="mystylingform" method="post" action="/index.php">
  <select name="count" onchange="this.form.submit()" />
</form>

form[name="mystylingform"]{} /* 1 easy fix just by adding a specific unique name */
select[name="count"]{} /* or */ form select[name="count"]{} /* or */ form[name="mystylingform"] select[name="count"]{}
/*
  From a simple static to a more dynamic specific way to a very specific selection of an element.
  Without the command and just a space, it searches for the last divined element withing the previous defined element.
*/

I don't see what's wrong with it. Any td with width=95% will have a backround-color: of white.

I mean, if I select a group of element, change it (say to background-color black) then I select and element in the group, and change it (like to background-color white) then why doesn't the White show up? Or at least it seems like I can't change elements inside groups. Good to know I'm on the right track with something >.<
Perhaps it is your extensive use of !important, I've never really used it a lot to fully understand the behavior of this tag and neither did I have any reason to use this. !important has it's uses, for example I suggest you play around with this snippet moving !important to different fields.

<table>
  <tr>
    <td>asd</td>
    <td class="meh" id="hem" style="color: #AC1">asd</td>
  </tr>
</table>

#hem{ color: #F1A; }
.meh{ color: #987 !important }
table tr td{ color: #456; }

However coding like this example makes you pretty bad at web designing I think, this is the only practical use of !important. What I'm trying to say is that it's maybe your overly used !important tags and you should only use it when you really need to.

Anyways, how I should solve this table issue is pretty simple. Use different elements inside the table.
In a table, you can add more elements than just tr and td. Take a look at thead, tbody, tfoot, th, colgroup, caption. With these elements it's probably easier to style your table without giving everything names or id's, which would be a second alternative.


Also, keep in mind that if something does not work it doesn't have to mean that your code is bugged, it can just as easily be the browser not function correctly.

That works because you're declaring two different selectors. Just use

*[color="#E1E4F2"]
{color:#ccc !important;
background-color: transparent  !important;}

This is probably because it's not a div that has the color property, but you'd have to show the HTML to be sure.

Right and wrong, never, EVER, NEVER style your page with html, color is not even a valid attribute anymore. There's a big chance the browser won't even support it anymore.

 

[DrStyles]

That works because you're declaring two different selectors. Just use

Code:

*
{color:#ccc !important;
background-color: transparent !important;}

This is probably because it's not a div that has the color property, but you'd have to show the HTML to be sure.

You see, this doesn't work though. Try for yourself. It has the same effect as

div[color="#E1E4F2"]
{color:#ccc !important;
background-color: transparent  !important;}

What this means, is that most likely the page will render differently in most browsers. Where IE would probably support this FireFox, Chrome, Safari would most likely not.

This is for Stylish (for FireFox) As far as I know, only Mozilla based browsers have Stylish.

div[class="tborder tcat tab_header"],div[id="visitor_messaging"],ol[id="message_list"]
{background-color: transparent !important; border: none !important;}

Things like this.. Why doesn't this work? If I said: {padding: 0px} it hides it, which means I've selected it...


But for now the most important thing for me to fix is the color of text in textboxes. Right now it's hard, because when I am previewing my userstyle I can't see what I'm typing. >.>



(for now I'm settling with

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

popup:not(#autoscroller), menupopup
{background-color: white !important;}

menuitem[disabled="true"]{color:#aaaaaa !important;}

for my menus, but if anyone knows how to get it back to original I'll use that.)

 

[codemonkey]

Sounds like the site that this is being used on has inline CSS styling that uses !important.