Custom CSS in firefox

Status
Niet open voor verdere reacties.
Janklep

Janklep

Gebruiker
Lid geworden
17 nov 2006
Berichten
300
Hallo,

Ik wil graag voor een site een custom CSS maken, die ik dan kan gebruiken. Het is dus niet mijn site, maar wil wel graag de lay-out aanpassen.
Je schijnt dat dan in het userContent.css bestand te moeten zetten. Het werkt echter bij mij niet. Ik kan er neerzetten wat ik wil, maar er gebeurt niets.

Als ik bijvoorbeeld hier op helpmij, de usernames groter zou willen laten weergeven, dan zet ik er het volgende neer:
Code: 
@-moz-document domain("helpmij.nl") {

/**
* vBulletin 3.8.1 CSS
* Style: 'Helpmij stijl'; Style ID: 11
*/
body
{
	background: #FFFFFF;
	color: #000000;
	font: 10pt arial;
	margin: 0px 0px 0px 0px;
	padding: 0px;
}
a:link, body_alink
{
	color: #000000;
	text-decoration: underline;
}
a:visited, body_avisited
{
	color: #4B4B4B;
	text-decoration: underline;
}
a:hover, a:active, body_ahover
{
	color: #FF0000;
	text-decoration: underline;
}
.page
{
	background: #FFFFFF;
	color: #000000;
	font-family: arial;
}
td, th, p, li
{
	font: 10pt arial;
}
.tborder
{
	background: #8097B0;
	color: #000000;
	font-family: arial;
	border: 1px solid #8097B0;
}
.tcat
{
	background: #005080;
	color: #FFFFFF;
	font: bold 11pt arial;
}
.tcat a:link, .tcat_alink
{
	color: #ffffff;
	text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
	color: #ffffff;
	text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
	color: #FFFF66;
	text-decoration: underline;
}
.thead
{
	background: #005080;
	color: #FFFFFF;
	font: bold 11px arial;
}
.thead a:link, .thead_alink
{
	color: #FFFFFF;
}
.thead a:visited, .thead_avisited
{
	color: #FFFFFF;
}
.thead a:hover, .thead a:active, .thead_ahover
{
	color: #FFFF00;
}
.tfoot
{
	background: #8097B0;
	color: #000000;
	font: bold 11px arial;
}
.tfoot a:link, .tfoot_alink
{
	color: #000000;
}
.tfoot a:visited, .tfoot_avisited
{
	color: #000000;
}
.tfoot a:hover, .tfoot a:active, .tfoot_ahover
{
	color: #FFFF00;
}
.alt1, .alt1Active
{
	background: #F3F3F3;
	color: #000000;
	font: bold 13px arial;
}
.alt2, .alt2Active
{
	background: #F3F3F3;
	color: #000000;
	font: 11px arial;
}
.inlinemod
{
	background: #FFFFCC;
	color: #000000;
	font-family: arial;
}
.wysiwyg
{
	background: #F5F5FF;
	color: #000000;
	font: 10pt arial;
}
textarea, .bginput
{
	font: 10pt arial;
}
.bginput option, .bginput optgroup
{
	font-size: 10pt;
	font-family: arial;
}
.button
{
	font: 10px arial;
}
select
{
	font: 11px arial;
}
option, optgroup
{
	font-size: 11px;
	font-family: arial;
}
.smallfont
{
	font: 10px arial;
}
.time
{
	color: #000000;
	font-family: arial;
}
.navbar
{
	font: 11px arial;
}
.highlight
{
	color: #FF0000;
	font-family: arial;
	font-weight: bold;
}
.fjsel
{
	background: #F3F3F3;
	color: #000000;
}
.fjdpth0
{
	background: #F7F7F7;
	color: #000000;
}
.panel
{
	background: #F3F3F3;
	color: #000000;
	font-family: arial;
	padding: 10px;
	border: 2px outset;
}
.panelsurround
{
	background: #F3F3F3;
	color: #000000;
	font-family: arial;
}
legend
{
	color: #22229C;
	font: 11px arial;
}
.vbmenu_control
{
	background: #005080;
	color: #FFFFFF;
	font: bold 11px arial;
	padding: 3px 6px 3px 6px;
	white-space: nowrap;
}
.vbmenu_control a:link, .vbmenu_control_alink
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_control a:visited, .vbmenu_control_avisited
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover
{
	color: #FFFFFF;
	text-decoration: underline;
}
.vbmenu_popup
{
	background: #FFFFFF;
	color: #000000;
	font-family: arial;
	border: 1px solid #0B198C;
}
.vbmenu_option
{
	background: #F3F3F3;
	color: #000000;
	font: 11px arial;
	white-space: nowrap;
	cursor: pointer;
}
.vbmenu_option a:link, .vbmenu_option_alink
{
	color: #22229C;
	text-decoration: none;
}
.vbmenu_option a:visited, .vbmenu_option_avisited
{
	color: #22229C;
	text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_hilite
{
	background: #8A949E;
	color: #FFFFFF;
	font: 11px arial;
	white-space: nowrap;
	cursor: pointer;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
{
	color: #FFFFFF;
	text-decoration: none;
}
.glossarylink {
  color: blue;
  text-decoration: none;
  border-bottom: 1px dashed;
}

.BBtable_table
{
background-color: transparent;
border: 1px #000000 solid;
border-collapse: collapse;
border-spacing: 0px;
}

tr.BBtable_row td {
border-bottom: 1px #6699CC dotted;
text-align: left;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: .7em;
color: #404040;
background-color: transparent;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 0px;
}

/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 19pt; font-decoration: none; font-weight: bold;}

/* ***** styling for postbit etc. ***** */
.alt3 { background: #F3F3F3; color: #000000; font-size: 10pt; font-decoration: none; }

/* ***** visited links in new items list ***** */
a.foo:visited{ color:#4B4B4B; } 

/* ***** small padding on 'thead' elements ***** */
td.thead, div.thead { padding: 4px; }

/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }

/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }

/* ***** don't change the following ***** */
form { display: inline; }
label { cursor: default; }
.normal { font-weight: normal; }
.inlineimg { vertical-align: middle; }
}
NB ik heb dus hier (/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 19pt; font-decoration: none; font-weight: bold;}) iets aangepast.
Het werkt dus niet. Niet op helpmij, maar ook niet op andere (en de site waarop ik het wil) sites.

