Vivaldi Forum mod
-
@mib2berlin Something like this? (this is for Android)
.page-topic-category-136 [component="post"]:not(.deleted) .post-tools::before, .page-topic-category-147 [component="post"]:not(.deleted) .post-tools::before, .page-topic-category-150 [component="post"]:not(.deleted) .post-tools::before, .page-topic-category-151 [component="post"]:not(.deleted) .post-tools::before { content: "\f17b"; color: #a4c639; margin-right: 10px; vertical-align: middle; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 17px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
Edit:
ajaxify.data.category
andajaxify.data.breadcrumbs
could help automating this a little. -
@potmeklecbohdan
Hi and yes, looks good.
I meant left aligned and changed to margin-left but I guess it is not the only line to change.
My css knowledge is very basic, as I work on the web it was not even born.Thank you for looking in to, mib
EDIT: These are marginal changes, most important is the user noticed it. -
@mib2berlin For this, I’d use
[component="post"] { position: relative; }
and in the original CSS, replace the
margin-right
line withposition: absolute; left: 10px;
-
@potmeklecbohdan
Ah thanks, this is working.
I will try to find out for other OS as well.@luetage
May I can ask if you are interested to include this to your forum mod in one of the next versions?
I know it is more work to do as position of the icon change with different themes of the mod, for example.Thank you both, I will look in to CSS next days if I find out how to manage it for all OS.
Have a nice day, mib -
@mib2berlin The category number is included category links; to get the icon:
- inspect it
- its parent element has
background-color
in itsstyle
- its
::before
(expand the<i>
to see it) has thecontent
set via normal CSS.
You have to include all subcategories, I guess you want the color and icon only from the OS top category.
-
@potmeklecbohdan
Yep, was wondering why you have four category lines.
Will play around a bit.Cheers, mib
-
Was fun, seams to work now in all OS threads.
I am not sure about the colors, depends on your theme.### Icon setting for Android forum ### .page-topic-category-136 [component="post"]:not(.deleted) .post-tools::before, .page-topic-category-147 [component="post"]:not(.deleted) .post-tools::before, .page-topic-category-150 [component="post"]:not(.deleted) .post-tools::before, .page-topic-category-151 [component="post"]:not(.deleted) .post-tools::before { content: "\f17b"; color: #a4c639; position: absolute; left: 30px; vertical-align: middle; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 17px; text-rendering: auto; } ### Icon setting for Linux forum ### .page-topic-category-35 [component="post"]:not(.deleted) .post-tools::before, .page-topic-category-112 [component="post"]:not(.deleted) .post-tools::before, .page-topic-category-139 [component="post"]:not(.deleted) .post-tools::before { content: "\f17c"; #color: #3786d9; position: absolute; left: 30px; vertical-align: middle; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 17px; text-rendering: auto; } ### Icon setting for Windows forum ### .page-topic-category-32 [component="post"]:not(.deleted) .post-tools::before { content: "\f17a"; color: #3786d9; position: absolute; left: 30px; vertical-align: middle; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 17px; text-rendering: auto; } ### Icon setting for OSX forum ### .page-topic-category-34 [component="post"]:not(.deleted) .post-tools::before { content: "\f179"; #color: #3786d9; position: absolute; left: 30px; vertical-align: middle; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 17px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
Cheers, mib
-
@mib2berlin Yeah sure, why not. But I don’t think it makes sense to put this under every post, we could just let it float at the right end of the navigation bar.
-
@luetage
Hehe OK, thinking of the dullest user like me need it in every post.
I don´t understand, wich navigation bar?Mib
-
@mib2berlin The one that lets you navigate and is always visible at the top of the forum, it’s blue in standard theme.
-
@luetage
Ah OK. -
@mib2berlin I forgot about one thing, all that code can be shortened:
/*### Icon setting for Android forum ###*/ .page-topic-category-136 [component="post"]:not(.deleted) .post-tools::before, .page-topic-category-147 [component="post"]:not(.deleted) .post-tools::before, .page-topic-category-150 [component="post"]:not(.deleted) .post-tools::before, .page-topic-category-151 [component="post"]:not(.deleted) .post-tools::before { content: "\f17b"; color: #a4c639; } /*### Icon setting for Linux forum ###*/ .page-topic-category-35 [component="post"]:not(.deleted) .post-tools::before, .page-topic-category-112 [component="post"]:not(.deleted) .post-tools::before, .page-topic-category-139 [component="post"]:not(.deleted) .post-tools::before { content: "\f17c"; color: #3786d9; } /*### Icon setting for Windows forum ###*/ .page-topic-category-32 [component="post"]:not(.deleted) .post-tools::before { content: "\f17a"; color: #3786d9; } /*### Icon setting for OSX forum ###*/ .page-topic-category-34 [component="post"]:not(.deleted) .post-tools::before { content: "\f179"; color: #3786d9; } /*### Common style for all the icons ###*/ [component="post"]:not(.deleted) .post-tools::before { position: absolute; left: 30px; vertical-align: middle; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 17px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
-
@potmeklecbohdan
Very nice code cleanup, I will use this until @luetage have something to test.
I guess I will use both, per post icon and navigation bar icon.
To many times I post answers in the wrong forum.Cheers, mib
-
So, the guy finally decided to learn to fly by himself by using the "User CSS" of this awesome mod. And the guy is tired because it's very very late here... When you start, you never finish... Go to bed now! Stop flying.
-
@Ornorm said in Vivaldi Forum mod:
the guy
Huh, wonder who that might be, heehee. You must be exhausted... but it's now so late that it's early, hence no longer worth going to sleep. So, coffee-up, & keep going!
-
@Ornorm Wow! Awesome! Yes, it's a little bit addictive .
BTW, where does the picture come from? I mean: I'm able to use a background image (Transparent Texture), but I never managed to be able to use one from my computer.
-
@hlehyaric It's a gif (might be distracting for some)
https://media.giphy.com/media/xTiQykLdYMyX2UAxj2/giphy.gif
To replace the Vivaldi logo, I tried to use one from my computer but, indeed, I didn't find the right way to do it so, I had to use an internet link as well. -
@Ornorm Thanks my friend . So you use a picture from an external source as I do.
You might want to get rid of that blue nav bar… (yes, I'm a bad guy…)
replace the Vivaldi logo
Do you mean go back to the red icon?
-
@hlehyaric It's a work in progress so I could change the nav bar next time (tonight? ).
Nope, I used my own "home made" icon.
-
@Ornorm I thought you were trying to revert to the red icon. My mistake.
Night is the best time to tinker the forum .