Site-Specific Stylesheets

Site-Specific Stylesheets

In case you missed the news, Opera 9.0 TP1 allows you to use permanent custom stylesheets for web sites without the need to use javascript hacks of any kind.

Overrides

First, you specify which sites need a custom stylesheet, by adding this section to opera6.ini

[Overrides]
annevankesteren.nl
www.freebsd.org

Case 1: Removing Author Styles, Using a Custom Stylesheet

[annevankesteren.nl]
Author Display Mode|Author CSS=0
Author Display Mode|User CSS=1
User Prefs|Local CSS File=/home/moose/opera-admin/css-site/annevankesteren.css

You can cram various settings for any particular site, but for the purposes of illustration, I choose to present only application of the custom stylesheet. The first line, (Author Display Mode|Author CSS=0) tells Opera to not use the author's stylesheet. The second line tells Opera to use your own stylesheet (this line is not necessary if you have user CSS enabled in author mode). Finally, the third line points Opera to your custom stylesheet.

I have a directory with outsourced Opera settings, which are used by several separate installations I maintain. The paths are that of unix - adjust for Windows/mac as necessary.

Case 2: Keeping Author Styles, Using a Custom Stylesheet

[www.freebsd.org]
Author Display Mode|Author CSS=1
Author Display Mode|User CSS=1
User Prefs|Local CSS File=/home/moose/opera-admin/css-site/freebsd.css

The first line, (Author Display Mode|Author CSS=1) tells Opera to keep the author's stylesheet. The second line tells Opera to use your own stylesheet. Neither the first, nor the second line is necessary if you have both author and user CSS enabled in author mode. Finally, the third line points Opera to your custom stylesheet.

Summary

Since I have both author and user CSS enabled in author mode, I need only the following additions to opera6.ini:

[Overrides]
annevankesteren.nl
www.freebsd.org

[annevankesteren.nl]
Author Display Mode|Author CSS=0
User Prefs|Local CSS File=/home/moose/opera-admin/css-site/annevankesteren.css

[www.freebsd.org]
User Prefs|Local CSS File=/home/moose/opera-admin/css-site/freebsd.css

Benefits

Why use this?

1. No need to run user scripts that insert hooks for styling
2. No need to invoke scripting environment for all sites, even those which do not have any scripts, by always running user javascript
3. User js quirks and imperfections, particularly related to page load time - matter no more
4. Easy management of site profiles
5. Support for local directories of site stylesheets
6. User CSS is protocol-agnostic: custom stylesheets may be also used for secure sites

<abba>Gimme, Gimme, Gimme</abba>

What else do we need to make this more of a killer feature than it already is?

1. Support for @import in user stylesheets — Opera does not yet support it, but we're working on it
2. Local resource paths support for url() — ditto
3. UI — myself, I do not need it - but some of you may

enjoy and share,

M.

[Mr Burn] EEEEEEEEEExcellent [/MrBurns]

One less userjs needed, will these be able to style https sites too?

Yes, this also works for secure sites (added a note above).

M.

Great stuff

*deprecates a few more scripts on userjs.org*

We need friendly UI for this

Originally posted by Jakub81:

We need friendly UI for this

it's being worked on

is there a way to refresh the css file, which is defined in the override domain section, w/o an opera restart?

Originally posted by NoobSaibot:

is there a way to refresh the css file, which is defined in the override domain section, w/o an opera restart?

I don't know (haven't tried Opera 9), but I have one idea for Opera developers:

- Put these site-specific on a separate file (that can be reloaded without restarting Opera).
- Allow most (or all) INI files be reloaded without restarting Opera. (ok, all except opera6.ini)

Originally posted by CrazyTerabyte:

Originally posted by NoobSaibot:

is there a way to refresh the css file, which is defined in the override domain section, w/o an opera restart?

I don't know (haven't tried Opera 9), but I have one idea for Opera developers:

- Put these site-specific on a separate file (that can be reloaded without restarting Opera).
- Allow most (or all) INI files be reloaded without restarting Opera. (ok, all except opera6.ini)

This is one thing thats bothering me with the ua.ini getting merged with opera6.ini, especially with these preview versions I very rarly install over the top of an old version prefering to copy my profile and mail folder and just copy the files I want back over but now I need to dive into the opera6.ini to get my site specific settings. I personally prefered it when the two files were seperate.

But a UI to control this would be better, something like having an advanced button on the bookmarks dialog which contains options to disable java, javascript, assign a css file, spoof the UA etc.

Originally posted by NoobSaibot:

is there a way to refresh the css file, which is defined in the override domain section, w/o an opera restart?

