Skip navigation.

Opera FAQs, Tips, Tricks & Tweaks

Cool tips for Opera browser

Posts tagged with "User CSS"

Web page looks different in Opera?

, , , ...

If web page looks different from normal then you might have enabled User Mode or style sheet. To bring back normal look disable all except Author Mode in View > Styles.

Opera Author Mode Style
Normal look (Author mode)

Opera Accessibility Layout Style
Accessibility layout

Opera Block Structure Style
Block structure

Opera Outline Style
Outline

Opera Table of Contents Style
Table of contents

Look with various styles

Style your My Opera news page

, , , ...

Latest news page used to show your blog posts and photos in green color and others in blue color but this was removed in carambola release. Frown

You can bring back colors by using user style sheet. Smile Add the following code to user CSS file and reload news page to apply style sheet.

/* Subscriptions (Latest news) */
.newscontainer h2 { background:#2b7fb6; color:#fff; }
.newsowner h2 { background:#82a70b; }

My Opera news page before
News page before

My Opera news page after
News page after

Use user style sheet to modify the look of a website in Opera

, , , ...

A user style sheet is a text file with CSS declarations. It allows you to have control over the look and feel of website. It can be used to hide annoying things like ads, change fonts and colors, etc.

!important declaration should be added to a rule to take precedence over author style sheet.

User style sheets can be applied to all sites Tools > Preferences... > Advanced > Content > Style Options... > My style sheet (restart required to apply style sheet) or per-site basis Right click on a site > Edit Site Preferences... > Display > My style sheet (reload required to apply style sheet).

Example 1: Hide friend request link in My Opera

My Opera friend request link in top bar
My Opera friend request link in top bar

  1. Create a text file with the following and save preferably inside profile\styles directory with CSS file extension.
    /* Friend request */
    #friendrequest { display: none !important; }

    CSS to hide friend request link and share this button
    CSS to hide friend request link and share this button

  2. Add path to CSS file in site preferences.

    Path to CSS file in site preferences
    Path to CSS file in site preferences

  3. Reload page to apply style sheet.

    My Opera friend request link hidden by CSS
    My Opera friend request link hidden by CSS

Example 2: Hide sponsored links in Google

Google Sponsored Links
Useless Google sponsored links

Google sponsored links can't be blocked by content blocker but it can hidden by following CSS code.

/* Top sponsored links */
#tads { display: none !important; }

/* Side sponsored links */
#mbEnd { display: none !important; }

Download Opera, the fastest and most secure browser