I gave Friendica a FB facelift with a user stylesheet in my browser. So now, at least for me, it has a more modern, familiar appearance.
Here's an example of the Home Feed:
And an example of the Global Feed:
This is pretty easy to do if you're using Firefox and a user content stylesheet. But you could also use the Stylus Add-On to do it. There is also a Stylus Extension for Chrome (and other Chromium-based browsers).
For Safari there is the Userscripts Extension in the App Store, which can also do user stylesheets.
Friendica needs Settings > Display > Theme set to the "Frio" theme.
Under Settings > Display > Theme Customization it needs to either be set to "Lite" or to "Custom" ("Dark" nor "Black" will not work).
If you set it to "Custom" you need to "Save" it first to see the options. Then you can copy+paste my "schemestring" into the box and "Save" again. Even if you don't apply the user styles that will get you a newer FB color scheme.
I haven't looked at any of the documentation for Friendica themes. I have no idea if my stylesheet could be adapted to a "Frio" variant/scheme. If anyone else who knows more about it wants to try feel free to do so. But even if it can the server admin would still have to make it an option. This way you can apply it yourself.
I'll try to add links to the stylesheet files in the comments, though this is my first time using Friendica's file attachment features.
My Custom schemestring: {"nav_bg":"#ffffff","nav_icon_color":"#606637","link_color":"#0866ff","background_color":"#f2f4f7","background_image":"","contentbg_transp":"100"}
@Kristi H. I replaced friendica.world with my instance to make it work. But holly, freaking hell, everything looks so huge. But comparing it with how Facebook actually looks, I can tell it looks pretty similar. It's been a while since I got so used with a normal PC-scale interface. The older Facebook still rocks!
I love the circular framed profile picture though.
Maybe if you can move the search bar and the icon a little bit to the right:
And also add labels to the like, comment etc. buttons and move them back to the left (the current layout is like this since summer) :D
I assumed people could tweak it to their liking since it won't affect anyone else. For the logo the element is "header #banner" and the buttons at the top are .topbar ul.nav and the search box is, unsurprisingly, #search-box. If you delete/comment-out those rules they'll go back to where they were.
I will probably make a dark mode version at some point, even though I don't use dark mode myself. It would have to be a separate user stylesheet though because there doesn't appear to be any way to differentiate which theme or variant is in use to make it work automatically.
I did originally label the response buttons, but I liked the cleaner look of them without. But if you want labels copy+paste this in the stylesheet right before #profile-photo-wrapper:
Updated version for Firefox with a few more minor tweaks, styling when viewing other people's profiles, and labeled action buttons (if you don't like the labels delete the entire "Action Button Labels" section - I've commented the code for what each section is modifying). Also removed styling for another domain that accidentally got into the file.
Updated version for Chrome and Safari - the only difference from Firefox version is it doesn't have the @moz-document part, since neither of those browsers understand that. You have to use this one in the Stylus Extension on Chrome or Userscripts extension on Safari:
I think the Photo Album thumbnails are way too small and the "masonry" layout looks messy. Insert this code snippet into the user stylesheet just before the media queries and you'll have larger, more consistent thumbnails (like FB albums view) and styled image management buttons. I'm not doing this a file attachment since I learned there's no way in Friendica to delete file attachments.
/* Photo Albums */
.photo-album-actions .icon-padding,
.photo-edit-link-wrap .icon-padding {
margin-left: 10px !important;
}
.photos-upload-link {
font-size: 28px;
color: #0866FF !important;
opacity: 1 !important;
border-radius: 8px;
padding: 0px 8px;
}
#photo-album-link {
opacity: 1 !important;
}
.photos-upload-link i,
#photo-album-link i,
#photo-edit-link i,
#photo-toprofile-link i,
#album-edit-link i,
#album-drop-link i,
.photos-order-link i {
font-size: 24px !important;
color: #0866FF !important;
opacity: 1 !important;
border-radius: 100% !important;
padding: 8px 11px !important;
height: 40px;
width: 40px;
}
#photo-edit-link i.fa-image {
padding: 6px 7px !important;
}
.photos-order-link {
margin-top: 5px !important;
}
.photos-upload-link:hover i,
.photos-upload-link:focus i,
#photo-album-link:hover i,
#photo-album-link:focus i,
#photo-edit-link:hover i,
#photo-toprofile-link:hover i,
#photo-toprofile-link:focus i,
#album-edit-link:hover i,
#album-edit-link:focus i,
#album-drop-link:hover i,
#album-drop-link:focus i,
.photos-order-link:hover i,
.photos-upload-link:hover i,
.photos-upload-link:focus i {
background-color: rgba(128,128,128,.1) !important;
}
.photos-content-wrapper .photos-upload-link::before {
content: 'Add Photos';
font-size: 15px;
vertical-align: middle;
margin-top: -10px;
display: inline-block;
}
.justified-gallery {
overflow: visible !important;
}
.justified-gallery > a,
.justified-gallery > div,
.justified-gallery > figure{
height: 180px !important;
width: 180px !important;
border: 1px solid #ccc;
position: relative !important;
top: auto !important;
left: auto !important;
border-radius: 8px;
margin: 4px !important;
}
.justified-gallery > .jg-entry-visible > img,
.justified-gallery > .jg-entry-visible > a > img,
.justified-gallery > .jg-entry-visible > svg,
.justified-gallery > .jg-entry-visible > a > svg{
width: 100% !important;
height: 100% !important;
margin: 0 !important;
top: 0 !important;
left: 0 !important;
object-fit:cover;
object-position: center;
}
#photo-photo {
margin: 0 auto !important;
}
Okay, here is my first try at the DARK MODE variant! Set your Friendica theme to "Frio" and the Theme Customization to either "Dark" or "Black" and Save your settings. Then copy and paste the code below into your user stylesheet and restart your browser. If you're using Firefox wrap all of it inside of @-moz-document domain(friendica.world){...} (or whatever domain you're on). Hopefully this works, I don't know what the character limit is here.
/* FRIENDICA MODS V2 DARK MODE */
body {
background-color: #1C1C1D !important;
font-size: 15px !important;
padding-top: 125px !important;
}
#topbar-first .nav > li > a,
#topbar-first .nav > li > button,
nav.navbar .nav > li > a, nav.navbar .nav > li > button{
color: #B0B3B8 !important;
So I finally saw some posts with "Events" so I could see how that worked. It didn't look so good:
So I restyled this with arguably the most convoluted bit of CSS that I've ever written so it conditionally adds space for a second horizontal row of buttons and then puts the buttons in that row like this:
I edited the action button and dark mode stuff above with the change. The line that makes the magic happen is this one:
But the .vote-event container itself is NEVER empty. It ALWAYS has three boxes in it. So I needed a way to check if the container has empty boxes in it, and if it doesn't then add space for a second row of response buttons. Such fun when you have no control over the document's structure. 😜
The "light mode" stylesheet works with the "Light" variant of Frio, but to make it look even better I do use this schemestring: {"nav_bg":"#ffffff","nav_icon_color":"#606637","link_color":"#0866ff","background_color":"#f2f4f7","background_image":"","contentbg_transp":"100"}
It doesn’t matter whether your views are left, right or somewhere in between—the latest news from Meta about changes to their policies directly undermines free speech. This should deeply concern us all.
For almost two years now polls in Canada have shown that the Conservative Party of Canada, led by Pierre Poilievre, Canada's answer to Donald Trump, have a commanding lead over the governing Liberal Party led until recently by Justin Trudeau. There is no doubt that this was a major factor leading to Trudeau's resignation, in the hope that the Liberal Party might recover lost ground under a new leader.
At the same time, I can't help feeling that the polls have a lot of influence on how Canadians will vote.
I wrote a thread on Mastodon about how this might work. The Conservative Party's messaging consists simply of repeating “Justin Trudeau is a horrible person and he should resign”. This is spread both by conventional media and corporate social media as news and commentary.
Then one day you get a phone call from a polling company asking whether you agree that Justin Trudeau is a horrible person and he should resign”. What are the odds that you will say yes, if you've been exposed to the statement repeatedly?
Polls are viewed as representing the most probable outcome of an election “if it were held today”. But that probability is only conditional. It is the probability that you will vote one way or another given that you've been exposed to a certain propaganda. I am sure that if in a parallel universe where the Conservative Party of Canada has not been hammering the message about Trudeau for years a similar poll was conducted, the result would be quite different.
But there's more. The poll itself has an influence on the election outcome. One reason is what is known as “social proof”. Gil Duran has a great post about this in The Framelab. He writes
People tend to copy what other people do. If something is popular, we tend to trust it more. When many other people buy a product or follow a trend, we tend to assume it’s good. Our brains are wired to look for clues from other people’s choices. It’s a basic human instinct to follow the crowd. “Monkey see, monkey do.”
If you see that a majority of your fellow voters will vote Conservative, you are more likely to do so yourself. Marketers know this very well.
The poll may also have another effect on the outcome of the election: If you are not a Conservative voter, but you are convinced that the Conservatives will win, that makes you less likely to take the trouble to vote. The poll becomes a self-fulfilling prophecy.
I see propaganda as a process, where a certain political message is spread to as many people as possible and then polling is a feedback mechanism that confirms that the message is true. Polling skeptics will scrutinize the methodology and the statistical methods, and I have been one of them, but I believe now that that is missing the point. The polls can be quite accurate in that they reflect popular opinion, and yet be a key component of the propaganda process.
OK, been playing Satisfactory since December 25th, when I got it as a Christmas gifts.
I'm struggling in the game. I think I hit the mid-game blues, and it's just frustrating at this point. I tried to do the Ficmas event, but because I was new, I didn't have the equipment to make what I needed to make. So I had to pause, work on getting the machines, then restart the ficmas stuff. The dependency trees are kind of obvious. How to work around terrain, less so. I've run into dependencies I can't do anything about, like mycelium. The first branch in the mycelium research tree is 5 mycelium. Guess how much I got the first and ONLY time I found mycelium in the game? Yep, 4.
I recently upgraded my scanner to find enemies, and now I'm too scared to actually explore. I don't know why-- I was relatively fearless before. I finally sneaked around till I found an impure quartz node so I could work the quartz research tree. I'm about 50 game days in (hard to tell-- I died twice.)
I see pics and videos of really gorgeous Satisfactory setups, and I'm so impressed. And then mine? Mine looks like this:
Just absolute spaghetti. Anyway, I know I'm just complaining, but what is the Internet for but to whine about video games, right?
I think I'm going to put this one down for a while and do something more productive with my time, like eat yogurt or burn things.
Starting to explore migrating away from corporate social media like Facebook or Twitter, to the fediverse. The biggest obstacle is of course the network effect: I have a group of friends on Facebook, we all follow each other, will they migrate with me? I guess I'll find out. I am doing this gradually, first migrating to the fediverse (links in my profile), and starting a blog at write.as/leastaction/ with some longer pieces about topics that interest me: the meaning of democracy is a big one for me these days. And yes, the rise of oligarchic despots around the world.
If any of these things resonate with you, do let me know. I am very happy to have conversations about these important topics.
What's a good app for this on android? I'm currently using fedilab but I don't like having mastodon using the same app as this for autism related reasons.
I'm very new to this (as of yesterday, actually 🙈), and I found this page listing some mobile clients.
I'm experimenting with using the "Raccoon for Friendica" (via F-Droid), and also the one you're using, "Fedilab". I'm still learning to navigate, so I'm also using Firefox ("Add to Home page") from my smartphone (this is from desktop, though). Maybe the last one is worth a try for you - just go via a web browser?
I can't believe this is the global server and it's only like a couple hundred people here. I love it though, growing tired of the massive metaverse. Greetings from around the middle of the Europe! 👋✌️
Kristi H.
in reply to Kristi H. • •Rob Meyer likes this.
Kristi H.
in reply to Kristi H. • •Kristi H.
in reply to Kristi H. • •{"nav_bg":"#ffffff","nav_icon_color":"#606637","link_color":"#0866ff","background_color":"#f2f4f7","background_image":"","contentbg_transp":"100"}
ruedi
in reply to Kristi H. • •like this
Rob Meyer and Sunshine like this.
Cătă
in reply to Kristi H. • • •@Kristi H. I replaced
friendica.worldwith my instance to make it work. But holly, freaking hell, everything looks so huge. But comparing it with how Facebook actually looks, I can tell it looks pretty similar. It's been a while since I got so used with a normal PC-scale interface. The older Facebook still rocks!I love the circular framed profile picture though.
Maybe if you can move the search bar and the icon a little bit to the right:
And also add labels to the like, comment etc. buttons and move them back to the left (the current layout is like this since summer) :D
Also, a dark mode would be a welcome addition
Kristi H.
in reply to Cătă • •I assumed people could tweak it to their liking since it won't affect anyone else. For the logo the element is "header #banner" and the buttons at the top are .topbar ul.nav and the search box is, unsurprisingly, #search-box. If you delete/comment-out those rules they'll go back to where they were.
I will probably make a dark mode version at some point, even though I don't use dark mode myself. It would have to be a separate user stylesheet though because there doesn't appear to be any way to differentiate which theme or variant is in use to make it work automatically.
I did originally label the response buttons, but I liked the cleaner look of them without. But if you want labels copy+paste this in the stylesheet right before #profile-photo-wrapper:
.wall-item-actions-row button,
.wall-item-actions-right button {
display: block;
white-space: normal !important;
margin: 0 auto !important;
}
.wall-item-actions-row button::after,
.wall-item-actions-right button::after {
font-size: 14px;
font-family: sans-serif;
display: block;
margin-top: 2px;
}
.button-comments::after {
content: 'Comment';
}
.button-announces::after {
content: 'Share';
}
.button-votes::after {
content: 'Quote';
}
.button-likes::after {
content: 'Like';
}
.wall-item-actions-right .dropdown-toggle::after{
content: 'More';
}
.wall-item-response span {
text-align: center;
display: block;
}
They look like this with the counts below:
Kristi H.
in reply to Kristi H. • •Kristi H.
in reply to Kristi H. • •Kristi H.
in reply to Kristi H. • •I think the Photo Album thumbnails are way too small and the "masonry" layout looks messy. Insert this code snippet into the user stylesheet just before the media queries and you'll have larger, more consistent thumbnails (like FB albums view) and styled image management buttons. I'm not doing this a file attachment since I learned there's no way in Friendica to delete file attachments.
/* Photo Albums */
.photo-album-actions .icon-padding,
.photo-edit-link-wrap .icon-padding {
margin-left: 10px !important;
}
.photos-upload-link {
font-size: 28px;
color: #0866FF !important;
opacity: 1 !important;
border-radius: 8px;
padding: 0px 8px;
}
#photo-album-link {
opacity: 1 !important;
}
.photos-upload-link i,
#photo-album-link i,
#photo-edit-link i,
#photo-toprofile-link i,
#album-edit-link i,
#album-drop-link i,
.photos-order-link i {
font-size: 24px !important;
color: #0866FF !important;
opacity: 1 !important;
border-radius: 100% !important;
padding: 8px 11px !important;
height: 40px;
width: 40px;
}
#photo-edit-link i.fa-image {
padding: 6px 7px !important;
}
.photos-order-link {
margin-top: 5px !important;
}
.photos-upload-link:hover i,
.photos-upload-link:focus i,
#photo-album-link:hover i,
#photo-album-link:focus i,
#photo-edit-link:hover i,
#photo-toprofile-link:hover i,
#photo-toprofile-link:focus i,
#album-edit-link:hover i,
#album-edit-link:focus i,
#album-drop-link:hover i,
#album-drop-link:focus i,
.photos-order-link:hover i,
.photos-upload-link:hover i,
.photos-upload-link:focus i {
background-color: rgba(128,128,128,.1) !important;
}
.photos-content-wrapper .photos-upload-link::before {
content: 'Add Photos';
font-size: 15px;
vertical-align: middle;
margin-top: -10px;
display: inline-block;
}
.justified-gallery {
overflow: visible !important;
}
.justified-gallery > a,
.justified-gallery > div,
.justified-gallery > figure{
height: 180px !important;
width: 180px !important;
border: 1px solid #ccc;
position: relative !important;
top: auto !important;
left: auto !important;
border-radius: 8px;
margin: 4px !important;
}
.justified-gallery > .jg-entry-visible > img,
.justified-gallery > .jg-entry-visible > a > img,
.justified-gallery > .jg-entry-visible > svg,
.justified-gallery > .jg-entry-visible > a > svg{
width: 100% !important;
height: 100% !important;
margin: 0 !important;
top: 0 !important;
left: 0 !important;
object-fit:cover;
object-position: center;
}
#photo-photo {
margin: 0 auto !important;
}
It will look like this:
Kristi H.
in reply to Kristi H. • •Revised button labels styling so engagement counts aren't just hanging below the buttons but are more consistent with other notification counts:
/* ACTION BUTTON LABELS */
.wall-item-actions-row button,
.wall-item-actions-right button {
display: block;
white-space: normal !important;
margin: 0 auto !important;
}
.wall-item-actions-row button::after,
.wall-item-actions-right button::after {
font-size: 14px;
font-family: sans-serif;
display: block;
margin-top: 2px;
}
.wall-item-response {
overflow: visible !important;
}
.button-comments::after {
content: 'Comment';
}
.button-announces::after {
content: 'Share';
}
.share-links .dropdown-toggle::after {
content: 'Share';
}
.button-votes::after {
content: 'Quote';
}
.button-likes::after {
content: 'Like';
}
[id^="dislike-"]::after{
content: 'Dislike';
}
.wall-item-actions-right .dropdown-toggle::after,
.more-links .dropdown-toggle::after {
content: 'More';
}
.wall-item-response span {
position: relative;
text-align: center;
display: block;
background-color: #0866FF;
box-shadow: -1px 1px 1px #fff;
border-radius: 4px;
color: #fff;
font-size: 12px;
font-weight: 700;
width: fit-content;
padding: 0px 7px;
margin-left: 55%;
top: -62px;
z-index: 1;
}
.vote-event:not(:has(.wall-item-response:empty)) {
padding-bottom: 135px;
}
.vote-event .wall-item-response{
position: absolute;
top: 63px;
}
.vote-event .wall-item-response:empty{
display: none;
}
.vote-event .wall-item-response:nth-of-type(1){
left: 15px;
}
.vote-event .wall-item-response:nth-of-type(1) .button-event::after{
content: 'Going';
}
.vote-event .wall-item-response:nth-of-type(2){
left: 105px;
}
.vote-event .wall-item-response:nth-of-type(2) .button-event::after{
content: 'Can\'t Go';
}
.vote-event .wall-item-response:nth-of-type(3){
left: 204px;
}
.vote-event .wall-item-response:nth-of-type(3) .button-event::after{
content: 'Maybe';
}
/* END OF ACTION BUTTON LABELS */
Kristi H.
in reply to Kristi H. • •Okay, here is my first try at the DARK MODE variant! Set your Friendica theme to "Frio" and the Theme Customization to either "Dark" or "Black" and Save your settings. Then copy and paste the code below into your user stylesheet and restart your browser. If you're using Firefox wrap all of it inside of @-moz-document domain(friendica.world){...} (or whatever domain you're on). Hopefully this works, I don't know what the character limit is here.
/* FRIENDICA MODS V2 DARK MODE */
body {
background-color: #1C1C1D !important;
font-size: 15px !important;
padding-top: 125px !important;
}
#topbar-first .nav > li > a,
#topbar-first .nav > li > button,
nav.navbar .nav > li > a, nav.navbar .nav > li > button{
color: #B0B3B8 !important;
}
#topbar-first, nav.navbar {
background-color: #252728 !important;
color: #B0B3B8 !important;
}
#topbar-first .topbar-nav .nav-segment {
margin-right: 10px;
}
#topbar-first .nav > li > a:hover:not(.selected) {
background-color: rgba(255,255,255,.1) !important;
border-radius: 8px !important;
}
.fa-lg {
font-size: 24px !important;
}
#topbar-first .nav > li > a:hover,
#topbar-first .nav > li > a:focus,
#topbar-first .nav > li > button:not(#main-menu):hover,
#topbar-first .nav > li > button:not(#main-menu):focus,
nav.navbar .nav > li > a:hover,
nav.navbar .nav > li > a:focus,
nav.navbar .nav > li > button:hover,
nav.navbar .nav > li > button:focus {
background-color: rgba(255,255,255,.1) !important;
border-radius: 8px !important;
}
#topbar-first .nav > li > a.selected {
border-bottom: 3px solid #0866FF !important;
color: #0866FF !important;
}
#topbar-first .nav > li > a.selected:hover,
#topbar-first .nav > li > #main-menu:hover,
#topbar-first .nav > li > #main-menu:focus {
background-color: transparent !important;
border-radius: 0 !important;
}
ul.tabs li {
font-size: 15px !important;
margin-left: 10px !important;
}
ul.tabs li.active {
border-color: #0866FF !important;
}
ul.tabs li a {
margin-top: 8px;
color: rgb(90, 167, 255) !important;
}
ul.tabs li:hover:not(.active) {
border-bottom-width: 0px !important;
}
ul.tabs li:hover:not(.active) a {
background-color: rgba(255,255,255,.1) !important;
border-radius: 8px !important;
}
.dropdown-menu {
padding-bottom: 15px !important;
}
.dropdown-menu li {
margin: 10px;
width: 92% !important;
border-radius: 8px;
}
.dropdown-menu li:hover {
border-color: transparent !important;
}
header #banner {
left: 0 !important;
right: auto !important;
}
header #banner #logo-img,
.navbar-brand #logo-img {
background-color: #0866FF !important;
height: 40px !important;
width: 40px !important;
}
.topbar ul.nav {
left: 50% !important;
margin-left: -25% !important;
position: relative;
}
#topbar-first .nav > .account img {
border-radius: 100% !important;
box-shadow: 0 0 1px rgba(255,255,255,.1) !important;
height: 40px !important;
width: 40px !important;
}
#search-box {
position: fixed !important;
left: 100px;
}
#topbar-first #search-box .form-search {
height: 40px !important;
font-size: 15px;
background-position: unset;
box-shadow: none !important;
}
#search-box form > div {
background-color: #333334;
border-radius: 50px;
}
#search-box form > div::before {
content: '\f002';
font-family: ForkAwesome;
position: absolute;
left: 10px;
top: 8px;
}
#search-box .form-control.form-search {
border-radius: 50px !important;
background: transparent !important;
width: 100% !important;
}
#search-box .form-control::placeholder {
color: #B0B3B8 !important;
}
#topbar-first #search-box .btn {
font-size: 0px !important;
height: 32px;
width: 32px;
top: 2px !important;
background-color: black !important;
}
#topbar-first #search-box .btn::before {
content: '\f061';
font-family: ForkAwesome;
font-size: 15px;
color: #B0B3B8;
}
#nav-user-menu, #nav-notifications-menu {
background-color: #252728 !important;
border: 1px solid #1C1C1D !important;
}
#nav-user-menu {
min-width: 250px !important;
}
.nav-pills .dropdown-menu li a,
.nav-pills .dropdown-menu li .btn-link,
.nav-tabs .dropdown-menu li a,
.nav-tabs .dropdown-menu li .btn-link,
.account .dropdown-menu li a,
.account .dropdown-menu li .btn-link,
.contact-photo-wrapper .dropdown-menu li a,
.contact-photo-wrapper .dropdown-menu li .btn-link {
color: #B0B3B8 !important;
border-color: #252728 !important;
}
.nav-pills .dropdown-menu li > a:hover,
.nav-tabs .dropdown-menu li > a:hover,
.account .dropdown-menu li > a:hover,
.contact-photo-wrapper .dropdown-menu li > a:hover,
.nav-pills .dropdown-menu li.selected a,
.nav-tabs .dropdown-menu li.selected a,
.account .dropdown-menu li.selected a,
.contact-photo-wrapper .dropdown-menu li.selected a {
color: #333 !important;
background: #f2f2f2 !important;
border-radius: 8px;
}
.nav-pills .dropdown-menu li.divider,
.nav-tabs .dropdown-menu li.divider,
.account .dropdown-menu li.divider,
.contact-photo-wrapper .dropdown-menu li.divider {
background-color: #252728 !important;
}
#topbar-first #nav-notifications-menu {
border: 1px solid #1C1C1D !important;
}
#topbar-first #nav-notifications-menu li {
border-color: transparent !important;
box-sizing: border-box;
margin: 10px;
border-radius: 10px !important;
width: 94% !important;
}
#topbar-first .notification-unseen {
background-color: rgba(56, 88, 152,.2) !important
}
#topbar-first #nav-notifications-menu li.notif-entry:hover{
background-color:rgba(128,128,128,.2) !important;
border-color: transparent !important;
}
#topbar-second {
height: 60px !important;
background-color: #252728 !important;
border-color: #333 !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
border-radius: 8px !important;
}
#dropdownMenuTools {
height: 40px;
width: 40px;
background-color: rgba(255,255,255,.1) !important;
border-radius: 100% !important;
margin-top: 5px !important;
margin-right: 10px !important;
}
#dropdownMenuTools:hover,
#dropdownMenuTools:focus {
background-color: rgba(0,0,0,.1) !important;
}
#jotOpen {
border-radius: 8px !important;
background-color: #0866FF !important;
color: #ffffff !important;
border-color: #000 !important;
box-shadow: none !important;
}
#jotOpen:hover, #jotOpen:focus {
box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
}
#jotOpen::before {
content: 'Compose';
font-size: 15px;
margin-right: 10px;
line-height: 32px;
position: relative;
display: inline;
top: -4px;
}
#jotOpen .fa-pencil-square-o {
font-size: 32px !important;
position: relative;
top: 4px;
}
#topbar-second #nav-short-info {
margin-top: 10px;
}
/* Other people profiles */
#mention-link {
border-radius: 8px !important;
background-color: #0866FF !important;
color: #ffffff !important;
border-color: #000 !important;
box-shadow: none !important;
padding: 0 16px !important;
}
#mention-link:hover,
#mention-link:focus {
box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
}
#mention-link span:first-of-type {
float: right;
font-size: 32px;
top: 4px;
}
#mention-link span:first-of-type .fa-2x {
font-size: inherit !important;
}
#mention-link span:last-of-type {
font-size: 15px;
margin-right: 10px;
line-height: 32px;
top: 6px;
position:relative;
}
#contact-edit-status-wrapper {
margin: 15px 0px !important;
border-radius: 10px;
}
/* sidebar widgets */
aside .widget,
.nav-container .widget {
background-color: #1C1C1D !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.tread-wrapper {
background-color: rgb(37, 39, 40) !important;
box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
border-radius: 10px !important;
}
.wall-item-container .media {
background-color: rgb(37, 39, 40) !important;
border-radius: 10px !important;
}
.well {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.contact-photo,
.contact-photo-xs {
border-radius: 100% !important;
border: 1px solid #252728 !important;
}
.hovercard {
background-color: #252728 !important;
border: 1px solid #1C1C1D !important;
}
.hover-card-pic img.thumbnail {
border-radius: 100% !important;
background-color: #1C1C1D !important;
border-color: black !important;
}
p.wall-item-announce,
.media .time, .media .shared-time,
.media .delivery, .media .location,
.media .location a {
font-size: 13px !important;
}
.type-link, .type-video {
padding: 0 !important;
margin: 0 !important;
background-color: rgb(51, 51, 52) !important;
border: 1px solid rgb(101, 104, 108) !important;
}
.type-link h4, .type-link blockquote, .type-link sup,
.type-video h4, .type-video blockquote, .type-video sup {
padding-left: 10px !important;
padding-right: 10px !important;
}
/* ACTION BUTTON LABELS */
.wall-item-actions-row button,
.wall-item-actions-right button {
display: block;
white-space: normal !important;
margin: 0 auto !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.wall-item-actions-row button::after,
.wall-item-actions-right button::after {
font-size: 14px;
font-family: sans-serif;
display: block;
margin-top: 2px;
}
.wall-item-response {
overflow: visible !important;
}
.button-comments::after {
content: 'Comment';
}
.button-announces::after {
content: 'Share';
}
.share-links .dropdown-toggle::after {
content: 'Share';
}
.button-votes::after {
content: 'Quote';
}
.button-likes::after {
content: 'Like';
}
[id^="dislike-"]::after{
content: 'Dislike';
}
.wall-item-actions-right .dropdown-toggle::after,
.more-links .dropdown-toggle::after {
content: 'More';
}
.wall-item-response span {
position: relative;
text-align: center;
display: block;
background-color: #0866FF;
box-shadow: -1px 1px 1px #000;
border-radius: 4px;
color: #fff;
font-size: 12px;
font-weight: 700;
width: fit-content;
padding: 0px 7px;
margin-left: 55%;
top: -62px;
z-index: 1;
}
.vote-event:not(:has(.wall-item-response:empty)){
padding-bottom: 135px;
}
.vote-event .wall-item-response{
position: absolute;
top: 63px;
}
.vote-event .wall-item-response:empty{
display: none;
}
.vote-event .wall-item-response:nth-of-type(1){
left: 15px;
}
.vote-event .wall-item-response:nth-of-type(1) .button-event::after{
content: 'Going';
}
.vote-event .wall-item-response:nth-of-type(2){
left: 105px;
}
.vote-event .wall-item-response:nth-of-type(2) .button-event::after{
content: 'Can\'t Go';
}
.vote-event .wall-item-response:nth-of-type(3){
left: 204px;
}
.vote-event .wall-item-response:nth-of-type(3) .button-event::after{
content: 'Maybe';
}
/* END OF ACTION BUTTON LABELS */
#profile-photo-wrapper {
overflow: visible !important;
padding: 5px;
background-color: #1C1C1D;
border-radius: 100%
}
aside .widget li {
margin-bottom: 8px;
}
aside .vcard img.u-photo, aside img.vcard-photo {
border-radius: 100% !important;
box-shadow: 0 0 1px rgba(0,0,0,.3);
border: 3px solid #1C1C1D;
}
aside .widget h3.p-name {
font-size: 32px !important;
text-align: center;
word-break: break-word;
}
aside .vcard .p-addr {
font-weight: 600;
text-align: center;
white-space: break-spaces !important;
}
aside .widget li.selected {
background-color:rgba(56, 88, 152,.2) !important;
border-color: transparent !important;
border-radius: 8px;
}
aside .widget li.selected a {
font-weight: bold;
}
aside .widget li:hover {
background-color:rgba(128,128,128,.2) !important;
border-color: transparent !important;
border-radius: 8px;
}
#widget-contacts {
background-color: rgb(37, 39, 40) !important;
border-radius: 8px !important;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2) !important;
}
.contact-block-img {
height: 100px !important;
width: 100px !important;
border-radius: 8px !important;
box-shadow: 0 0 1px rgba(0, 0, 0, .2);
margin: 5px;
}
.comment-fake-form {
border: none !important;
background-color: transparent !important;
}
.comment-fake-form textarea {
border-radius: 50px !important;
background-color: rgb(51, 51, 52) !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
.wall-item-actions button {
font-size: 24px !important;
color: #B0B3B8 !important;
}
.wall-item-actions button:hover {
color: #0866FF !important;
}
.wall-item-actions .checkbox {
padding-top: 6px !important;
}
.comment .media-body {
padding: 10px;
background-color: rgb(51, 51, 52);
border-radius: 20px;
}
.wall-item-actions-row .wall-item-emoji {
font-size: 18px;
line-height: 40px;
}
.navicon {
font-size: 20px;
position: relative;
top: 1px;
}
/* not obviously clickable or intuitive what it does */
.plink.u-url::before {
Content: 'Link: ';
}
.img-allocated-max-width {
margin: 20px auto;
}
/* Photo Albums */
.photo-album-actions .icon-padding,
.photo-edit-link-wrap .icon-padding {
margin-left: 10px !important;
}
.photos-upload-link {
font-size: 28px;
color: #0866FF !important;
opacity: 1 !important;
border-radius: 8px;
padding: 0px 8px;
}
#photo-album-link {
opacity: 1 !important;
}
.photos-upload-link i,
#photo-album-link i,
#photo-edit-link i,
#photo-toprofile-link i,
#album-edit-link i,
#album-drop-link i,
.photos-order-link i {
font-size: 24px !important;
color: #0866FF !important;
opacity: 1 !important;
border-radius: 100% !important;
padding: 8px 11px !important;
height: 40px;
width: 40px;
}
#photo-edit-link i.fa-image {
padding: 6px 7px !important;
}
.photos-order-link {
margin-top: 5px !important;
}
.photos-upload-link:hover i,
.photos-upload-link:focus i,
#photo-album-link:hover i,
#photo-album-link:focus i,
#photo-edit-link:hover i,
#photo-toprofile-link:hover i,
#photo-toprofile-link:focus i,
#album-edit-link:hover i,
#album-edit-link:focus i,
#album-drop-link:hover i,
#album-drop-link:focus i,
.photos-order-link:hover i,
.photos-upload-link:hover i,
.photos-upload-link:focus i {
background-color: rgba(255,255,255,.1) !important;
}
.photos-content-wrapper .photos-upload-link::before {
content: 'Add Photos';
font-size: 15px;
vertical-align: middle;
margin-top: -10px;
display: inline-block;
}
.justified-gallery {
overflow: visible !important;
}
.justified-gallery > a,
.justified-gallery > div,
.justified-gallery > figure{
height: 180px !important;
width: 180px !important;
border: 1px solid #ccc;
position: relative !important;
top: auto !important;
left: auto !important;
border-radius: 8px;
margin: 4px !important;
}
.justified-gallery > .jg-entry-visible > img,
.justified-gallery > .jg-entry-visible > a > img,
.justified-gallery > .jg-entry-visible > svg,
.justified-gallery > .jg-entry-visible > a > svg{
width: 100% !important;
height: 100% !important;
margin: 0 !important;
top: 0 !important;
left: 0 !important;
object-fit:cover;
object-position: center;
}
#photo-photo {
margin: 0 auto !important;
}
@media screen and (max-width: 1280px) {
#search-box {
width: 18% !important;
}
}
@media screen and (max-width: 991px){
#search-box {
left: 15%;
}
#jotOpen::before {
content: '';
margin: 0;
}
#mention-link span:last-of-type {
margin-right: 42px;
}
}
@media screen and (max-width: 768px){
#topbar-first .navbar-toggle[data-target="#search-mobile"]{
position: fixed !important;
left: 15%;
}
#search-mobile {
top: 110px !important;
}
}
Kristi H.
in reply to Kristi H. • •So I finally saw some posts with "Events" so I could see how that worked. It didn't look so good:
So I restyled this with arguably the most convoluted bit of CSS that I've ever written so it conditionally adds space for a second horizontal row of buttons and then puts the buttons in that row like this:
I edited the action button and dark mode stuff above with the change. The line that makes the magic happen is this one:
.vote-event:not(:has(.wall-item-response:empty)){...}
Now that is some freaking alchemy!
But the .vote-event container itself is NEVER empty. It ALWAYS has three boxes in it. So I needed a way to check if the container has empty boxes in it, and if it doesn't then add space for a second row of response buttons. Such fun when you have no control over the document's structure. 😜
chef 😎
in reply to Kristi H. • • •Looks good. 👍🏼
Will try that later.
Please share your schemestring so I can try it. Got the rest figured out.
Kristi H.
in reply to chef 😎 • •{"nav_bg":"#ffffff","nav_icon_color":"#606637","link_color":"#0866ff","background_color":"#f2f4f7","background_image":"","contentbg_transp":"100"}