Not in TP1.

M.

Originally posted by CrazyTerabyte:

- Put these site-specific on a separate file (that can be reloaded without restarting Opera).

Site-specific prefs are not the only thingamajigs that would benefit from being outsourced. As of now, this is a wishlist item; the hotter the more you are fond of customization.

M.

Originally posted by alex_p:

This is one thing thats bothering me with the ua.ini getting merged with opera6.ini, especially with these preview versions I very rarly install over the top of an old version prefering to copy my profile and mail folder and just copy the files I want back over but now I need to dive into the opera6.ini to get my site specific settings. I personally prefered it when the two files were seperate.

But a UI to control this would be better, something like having an advanced button on the bookmarks dialog which contains options to disable java, javascript, assign a css file, spoof the UA etc.

It makes sense given that spoof is not the only thing you can override nowadays. Spoofs and other settings belong together. Outsourcing them to a separate ini file would require many changes to the existing machinery. It is, of course, and as I have already mentioned, a wishlist item.

M.

how do i format the path to my custom css located on my disk?

edit: i cant make this to work. can someone plz provide some screenshots and a bit of extended explanation.

Are you using v9?

If you are then all the details are in the first post.

I'll be changing some things on Neowin.net
1. create a css file with the changes you want to make.

* {
   font-size: 12px !important
}
a:link,
a:visited,
a:hover,
a:active{
   text-decoration: none !important;
}
a:visited{
    border-bottom: dotted, red, 1px !important;
}
a:hover{
   border-bottom: solid, red, 1px !important;
}
a:active{
   border-bottom: solid, red, 1px !important;
   border-top: solid, red, 1px !important;
}

div.postcolor div[align='center'] {
text-align: left !important;
}
div.copyright {
text-align: center !important;
}
textarea {
width: 100% !important;
}
div.quotetop {
   font-style: italic !important;
}
div.quotemain,
.postdetails,
{
   font-size: 8px !important
}

Save this file in a folder of your choice, I have mine in \profile\styles\user\site specific

2. with opera closed open opera6.ini and scroll down to the [Overrides] section and add in the site you want to style. In this case I type in www.neowin.net

3.Below the overrides section type in the name of the site in squared brackets, in my case I have [www.neowin.net], underneath this specify the path to the css file. User Prefs|Local CSS File=C:\Program Files\Opera9\profile\styles\user\Site Specific\neowin.css

4. start opera and open preferences then click on advanced then click on content and finally style options. Now check the box next to My Stylesheets under the author section.

The site should now be styled.

Ok, i figured out how to do it, but i believe its somewhat limited. almost every setting i adjust makes no difference, i only managed to style custom font sizes. is styling anything else possible as of now? or am i doing something wrong??

the site i visit often, i saved their style-sheet, did the steps posted above and slightly changed their style. and only font-size change was see-able.

Anything that can be styled by the author can be restyled. If a given element is styled by the author, you need to override their styles. Some background in cascade and inheritance would be helpful.

This is an example of a restyled site. Here is another.

M.

Great post Moose! Can't wait for Opera 9 Final. This is definitely a killer feature.

Originally posted by Moose:

UI — myself, I do not need it - but some of you may.

S'funny, I'm sure I remember you posting a mockup of a UI for this on your site. Forgive me if I remember incorrectly.

I am fused with a text editor, and I do not see a problem in adding 3 lines to an ini file for persistent stylesheets. By the very nature of persistent stylesheets - their location, once set, rarely changes (unless someone is fond of tossing things around just for the sake of it). Adding a new entry takes exactly 3 lines. Given that the pattern is easy to discern, such an addition is more than trivial.

Managing on-demand user stylesheets however still leaves a lot to be desired.

M.

@ Moose, ok i figured it out, i meant to keep both existing and add my style-sheet, but apparently existing one has priority over the "on-top" one. so i ended up removing author style-sheet and copying their, and editing it my way, although i had to add the full address to their images.. this is simply a neat feature I'm about to use now and in future. nifty for removing elements which irritate me the most on some sites.

Originally posted by Moose:

[Overrides]
www.freebsd.org

[www.freebsd.org]
User Prefs|Local CSS File=/home/moose/opera-admin/css-site/freebsd.css

This syntax makes life slightly more difficult than necessary. To tell someone how to style a site, you have to tell them to edit one section (Overrides), then add a second one. If the two were combined:

[override www.freebsd.org]
User Prefs|Local CSS File=/home/moose/opera-admin/css-site/freebsd.css

it would be easier to communicate changes from one user to another.

>Bela<

