Vivaldi Forum mod
-
@Ornorm On that whole concept, & yes i know i have riffed on this general theme elsewhere before, but it really amuses me to ponder what the aliens invisibly encircling Gaia in their stealth-ships make of us, spending so much time on stuff so esoteric & ephemeral.
-
@Steffie said in Vivaldi Forum mod:
but it really amuses me to ponder what the aliens invisibly encircling Gaia in their stealth-ships make of us, spending so much time on stuff so esoteric & ephemeral.
Interesting thinking! (seriously)
-
-
@hlehyaric Brilliant!
-
@Ornorm You're really out of control! Help!
-
@hlehyaric I sincerely hope that you used a zero-width space with that emoji.
-
@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