Vivaldi.net user blogs

What are Vivaldi community members talking about right now? Write blog posts, share, read, comment, enjoy.

Vivaldi custom CSS

  I like to customize sites that I frequently visit to fit my needs (fonts size and colors usually), and since font on Vivaldi.net is really small and hard to read (including forum) I've created custom CSS for it.

  It's very easy to do so with visual CSS editor like Stylebot extension (well, there are some kinky parts ofc). Almost all fonts are bigger, posts on "timeline" are wider and the whole layout is wider with some slice color change (post header is bluish, and posts are framed with black border, just to easy distinguish them)

  If you need it, you can grab it here, or you can just visit any page on Vivaldi.net domain, click CSS button on your toolbar (you need to have Stylebot installed ofc) and choose Install style from Social. So far only my CSS is there for Vivaldi and it's called Vivaldi bigger. 

Here are some screenshoot's:

Profile

 

 

timeline/community

 

 

more screenshots here

 

ps. I've made it to fit for my widescreen monitor (1929x1080) and with Opera 19 NEXT. Unfortunately, this CSS is broken in Opera Presto.

Related Posts

Comments 5

 
QuHno on Saturday, 21 December 2013 22:12

Funny thing that - one of the first things I did after creating my account was writing a userCSS for this site for my faithful 11.64 and 12.16 :D

Funny thing that - one of the first things I did after creating my account was writing a userCSS for this site for my faithful 11.64 and 12.16 :D [code]* {font-family: Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif !Important;} * pre, * code {font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace !Important;} body, div#es-wrap, div.kbody { font-color:#202020 !important; font-size: 1.2em !Important; line-height: 1.6em !Important; } body.site { padding:10px 5px 10px 5px !Important;} .body .container { padding:15px !Important;} .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 90% !Important; } .container { max-width: 90% !Important; } .row-fluid .span9 { width: 80.47% !Important; } .row-fluid .span3 { width: 17.4% !Important; } #Kunena a:link, #Kunena a:visited, #Kunena a:active { color: #202020 !Important; } #Kunena a:hover { color: navy !Important;} #Kunena td.kcol-kcatlastpost { width: 30% !Important;} #aside .module-menu, span4 a { font-size: 0.9em !Important; } .kmessage-left .kmsgbody .kmsgbody { font-size: 1.1em !Important; } .kprofile-left {background-color: #f8f8f8 !important;} a {color: #600000 !important;} .popbox-toolbar a, .media-object.pull-left a {color: #333333 !important;} body div.es-mod.mod-es-menu .media:first-child { margin-top: -7px !Important;} body div.es-mod.mod-es-menu .media .pull-left { margin-right: 0 !Important; float:right !Important;} body div.es-mod.mod-es-menu .es-avatar > img { height: 30px !Important; width: 30px !Important; } body div.es-mod.mod-es-menu .es-menu-items { padding: 10px 0 0 !Important;} i.ies-pencil { display:none !Important;} div#es-wrap .row-fluid .span4 { width: 23.5% !important;} div#es-wrap .row-fluid .span8 { width: 74.5% !important;} div#es-wrap .es-widget .small { float:right !Important; padding-right:10px;} body div#es-wrap div.es-mod.mod-es-recent-albums li{ max-width: 50px !important;} /* forum */ .kavatar {max-height: 72px !important;} .kprofilebox {display:none;} #Kunena .kicon-button { line-height:inherit !important;} /* albums */ /* div#es-wrap .es-photo-content, div#es-wrap .es-photo-image , div#es-wrap .es-photo-tag-viewport {height: 600px !important;} */ div#es-wrap .photo-content .es-photo-image, div#es-wrap .photo-content .es-photo-tag-viewport {height: 600px !important;} .es-album-cover, .album-cover {display:none !important;} .media {margin-top: -20px !Important;}[/code]
zahek on Saturday, 21 December 2013 23:29

So nice :)

So nice :)
Vux777 on Monday, 23 December 2013 23:11

I can't reply directly, something is broken so..
@Zahek
tnx

@QuHno
haha
on my first I pumped up the font...it's really small and annoying

I can't reply directly, something is broken so.. @Zahek tnx @QuHno haha on my first I pumped up the font...it's really small and annoying
ersi on Sunday, 26 April 2015 13:44

I also like to tweak CSS, but something like font sizes, doesn't it work to set the minimum font size in browsers?

I also like to tweak CSS, but something like font sizes, doesn't it work to set the minimum font size in browsers?
STannerUX on Friday, 29 May 2015 06:03

It depends on browser support and how the font sizes are set. If they are set in px, there might be a problem, but if they are set in, say em, the minimum font size browser setting should work perfectly.

It depends on browser support and how the font sizes are set. If they are set in px, there might be a problem, but if they are set in, say em, the minimum font size browser setting should work perfectly.
Go to top

Don't have an account?

Register now to join the community!