Excelent

Hi folks,

I'm trying to use this to fix a display problem on wikipedia.

The user stylesheet works when I do:

[Overrides]
fr.wikipedia.org
en.wikipedia.org
pl.wikipedia.org

[fr.wikipedia.org]
Author Display Mode|Author CSS=1
Author Display Mode|User CSS=1
User Prefs|Local CSS File=E:\DOCUMENTS\application-data\opera\wikipedia-workaround.css

[en.wikipedia.org]
Author Display Mode|Author CSS=1
Author Display Mode|User CSS=1
User Prefs|Local CSS File=E:\DOCUMENTS\application-data\opera\wikipedia-workaround.css

[pl.wikipedia.org]
Author Display Mode|Author CSS=1
Author Display Mode|User CSS=1
User Prefs|Local CSS File=E:\DOCUMENTS\application-data\opera\wikipedia-workaround.css

The user stylesheet doesn't work when I do:

[Overrides]
wikipedia.org

[wikipedia.org]
Author Display Mode|Author CSS=1
Author Display Mode|User CSS=1
User Prefs|Local CSS File=E:\DOCUMENTS\application-data\opera\wikipedia-workaround.css

Have I missed something?

It is expected to work, but does not due to an implementation error. It is fixed internally. Good things sometimes trickle slowly (think of hunny & Winnie the Pooh)

M.

For stylists:

@import in user css --> fixed

M.

Using separate stylesheets for each site - is this the best way forward? If I restyle 100 sites, I will have 100 files! Not to mention 100 entries in the INI file.

Before, we could keep all custom styles in one stylesheet.

Also, a lot of the entries in the INI file are duplicating the same text over and over, such as:

[slashdot.org]
Author Display Mode|Author CSS=1
Author Display Mode|User CSS=1
User Prefs|Local CSS File=blah blah blah\styles\per-site\slashdot.org.css

Wouldn't it be better to construct some other method that avoided duplicating lines of text?

Lastly, I know Opera's method will allow for more than CSS to be applied per site, which is great. But I can't help but admire Mozilla's approach, which is to use CSS. We might then put this in the user.css file for Opera. Or would that be less efficient?

Originally posted by Chris Hester:

Before, we could keep all custom styles in one stylesheet.

You can still use the old method; there is nothing to stop you.

Also, a lot of the entries in the INI file are duplicating the same text over and over, such as:

[slashdot.org]
Author Display Mode|Author CSS=1
Author Display Mode|User CSS=1
User Prefs|Local CSS File=blah blah blah\styles\per-site\slashdot.org.css

Nope - if you have a global setting that allows user and author styles for any site, you can drop the first two lines. May I recommend that you re-read the first post in this thread?

M.

Originally posted by Moose:

You can still use the old method; there is nothing to stop you.

Except I lose the benefits you pointed out.

Originally posted by Moose:

If you have a global setting that allows user and author styles for any site, you can drop the first two lines. May I recommend that you re-read the first post in this thread?

I was too eager to implement this new method! I will correct my mistakes, thanks.

Moose, do you know if it will be possible to target only some pages on a site instead of all pages on that site? I'm thinking mostly of being able to have settings for example.com/foo/ that would only apply for pages in foo, without changing anything for pages in example.com/bar/ or other parts of the site. As far as I know, that can't be done in TP1.

Is that being worked on or would it be considered a wish-list item?

@Daedalus

No, that is not in plans atm.

M.

A pity. That would be a great addition.

BTW, one drawback of this new method is that you require separate entries for sites with different subdomains. Like this:

uk.php.net
www.php.net
es.php.net

Before I could target all these by leaving out the first bit, eg: just using php.net. But I've found this doesn't work using the new method.

Hi,

is it possible to use a custom stylesheet only on a specified part (subfolder) of a site?
I tried it that way

www.mainsite.bla/subfolder

but it don't work this way.

Originally posted by Chris Hester:

A pity. That would be a great addition.

BTW, one drawback of this new method is that you require separate entries for sites with different subdomains. Like this:

uk.php.net
www.php.net
es.php.net

Before I could target all these by leaving out the first bit, eg: just using php.net. But I've found this doesn't work using the new method.

That's right - but that is not by design. It is a flaw that I am glad to say has been fixed.

M.

Originally posted by Reisi:

Hi,

is it possible to use a custom stylesheet only on a specified part (subfolder) of a site?
I tried it that way

www.mainsite.bla/subfolder

but it don't work this way.

As I said above - not at this time.

M.

For stylists:

issue with on-demand stylesheets not working if a site-specific persistent stylesheet was detected --> fixed.

