Skip to main content

friendica (DFRN) - Link to source

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.

reshared this

in reply to Kristi H.

Kristi H.
friendica (DFRN) - Link to source
Kristi H.
•
Stylesheet for Firefox (either as userContent.css or copy+paste into Stylus):
in reply to Kristi H.

Kristi H.
friendica (DFRN) - Link to source
Kristi H.
•
My Custom schemestring:
{"nav_bg":"#ffffff","nav_icon_color":"#606637","link_color":"#0866ff","background_color":"#f2f4f7","background_image":"","contentbg_transp":"100"}
in reply to Kristi H.

ruedi
friendica (DFRN) - Link to source
ruedi
•
Looks good. Works in Vivaldi and Opera. 👍
in reply to Kristi H.

Cătă
friendica - Link to source
Cătă
• •

@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:
Friendica
Facebook

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.
This entry was edited (1 day ago)
in reply to Cătă

Kristi H.
friendica (DFRN) - Link to source
Kristi H.
•

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:

in reply to Kristi H.

Kristi H.
friendica (DFRN) - Link to source
Kristi H.
•
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.
in reply to Kristi H.

Kristi H.
friendica (DFRN) - Link to source
Kristi H.
•
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:
in reply to Kristi H.

Kristi H.
friendica (DFRN) - Link to source
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:

⇧