Vivaldi Forum mod
-
@Ornorm Back to topic (Someone has to bring this thread back on track. )
Next step: I respectfully suggest you change the menu's icons…
-
@hlehyaric I could change the html code with the correct () fa icon
class="fa fa-internet-explorer"
but, with CSS, I'm stuck. I believe it should be done with JS (query to find icon and change by another one).Do you know if it is possible with CSS mod?
-
@Ornorm euh… How can I say?… I was kidding. Well, I was alluding to the addiction . You know, when you start modding, you can't stop .
Do you know if it is possible with CSS mod?
I haven't the slightest clue, I haven't tried (anyway, I would have failed…).
-
@hlehyaric I know you were kidding but I thought... hey! that might be cool so... I tried and I found that beautiful
fa fa-internet-explorer
that made me laugh. -
@Ornorm Check the
i.fa.fa-whatever
's content in the HTML inspector, specifically its CSS. But I recommend you using a more specific selector, sincefa-rss
could be used somewhere else (though the topic feed hasfa-rss-square
). -
@potmeklecbohdan I've checked it. It's a class by itself. It's possible to change the size, the color, etc. but I didn't find a way to interchange a
i.fa.fa-whatever
byi.fa.fa-anything
which is what I was looking for. -
@Ornorm Uhm, sorry for not being clear. By the content I meant children in the tree, in the case of
i.fa
usually only::before
. That’s where the icon is applied, & also where you can change it by overwriting thecontent
CSS property. -
@potmeklecbohdan Oh! Thank you! I think I found what needs to be done
.fa-internet-explorer:before {content: "\f270";}
gives(changed on the page directly. I'll try with the mod later.
Thank you soooooooooo much!
-
@Ornorm That’s exactly what’s been done in the mod. Reading source sometimes pays off
-
@luetage RTFM? Gasp! What kind of radical are you!
-
@luetage Where? The Mod theme just changes some colours &c, the notify icons don’t change the icons of
i.fa
, but add them toli
. -
@luetage said in Vivaldi Forum mod:
@Ornorm That’s exactly what’s been done in the mod. Reading source sometimes pays off
The source code of your Mod theme? (sorry, I didn't find something related to that)
-
@potmeklecbohdan In
default.css
. That file has fixes and improvements for all themes, including standard. Now granted, It used to include far more font icon changes in the beginning, but Vivaldi improved the icons over the years and so I could stop exchanging most of them, but it still got some in.@Ornorm No, you're right, the mod theme doesn’t have this in, because including the fixes in all of the themes separately is very awkward to maintain.
-
@Ornorm Rainy Sunday afternoon. Welcome to Planet Koozebane.
Theme:
{"themeName":"Koozebane","colorBg":"#1d2225","colorFg":"#9ea0a0","colorHi":"#9c515c","colorBtn":"#b63e62","colorDrop":"#040404","colorLi":"#b9b9b9","colorLi2":"#ffccd4"}
UserCSS:
/* Koozebane */ body, main#panel.slideout-panel { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #f6f6f6 !important; background-color: transparent !important; background-image: url("https://images.unsplash.com/photo-1551730547-2394cdab1584?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80") !important; background-repeat: no-repeat; background-attachment: fixed; background-position: center center } /* Header */ #vivaldi-header { background-color: #040404; height: 50px; } #vivaldi-header>.row { padding: 14px 15px; } #vivaldimenu a, #vivaldimenu a:hover {font-weight: 800} a.dropdown-toggle, a.dropdown-toggle img, a.dropdown-toggle:active, .navbar-default .navbar-nav>.open>a, #search-form #search-button { color: #ededed !important; } a.dropdown-toggle:focus, a.dropdown-toggle img:focus, a.dropdown-toggle:active, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover { color: #75f0ff !important; background-color: transparent; } .unread-count:after { position: absolute; left: 23px; top: 6px; text-align: center; font-size: .9em; border: 0; color: #ffccd4; background:transparent; } .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, button.btn.btn-link:hover { color: #75f0ff !important; background-color: #00a1d; } .dropdown-menu { margin: 0; } .dropdown-menu>.top-divider { margin: -5px; } .dropdown-menu>.bottom-divider { margin: 0; } .dropdown-menu>li>a { padding: 1px 13px; line-height: 2.5; } .header .notif-dropdown-link { border-top: 1px solid #f5c0b4; } li.divider { background-color: #f5c0b4 !important; margin: 5px 10px !important; } .dropdown-menu { background-color: #040404 !important; background-image: linear-gradient(rgba(4,4,4,0), rgba(51,51,53,1)) !important; border-radius: 4px; } /* Submenu */ #submenu { background-color: transparent; border-top: 1px solid #333535 !important; border-bottom: none; top: 50px !important; height: 50px !important; } #submenu li>a { color: #858585 !important; } #submenu a:focus, #submenu a:hover, #submenu li.active>a:hover, #submenu li.active>a { color: #f6f6f6 !important; background-color: transparent; } span.visible-xs-inline.showmenutext:not(.slideout-menu) { display: none !important; } /* Content */ #content { background-color: rgba(4,4,4,0.4) !important; box-shadow: 2px 0px 5px 2px rgba(29,34,37); /* padding: 15px 40px !important; */ border-radius: 10px; margin-top: 20px !important; } .categories>li .content h2:hover, .category>ul>li .content h2:hover, .categories>li .content h2:focus, .category>ul>li .content h2:focus { background-color: transparent !important; } .categories>li, .category>ul>li { margin-bottom: 0 !important; } .categories>li, .category>ul>li { padding-bottom: 20px; } .categories>li:last-of-type, .category>ul>li:last-of-type { border-bottom: none; } hr {border-color: #737373;} .categories>li .card, .category>ul>li .card, .category>ul>li:not(.unread) .card { border-left: 3px solid #858585 !important; } .categories>li .content .icon, .category>ul>li .content .icon { display: none; } #vivaldifooter a { background: transparent; color: #46cdff !important; } #vivaldifooter p {color: #9ea0a0;} /* Divers */ .answered { border: 1px solid #894e56; border-radius: 4px; color: #f18a97; } .topic [component="topic/labels"] .answered { color: #894e56; border-radius: 4px; } .posts [component=post][data-index="-1"].isSolved { border: 2px solid #894e56; border-right: 2px solid #894e56 !important; border-radius: 4px; } .unanswered { border: 1px solid #441122; border-radius: 4px; color: #9c515c; } .topic [component="topic/labels"] .unanswered { color: #9c515c; border-radius: 4px; } .topic .posts [component=post].highlight>hr { border: none; } .topic .votes [component="post/upvote"].upvoted { background-color: transparent !important; color: #01ab31 !important; } .topic .votes [component="post/vote-count"] { background-color: none; color: #75f0ff !important; } blockquote { background-color: rgba(51,51,53,0.5); color: #f6f6f6; } blockquote, .topic [component="post/replies"] { border-left: 5px solid #ff7375 !important; } li.deleted { display: none !important } code { background-color: transparent !important; color: #ffc8cf !important; border: 1px solid #bd5172; border-radius: 4px; } pre code, div.content pre code { background-color: #1c1c1c !important; color: #f5b0c4 !important; border-radius: 4px; border: 1px solid #1f4c63; opacity: 0.8; } .alert-window .alert.alert-warning, .alert-window .alert.alert-danger, .alert-window .alert.alert-success, .alert-window .alert.alert-info { background-color: #000f1a !important; color: #46cdff !important; opacity: 1.0 } .alert.alert-warning, .alert.alert-success, .alert.alert-info, .alert.alert-danger { background-color: transparent !important; border-color: #9ea0a0 !important; border-radius: 4px; color: #858585; } /* Buttons */ a.btn.btn-xs.btn-default.hidden-xs { padding: 3px 8px !important; color: #858585 !important; font-size: .8em; } .btn-primary, .btn-primary[disabled], .account .cover .indicator, .account .cover .save, .btn-danger, .btn-success, a.list-group-item { border: 1px solid #b86c7e !important; } .btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open>.dropdown-toggle.btn-primary, .account .cover .indicator:hover, .account .cover .save:hover, a.list-group-item:focus, a.list-group-item:hover { background-color: #b63e62; } .btn-info, .btn-info.active, .btn-info.focus, .btn-info:active, .btn-info:focus, .btn-info:hover, .open>.dropdown-toggle.btn-info, .btn-danger:hover, .btn-danger:focus, .btn-success:hover, .btn-success:focus, a.btn.btn-xs.btn-default.hidden-xs:hover { background-color: #b63e62 !important; border: 1px solid #b86c7e !important; color: #fbfbfb !important; } .btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open>.dropdown-toggle.btn-default { background-color: transparent !important; border-color: #75f0ff !important; color: #75f0ff; } .btn.btn-default, .topic .posts .content .toggle, .btn-primary:active, .btn-primary:focus { background-color: transparent; border: 1px solid #858585; color: #858585; } /* Composer & Form */ .composer, .form-control { background-color: rgba(0,15,26,0.6); color: #ffd4e4; border: none; border-top: none !important; border-radius: 4px; } .composer .write { color: #ffd4e4; background-color: #04121b; border-color: #67485a; } .composer .write:focus { border: none !important; } .composer .write-container .help-text, .composer .preview-container .help-text { color: #458c68; opacity: none; } .composer .preview { background-color: #000f1a; border-color: #b86c7e; color: #f6f6f6; } .composer .formatting-bar .formatting-group li:focus, .composer .formatting-bar .formatting-group li:hover { background-color: transparent !important; color: #458c68; } #quick-search-results.dropdown-menu.quick-search-results { display: none !important; } #advanced-search .panel, #advanced-search .panel-heading, .panel, .well, #inputAboutMe, #inputSignature { background-color: transparent; border-radius: 4px; } /* Pagination */ .pagination>li>a, .pagination>li>span { background-color: transparent; border: none !important; color: #46cdff !important; } .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover { background-color: #9ea0a0; color: #04121b !important; } .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { background-color: #333535 !important; color: #46cdff !important; } .nav>li>a:focus, .nav>li>a:hover { background-color: #333535; } .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { background-color: #1d2225; } /* Chat */ .chat-modal .chat-content li.chat-message .message-body-wrapper .message-body:hover, .chat-modal .chat-content li.chat-message .message-body-wrapper .message-body:focus, .expanded-chat .chat-content li.chat-message .message-body-wrapper .message-body:hover, .expanded-chat .chat-content li.chat-message .message-body-wrapper .message-body:focus { background-color: transparent !important; } .taskbar .navbar-nav li.taskbar-chat a, .taskbar .navbar-nav li.taskbar-chat a:hover { background-size: contain; } /* Local Forum */ #advanced-search #posted-in-categories option[value="38"], /* Russian */ #advanced-search #posted-in-categories option[value="20"], #advanced-search #posted-in-categories option[value="172"], #advanced-search #posted-in-categories option[value="123"], #advanced-search #posted-in-categories option[value="124"], #advanced-search #posted-in-categories option[value="176"], #advanced-search #posted-in-categories option[value="177"], #advanced-search #posted-in-categories option[value="178"], #advanced-search #posted-in-categories option[value="179"], #advanced-search #posted-in-categories option[value="173"], #advanced-search #posted-in-categories option[value="149"], #advanced-search #posted-in-categories option[value="174"], #advanced-search #posted-in-categories option[value="175"], #advanced-search #posted-in-categories option[value="162"], #advanced-search #posted-in-categories option[value="166"], #advanced-search #posted-in-categories option[value="165"], #advanced-search #posted-in-categories option[value="167"], /* Japanese */ #advanced-search #posted-in-categories option[value="26"], #advanced-search #posted-in-categories option[value="78"], #advanced-search #posted-in-categories option[value="143"], #advanced-search #posted-in-categories option[value="77"], #advanced-search #posted-in-categories option[value="76"], /* German */ #advanced-search #posted-in-categories option[value="24"], #advanced-search #posted-in-categories option[value="98"], #advanced-search #posted-in-categories option[value="99"], #advanced-search #posted-in-categories option[value="100"], #advanced-search #posted-in-categories option[value="137"], #advanced-search #posted-in-categories option[value="138"], /* Spanish */ #advanced-search #posted-in-categories option[value="22"], #advanced-search #posted-in-categories option[value="46"], #advanced-search #posted-in-categories option[value="106"], #advanced-search #posted-in-categories option[value="107"], #advanced-search #posted-in-categories option[value="108"], #advanced-search #posted-in-categories option[value="181"], /* French */ #advanced-search #posted-in-categories option[value="21"], #advanced-search #posted-in-categories option[value="47"], #advanced-search #posted-in-categories option[value="44"], #advanced-search #posted-in-categories option[value="156"], #advanced-search #posted-in-categories option[value="157"], #advanced-search #posted-in-categories option[value="109"], #advanced-search #posted-in-categories option[value="110"], #advanced-search #posted-in-categories option[value="111"], /* Chinese */ #advanced-search #posted-in-categories option[value="23"], /* Czech */ #advanced-search #posted-in-categories option[value="70"], /* Greek */ #advanced-search #posted-in-categories option[value="168"], #advanced-search #posted-in-categories option[value="169"], #advanced-search #posted-in-categories option[value="170"], /* Italian */ #advanced-search #posted-in-categories option[value="25"], #advanced-search #posted-in-categories option[value="141"], #advanced-search #posted-in-categories option[value="142"], /* Polish */ #advanced-search #posted-in-categories option[value="27"], #advanced-search #posted-in-categories option[value="148"], #advanced-search #posted-in-categories option[value="101"], #advanced-search #posted-in-categories option[value="102"], #advanced-search #posted-in-categories option[value="103"], /* Portugese */ #advanced-search #posted-in-categories option[value="28"], #advanced-search #posted-in-categories option[value="42"], #advanced-search #posted-in-categories option[value="50"], #advanced-search #posted-in-categories option[value="97"], #advanced-search #posted-in-categories option[value="135"], /* Slovak */ #advanced-search #posted-in-categories option[value="90"], #advanced-search #posted-in-categories option[value="117"], #advanced-search #posted-in-categories option[value="152"], #advanced-search #posted-in-categories option[value="153"], #advanced-search #posted-in-categories option[value="118"], #advanced-search #posted-in-categories option[value="119"], #advanced-search #posted-in-categories option[value="120"], #advanced-search #posted-in-categories option[value="121"], /* Turkish */ #advanced-search #posted-in-categories option[value="29"], /* Persian */ #advanced-search #posted-in-categories option[value="39"], /* Ukrainian */ #advanced-search #posted-in-categories option[value="40"] { display: none; } /* Local forum */ .composer-container .category-list-container li[data-cid="38"], /* Russian */ .composer-container .category-list-container li[data-cid="20"], .composer-container .category-list-container li[data-cid="172"], .composer-container .category-list-container li[data-cid="123"], .composer-container .category-list-container li[data-cid="124"], .composer-container .category-list-container li[data-cid="176"], .composer-container .category-list-container li[data-cid="177"], .composer-container .category-list-container li[data-cid="178"], .composer-container .category-list-container li[data-cid="179"], .composer-container .category-list-container li[data-cid="173"], .composer-container .category-list-container li[data-cid="149"], .composer-container .category-list-container li[data-cid="174"], .composer-container .category-list-container li[data-cid="175"], .composer-container .category-list-container li[data-cid="162"], .composer-container .category-list-container li[data-cid="166"], .composer-container .category-list-container li[data-cid="165"], .composer-container .category-list-container li[data-cid="167"], /* Japanese */ .composer-container .category-list-container li[data-cid="26"], .composer-container .category-list-container li[data-cid="78"], .composer-container .category-list-container li[data-cid="143"], .composer-container .category-list-container li[data-cid="77"], .composer-container .category-list-container li[data-cid="76"], /* German */ .composer-container .category-list-container li[data-cid="24"], .composer-container .category-list-container li[data-cid="98"], .composer-container .category-list-container li[data-cid="99"], .composer-container .category-list-container li[data-cid="100"], .composer-container .category-list-container li[data-cid="137"], .composer-container .category-list-container li[data-cid="138"], /* Spanish */ .composer-container .category-list-container li[data-cid="22"], .composer-container .category-list-container li[data-cid="46"], .composer-container .category-list-container li[data-cid="106"], .composer-container .category-list-container li[data-cid="107"], .composer-container .category-list-container li[data-cid="108"], .composer-container .category-list-container li[data-cid="181"], /* Chinese */ .composer-container .category-list-container li[data-cid="23"], /* Czech */ .composer-container .category-list-container li[data-cid="70"], /* Greek */ .composer-container .category-list-container li[data-cid="168"], .composer-container .category-list-container li[data-cid="169"], .composer-container .category-list-container li[data-cid="170"], /* Italian */ .composer-container .category-list-container li[data-cid="25"], .composer-container .category-list-container li[data-cid="141"], .composer-container .category-list-container li[data-cid="142"], /* Polish */ .composer-container .category-list-container li[data-cid="27"], .composer-container .category-list-container li[data-cid="148"], .composer-container .category-list-container li[data-cid="101"], .composer-container .category-list-container li[data-cid="102"], .composer-container .category-list-container li[data-cid="103"], /* Portugese */ .composer-container .category-list-container li[data-cid="28"], .composer-container .category-list-container li[data-cid="42"], .composer-container .category-list-container li[data-cid="50"], .composer-container .category-list-container li[data-cid="97"], .composer-container .category-list-container li[data-cid="135"], /* Slovak */ .composer-container .category-list-container li[data-cid="90"], .composer-container .category-list-container li[data-cid="117"], .composer-container .category-list-container li[data-cid="152"], .composer-container .category-list-container li[data-cid="153"], .composer-container .category-list-container li[data-cid="118"], .composer-container .category-list-container li[data-cid="119"], .composer-container .category-list-container li[data-cid="120"], .composer-container .category-list-container li[data-cid="121"], /* Turkish */ .composer-container .category-list-container li[data-cid="29"], /* Persian */ .composer-container .category-list-container li[data-cid="39"], /* Ukrainian */ .composer-container .category-list-container li[data-cid="40"] { display: none; }
Mods: Advanced formatting | Compact header | Custom notification icons | Last edit timestamp | Show user IDs | Signature mod | Square avatars
Zoom 90%, text zoom 90%.
I also changed some settings in custom.css.
Photo: unsplash
-
@hlehyaric Very neat! Congrats!
-
@Ornorm Thanks a lot. I had some spare time last night (boring Saturday evening) and today (rainy afternoon ) = four themes .
-
@hlehyaric Four? Oh man oh man, you're more scary than me!
-
@Ornorm Not that much. Three are more or less the same. The pictures are different, so there was a need for adjustments, but in the end, these are dark themes.
-
@hlehyaric said in Vivaldi Forum mod:
these are dark themes
Hopefully they are much less confusing than Dark.
-
@Steffie I hope so .