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.
like this
reshared this
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';
}
.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;
}
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-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;
}
.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';
}
.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;
}
}