Wat doe ik fout?
 
Je probeert de stylesheet van een pagina aan te passen? Waar sla je die stylesheet dan op?
 
Ja dat probeer ik. Als ik in Firebug de wijzigingen uitvoer, ziet het er goed uit. Nou wil ik dat ik die wijzigingen ALTIJD bij die site te zien zijn. Ik begreep dat je ze dan in het UserContest.css bestand zou moeten zetten.
 
Ik zie niet in waarom de browser dan naar jouw lokaal opgeslagen CSS file zou gaan zoeken om vervolgens die te gebruiken.

Wat wellicht nog wel een mogelijkheid is, is om de default-stylesheet van FF op te zoeken. Ik geloof dat elke browser zo'n stylesheet heeft, waar de styles die niet door de maker van de pagina zijn gedefinieerd uit worden gehaald (bijvoorbeeld de standaard grootte van <hx> tags en een paar pixels padding in de body.

[EDIT]
Dat heb ik nu net geprobeerd (C:\Program Files\Mozilla Firefox\res\html.css) heb ik ervoor even aangepast en dit werkt niet. Eigenlijk ook logisch, aangezien deze stylesheet overruled (wat is daar een goed nederlands woord voor? ;)) door elke stylesheet die door de maker van de pagina is opgegeven. En in de stylesheets van Helpmij staat natuurlijk gewoon de grootte van de username en dergelijke.
[/EDIT]
 
Laatst bewerkt:
Volgens mij hebben de meeste browsers zo'n soort mogelijkheid. En dat werkt gewoon omdat 't ingebakken zit in de browser. Het is belangrijk voor mensen die bijvoorbeeld kleurenblind zijn.
't Moet bij Firefox inderdaad in userContent.css
Die regel aan het begin ken ik niet. Werkt het wel als je die weghaalt? Dan zou het voor alle sites moeten werken. Als het dan wel werkt, zit er dus 'n fout in die eerste regel met @ aan het begin.
Verder heb ik er zelf !important achter gezet (ik gebruik het om de hopeloos onduidelijke indicatie van de actieve link te verbeteren in Firefox). Dat !important bleek nodig, omdat 't anders op de meeste sites niet werkte. !important moet aan het einde van elke regel.
Ik vermoed dat userContent.css gewoon als 'n geïmporteerde stylesheet wordt behandeld, en dat de specificiteit 't dan vaak verliest van de 'gewone' css van de site.
 
Vergeten te vermelden. Overal !important; achter zetten hielp. Nu (Nouja, al twee weken) werkt het.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan