Opera Custom CSS Installation/Activation
- Find the style/custom css you wish to apply to tumblr
- Save the CSS file to your hard drive in a location you’ll remember
- Open your Opera browser and login to tumblr
- While on the tumblr website go to the Opera browser Menu bar (top of browser) and select:
Tools/Quick Preferences/Edit Site Preferences… (see top screenshot)
- A Site Preferences dialog should open with the default General tab displayed (see center screenshot). In the Site form field, it should display “www.tumblr.com”
- In the Site Preferences dialog, select the Display tab (see bottom screenshot). At the bottom of the Display tab screen and located to the right of the My style sheet form field, click the “Choose” button and locate the custom CSS file you saved in the second step.
- Click the “Ok” button
In order to see your new style take effect, click the Reload icon near the menu bar OR press CTRL+R OR reload the tumblr page by clicking the Home icon. Basically, the changes won’t show until you reload tumblr.
NOTE: Not all styling, especially if a style is retrieved from userstyles.org, will appear properly in Opera, since Opera has its own vendor prefix for certain declarations.
Multi-functional CSS Menu Button
This is a cross-browser before/after pseudo element test. The UI concept is to have a non-obstrusive “button” with a content topic. Links become available upon hover with a custom tooltip example for one of the links.
Performance order list:
- Firefox
- Safari
- Chrome
- Opera
- Internet Explorer (don’t bother)
Demo here
Out of Thin Air
I was never really impressed by this. It was always just a graphic and a saying. I decided to recreate it using minimal HTML, then styling the rest with CSS. Well, except for the background image.
Firefox, Opera and Safari - Looks great!
Chrome - The rotated edges appear “sharpish”. Even with image-rendering: optimizeQuality it seems as though Chrome overrides this with optimizeSpeed.
Internet Explorer - Fail i.e. met expectations.
Available for viewing here. Check out the source code, if you are so inclined. The majority of CSS is taken up by vendor prefixes for background gradients and transforms.
This is all for the HTML. Originally I had recreated the project as a tumblr post. This was later changed to a single page to avoid any clutter with blog theme code if viewing the source code was desired.
<p><code class="envelope">envelope</code></p>
<p><code class="card"><code class="redfont">card</code></code></p>
<p><code class="card-heart">card-heart</code></p>
Dashboard Styles for Opera - Now Available
Three easy steps: Download the dashboard style, Login to tumblr and select the downloaded style. It’s that easy!
Instructions: Download one of the dashboard styles (links below). Login to tumblr then from the Opera menu, select Settings / Quick Preferences / Edit Site Preferences. Click the Display tab then click the Choose button. Navigate to your style file and choose OK. Press CTRL + R or select any link on your dashboard to view your new dashboard style. That’s it!
tumblr - Opera Dark tumblr - Opera Lilac
tumblr - Opera little pink floral tumblr - Vintage Wallpaper
Please feel free to contact me if you have any questions or issues.
Dashboard Styles for Opera
Applying a dashboard style to Opera is as simple as saving a text file and then selecting it in Opera!!
With some modification to current dashboard styles I have written, it is possible to apply dashboard styles to Opera. The screenshots above are two of the styles I have published on userstyles.org and installed on Opera.
I am currently working on a delivery method, installation instructions and fine-tuning my testing. Stay tuned for further details!
Multiple CSS Demo
- CSS shape creation - Dimmed hover - Multiple dim hover layers
- Complex background - Border clipping - Minimal DIVs in HTML
- Rounded inner border - Other stuff ;)
The left animation shows the shape creation (think “squares” and “borders”).
The other animation shows off everything on the list above.
What to look for: Hover just the image for a second. Then move to the center logo. Note the background can be seen through the logo. Note how the dimmed area matches the triangular shape. See how many other things you notice. Did I mention this is all CSS?
View the Multiple CSS demo and code.
Note: Opacity transitions may vary. Bonus round goes to Frrefox.
Phishing Scam
Apparently there are some tumblr blogs that have this “login” screen.
This is NOT real. It is a scam to collect your personal information.
If you own a blog with this malware, find and delete this line from your theme:
<script type="text/javascript" src="http://jungtetho.info/jquery.js"></script>
I would advise not entering any information into this form. If you are feeling neighborly, this is the CSS to override the login. I use this to access the blogger’s Ask box to inform them they are part of the scam:
#facebox,
#facebox_overlay {
display: none !important;
}
Be safe! And if you can’t be safe, at least have a great alibi!
Game, Set…No Match
This is a hodge-podge collection of screenshots comparing obvious differences in browser display. As follows:
- Glow Effect on Hover - Chrome shrinks and pixelates the text.
- Return to Top - Firefox and Opera display the inset border and opacity change, giving the icon the appearance of being depressed upon hover. Chrome and Safari only reflect a shift in opacity.
- Post Top/Bottom Drop-Shadow - Drop-shadow for Firefox seems more pronounced than the other browsers, which look flat by comparison.
- Image Border Radius - As previously mentioned, the border and image have a radius applied which should give both rounded corners. This is only evident in Firefox.
I remember reading something about -webkit background clip. This may resolve the border issue or perhaps positioning a transparent avatar shell over the avatar with the proper z-index. Not this time around though, just something to keep in mind if I use this again.
I’m done.
Not waiting for the fat lady…
This Opera is over.
To resolve the font background issue for the slideshow, the text and title of the slideshow paragraphs needed to be set to transparent. Not by using “transparent” as a declaration, oh no. That would have been too easy. The color needed to be set to rgba(0,0,0, 0). This has been reported from more than one source on the internet as being the equivalent definition of transparent. More on this coming very, very soon…like one paragraph away.
Shown here are Before and After screenshots of the very special Opera issues. The Title and the Copyright would not show. The blurred text effect is supposed to be created by setting the font color to transparent then setting multiple text-shadows over the “invisible” font. After figuring out the transparency issue with the slideshow, I substituted this declaration for transparent and applied it to the Title and Copyright.
I was very pleased to discover the Title and Copyright now displayed as blurred text, that is until you hovered. It would flash solid black, then jump to invisible and finally fade-in to solid white. Groan! Resetting rgba values to 255,255,255,0 fixed this.
The avatar was the last problem, or last straw, in this case. Yet another vendor specific prefix was necessary to get this to function. Upon hover, the avatar rotates 360 degrees and is upscaled in size. Only for Opera does any reduction in size after this crop the avatar. The avatar also leaves residual bits of itself behind after it is no longer hovered. The problem with the rounded double border and the square cornered image persisted. When the avatar was not hovered, the border radius applied solely to the image had no effect. Then I noticed the copyright in the lower left moved slowly off the page in correlation with the avatar becoming larger in size.
For myself, this is exactly like every other Opera I have had to deal with in my life. Extremely difficult to get through. My final on the Opera saga can be summed up by their icon. It’s not an “O” (oh), it’s a zero because it means absolutely nothing to me.