M.

Originally posted by Jakub81:

We need friendly UI for this

As the Menace of the Opera, commonly known as Olli - says, it's coming in the next release.

M.

Originally posted by NoobSaibot:

is there a way to refresh the css file, which is defined in the override domain section, w/o an opera restart?

Not yett. But it's on the to-fix list.

M.

Originally posted by CrazyTerabyte:

I don't know (haven't tried Opera 9),

Why not?

but I have one idea for Opera developers: - Put these site-specific on a separate file

Already implemented.

M.

Originally posted by Moose:

Managing on-demand user stylesheets however still leaves a lot to be desired.

s/still leaves/used to leave



M.

Originally posted by Moose:

Originally posted by Moose:

Managing on-demand user stylesheets however still leaves a lot to be desired.

s/still leaves/used to leave



M.

Nice one, I was thinking at first it was a UI, but the magic folder method has been streaming in my head for a long time about the site specific stylesheets though, will we have to refer to a local stylesheet for every site? Or can we enter the style rules in the preferences?

You are asking too many questions

M.

Wow, what a bump. After a year

Have two questions:

1) What about implementing support for local files in url()? In User Stylesheets of course.

2) Is there some way to refresh User Stylesheet file without restarting Opera?

Originally posted by Zajec:

2) Is there some way to refresh User Stylesheet file without restarting Opera?

Strg + F12 --> Advanced --> History --> Empty now

That works with me.

Originally posted by Zajec:

Wow, what a bump. After a year

Yea, quiet here. Everyone makes widgets and inhales ajax nowadays

1) What about implementing support for local files in url()? In User Stylesheets of course.

Fixed already internally. You'll see it when the right time comes.

2) Is there some way to refresh User Stylesheet file without restarting Opera?

Was since 9.0:

KEY = reload stylesheets & refresh display

I have it bound to ctrl+u

M.

Ah, Kestrel/Peregrine will be so a nice versions :-)

Thanks for a command for reloading.

Originally posted by Moose:

Was since 9.0:
KEY = reload stylesheets & refresh display
I have it bound to ctrl+u

How about reloading the stylesheets on page refresh just like scripts ? So far I went to the styles preferences, click the user stylesheet path input and clicked ok. Annoying !

xerath, all you need to do is invoke the shortcut. Really, there is nothing simpler.

M.

Also, reloading all stylesheets on "refresh display" would be too costly to even consider, and completely unnecessary. These two are not married for a reason.

M.

This causes some problems though. Backgrounds are not redrawn, so scrolling can make for a mix of before and after styles.

KEY = reload stylesheets & refresh display

Moose, how do I "invoke the shortcut" for this? Do I need to edit the INI files? Or from within Opera? Never done this before...

Originally posted by Chris Hester:

This causes some problems though. Backgrounds are not redrawn, so scrolling can make for a mix of before and after styles.

Can you elaborate?

And btw, there are still bugs in the implementation as of now, but support for everything is already there.

Originally posted by Chris Hester:

KEY = reload stylesheets & refresh display

Moose, how do I "invoke the shortcut" for this? Do I need to edit the INI files? Or from within Opera? Never done this before...

You have to edit keyboard.ini (look for 'keyboard configuration' string in your opera6.ini if you do not know where it is), and put, for example,

u ctrl = reload stylesheets & refresh display

there. Of course, there should be no conflicts with another shortcut. Therefore, if you want to edit keyboard config by hand, you should have it in alphabetical order. Otherwise, it might be better to use the GUI editor. Pick a shortcut you wish to bind to this command, and check if it's free. If it's not, either move the old shortcut somewhere else, or find another shortcut.

IMO, for people who are serious about keyboard usage, it is worth their time to remove all unused shortcuts, clean up platform dependent shortcuts, and arrange shortcuts alphabetically, and from that point on edit the outsourced keyboard.ini by hand.

M.

Originally posted by Zajec:

Is there some way to refresh User Stylesheet file without restarting Opera?

I used to select the same user stylesheet after editing it, via 'Edit Site Preferences'!

Originally posted by Moose:

Can you elaborate?

I can't seem to replicate the behaviour now, so it may have been a bug that was fixed. If I come across the effect again, I'll let you know.

Originally posted by Moose:

u ctrl = reload stylesheets & refresh display

Many thanks for that! It works a treat. I improved it for my own needs by just having it reload the stylesheets only. I have a custom button to refresh the display, which is only used when editing the HTML of a page in the cache.

How do you know all these words to use as shortcuts? Is Opera able to understand a wide range of commands?