Skip to main content



Dark Mode V3 of my Friendica FB Facelift user stylesheet. If you're using the Firefox userContent.css make sure to wrap all of this in @-moz-document domain(friendica.world){...} (or whichever server you're on). Otherwise copy+paste into the Stylus add-on for Firefox or Stylus extension for Chrome or the Userscripts extension for Safari. Then in your Friendica Settings - Display - Theme pick "Frio" and under Settings - Display - Theme Customization either pick "Dark" or "Black." Note that the dark mode version does not use a custom schemestring.

The Stylesheet:

/* FRIENDICA MODS V3 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;
       }
    /* Compose Window */
    #upload-photo {
        background-color: #0866FF !important;
        color: white !important;
        border-radius: 8px !important;
    }
     #upload-photo:hover,
     #upload-photo:focus {
        background-color: darkblue !important;
    }
    /* hide attach file option since there is no way to manage attachments */
    .fbswitcher [data-mode="attachment"] {
           display: none !important;
    }
/* 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 {
              position: relative;
              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 {
              position: relative;
              padding-top: 4px;
       }
       .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';
       }
       /* engagement counts */
       .wall-item-actions-row > button span,
       .wall-item-response span {
              position: absolute;
              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;
              left: 55%;
              top: 0px;
              z-index: 1;
       }
        /* this is some freaking ALCHEMY! */
        .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,
        [id^="attendyes"]::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,
        [id^="attendno"]::after{
            content: 'Can\'t Go';
            position: relative;
            height: 20px;
            overflow: hidden; /* or skews mobile button layout */
        }
        .vote-event .wall-item-response:nth-of-type(3){
            left: 204px;
        }
        .vote-event .wall-item-response:nth-of-type(3) .button-event::after,
        [id^="attendmaybe"]::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 {
        -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
        box-shadow: 0 0 1px rgba(255,255,255,.5);
        border-radius: 100%;
        position: relative;
        padding: 6px 4px;
        height: 35px;
        width:  35px;
        display: block;
    }
        .plink.u-url:hover {
            background-color: rgba(255,255,255,.1) !important;
            text-decoration: none !important;
        }
        .plink.u-url::after {
              content: '\f101';
              font-family: ForkAwesome;
              color: #666;
        }        
.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;
    }
}

reshared this

in reply to Kristi H.

@kmh Excellent! Just a tip: Friendica allows code formatting, which makes readability better, while also escaping the code (depending on markup language, some sequences or characters, such as asterisk and underline, could accidentally be parsed as bold/italic).

I don't fully remember which one is the valid syntax for the web version, I guess it's the markdown one (I'm using an Android app to access Friendica, and the app allows me to set either bbcode, html or markdown):

Bbcode: [ code ]your code[ /code ] (remove the spaces)
Html: < code >your code< /code > (remove the spaces)
Markdown: three grave accents (`) in a single line, then the code, then another single line with three grave accents.

Example:

html, body {
margin: 0px;
padding: 0px;
height: 100%;
}

Becomes:
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}

Hope this helps!

in reply to Daemon Silverstein

Thanks! I put the entire thing inside of [pre]...[/pre] but somehow I scrolled right past the "code blocks" part of the Friendica BBCode reference.


Light Mode V3 of my Friendica FB Facelift user stylesheet. If you're using the Firefox userContent.css make sure to wrap all of this in @-moz-document domain(friendica.world){...} (or whichever server you're on). Otherwise copy+paste into the Stylus add-on for Firefox or Stylus extension for Chrome or the Userscripts extension for Safari. Then in your Friendica Settings - Display - Theme pick "Frio" and under Settings - Display - Theme Customization either pick "Light" or "Custom." If you pick "Custom" save settings, go back to that section, and copy+paste this schemestring in the box:

{"nav_bg":"#ffffff","nav_icon_color":"#606637","link_color":"#0866ff","background_color":"#f2f4f7","background_image":"","contentbg_transp":"100"}

The stylesheet:

/* FRIENDICA MODS V3 LIGHT MODE */
    body {
        background-color: #f2f4f7 !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: #65686C !important;
        
        }
    #topbar-first, nav.navbar {
        background-color: #ffffff !important;
        color: #65686C !important;
    }
        #topbar-first .topbar-nav .nav-segment {
            margin-right: 10px;
        }
        #topbar-first .nav > li > a:hover:not(.selected) {
            background-color: rgba(128,128,128,.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(128,128,128,.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 a {
            margin-top: 8px;
        }
        ul.tabs li:hover:not(.active) {
            border-bottom-width: 0px !important;
        }
            ul.tabs li:hover:not(.active) a {
                background-color: rgba(128,128,128,.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;
    }
    #search-box form > div {
        background-color: #f2f4f7;
        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: #666 !important;
    }
    #topbar-first #search-box .btn {
        font-size: 0px !important;
          height: 32px;
        width: 32px;
        top: 2px !important;
        background-color: white !important;
    }
    #topbar-first #search-box .btn::before {
        content: '\f061';
        font-family: ForkAwesome;
        font-size: 15px;
        color: #666;
    }
    #nav-user-menu {
        background-color: #ffffff !important;
        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: #65686C !important;
        border-color: white !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: #ffffff !important;
    }    
    #topbar-second {
        height: 60px !important;
    }
        .btn.btn-primary:hover,
        .btn.btn-primary:focus {
            border-radius: 8px !important;
        }
        #dropdownMenuTools {
            height: 40px;
            width: 40px;
            background-color: rgba(128,128,128,.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;
        }
        #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;
        }
    /* Compose Window */
    #upload-photo {
        background-color: #0866FF !important;
        color: white !important;
        border-radius: 8px !important;
    }
     #upload-photo:hover,
     #upload-photo:focus {
        background-color: darkblue !important;
    }
    /* hide attach file option since there is no way to manage attachments */
    .fbswitcher [data-mode="attachment"] {
           display: none !important;
    }
    /* Other people profiles */
    #mention-link {
        background-color: #0866FF !important;
        color: white !important;;
        border-radius: 8px !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: #f2f4f7 !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }
    .tread-wrapper {
      box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
      border-radius: 10px !important;
    }
    .wall-item-container .media {
        background-color: #ffffff !important;
        border-radius: 10px !important;
    }
        .contact-photo,
        .contact-photo-xs {
            border-radius: 100% !important;
            border: 1px solid #eee !important;
        }
        .hover-card-pic img.thumbnail {
            border-radius: 100% !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(240, 242, 245) !important;
                border: 1px solid rgb(208,211,215) !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 {
            position: relative;
            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 {
            position: relative;
            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';
        }
        /* engagement counts */
        .wall-item-actions-row > button span,
        .wall-item-response span {
            position: absolute;
            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;
            left: 55%;
            top: 0px;
            z-index: 1;
        }
        /* this is some freaking ALCHEMY! */
        .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,
        [id^="attendyes"]::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,
        [id^="attendno"]::after{
            content: 'Can\'t Go';
            position: relative;
            height: 20px;
            overflow: hidden; /* or skews mobile button layout */
        }
        .vote-event .wall-item-response:nth-of-type(3){
            left: 204px;
        }
        .vote-event .wall-item-response:nth-of-type(3) .button-event::after,
        [id^="attendmaybe"]::after{
            content: 'Maybe';
        }
        /* END OF ACTION BUTTON LABELS */        
    #profile-photo-wrapper {
        overflow: visible !important;
        padding: 5px;
        background-color: #ffffff;
        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 white;
    }    
    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(128,128,128,.1) !important;
        border-color: transparent !important;
        border-radius: 8px;
    }
    aside .widget li.selected a {
        font-weight: bold;
    }
    aside .widget li:hover {
        background-color:rgba(255,255,255,1) !important;
        border-color: transparent !important;
        border-radius: 8px;
    }
    #widget-contacts {
        background-color: #ffffff !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;
    }    
    .wall-item-actions button {
      font-size: 24px !important;
        color: #65686C !important;
    }
        .wall-item-actions button:hover {
            color: #0866FF !important;
        }
        .wall-item-actions .checkbox {
            padding-top: 6px !important;
        }
        .comment .media-body {
            padding: 10px;
            background-color: #f2f4f7;
            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 {
        -webkit-box-shadow: 0 0 1px rgba(0,0,0,.5);
        box-shadow: 0 0 1px rgba(0,0,0,.5);
        border-radius: 100%;
        position: relative;
        padding: 6px 4px;
        height: 35px;
        width:  35px;
        display: block;
    }
        .plink.u-url:hover {
            background-color: rgba(0,0,0,.1) !important;
            text-decoration: none !important;
        }
        .plink.u-url::after {
              content: '\f101';
              font-family: ForkAwesome;
              color: #666;
        }    
    .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(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;
}    

    @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;
        }
    }    





Tap tap tap


Testing testing, this thing working? Coming to Friendica from that other blue book site, already on Mastodon, I'm a big fan of the Fediverse and ActivityPub protocol. Let's see if I can get this thing going, gonna take some time but gonna give it a shot.
in reply to Kai Chang 張文愷

Welcome to your new home! Please bring your friends and family on-board.


I’m going to try a cooking experiment now!


Everyone in my household fell madly in love with a type of seed cracker. I know, it doesn’t sound very exciting, but maybe you just haven’t had these crackers? Anyway, they are $7-9 dollars a box, which is highway robbery! So I decided to buy the ingredients to make them myself. The first problem is that the ingredients were, in fact, very expensive! Maybe there’s a reason they charge so much. I shall attempt to make them and report back later.
in reply to Julie

I don’t see where to add alt text. So, this is a photo of a baking sheet covered in white parchment paper and a batter consisting mostly of seeds.
in reply to Julie

I believe you add "a photo of a baking sheet covered in white parchment paper and a batter consisting mostly of seeds.[/img]" at the end of the image url.

Source

in reply to Sunshine

@Sunshine @Julie It's [img=url-to-image]this is a photo of a baking sheet covered in white parchment paper and a batter consisting mostly of seeds[/img]. If you uploaded the image directly to the server, just type your alt before [/img].

Or upload the picture separately and add a description to it in Photos.



Requiem for a College - A Foggy Day at SJC - 2017


It’s odd the things that pop up in one’s memory feeds. Like these three images this morning.

I’m pretty sure that these were taken by the Love of My Life (aka Evelia) on an unusually warm morning on this day in 2017 on the Saint Joseph’s College Campus. As can happen in Northern Indiana, the sudden transition from sub-zero temps to above freezing actually will cause the snow to evaporate, making things foggy as all get-out. It can be a beautiful, if somewhat haunting, break to the winter cold.

Regardless, these quick phone-snapshots, which Evelia is prone to doing, were likely of her walk from her car at the Lennane Computer Center, where I had my offices as Chief Information Officer, to the Halleck Student Center, where she would have grabbed a cup of coffee before her classes in pre-law.

In other words, on the surface, a typical uneventful morning in Higher Education, and one that is played out at Colleges and Universities all over the U.S. (and the world).

However, just 18 days later, the Board of Trustees would vote to close this school, and suspend operations of the underlying non-profit organization while seeking ways to keep it out of bankruptcy.

As the newly “official” CIO and soon-to-be member of the President’s Cabinet, I was of course aware of the disaster that was unfolding. And I was indeed doing a lot of crisis-management as a result. But even so, emotionally a part of me was still doing various strategic plan scenarios that assumed an attempt to continue operations, coupled with the belief that, like so may times in the past for this institution, we would somehow find a way to avoid our date with the executioner.

It was not to happen.

For anyone interested in the story about the Saint Joseph's College closure, there is a well-written book out there by Dr. Jonathan Nichols that covers it:

amazon.com/Requiem-College-Jon…

And remember, in the immortal words of Ferris Bueller… Life Moves Pretty Fast. If You Don't Stop and Look Around Once in a While, You Could Miss It.





David Lynch


... has died. His darkest moment, but only barely.


Hello?


Not seeing my posts show up on Fediverse...
in reply to Andy Rush

@andyrush AFAIK, content published by an user from the instance A only shows on the instance B when at least one user from the instance B follows them. At least, it was what I experienced when trying to see my own content across instances. I needed to search for myself and follow myself on the other instance, only then my posts started to show up on the public feed from the other instance.


A Sad Day


We lost one of the realest today,

RIP David Lynch

You left a weird mark on so many of us, and we can never repay you.

"Fix your hearts or die."



Alternative to the Inaugural boycott


Maybe stop virtue signalling about not watching the inaugural. Maybe it's true that we lost cuz we abandoned certain spaces. Maybe Thing 1 on Day 1 shouldn't be to proudly continue to do that.

Let's all go to the nearest sports bar, have some chicken wings and a beer, and take it all in there.

in reply to greg_laden

@greg_laden Totally agree. I think these are the 1st places that we need to occupy in order to get rid of the looming threat of dictatorship. Over the last decade, we've been slowly but surely getting ourselves locked inside our digital lives, abandoning the outside, in the pursuit for a better, perfect place - the way we liked that place. Now the bill is coming and it's not looking too good.


All the Fediverses


So far I'm using Mastodon, Pixelfed, PeerTube, Friendica, WordPress with ActivityPub plugin (many instances of this), and micro.blog. There are an awful lot of Andy Rush accounts out there :)


"Linux Mint 22.1 Released"


#YouTube - youtube.com/@SwitchedtoLinux

#Odysee - odysee.com/@switchedtolinux:0

#Rumble - rumble.com/c/SwitchedToLinux

#Bitchute - bitchute.com/channel/uf9hzD216…

!!! NOTE !!! Switched To Linux is, “written by a broad spectrum computer consultant to help people learn more about the Linux platform.” This account is a supporter of @SwitchedToLinux and provides convenience posts of thumbnails art, videos and streams.

«Posts may contain hashtags as content may pertain to many distributions and/or related material/topics. Posts may be reposted, boosted, shared, etc. by bots and/or other accounts and are done so at the discretion of the bots/accounts that perform those actions. This account is not responsible for the action(s) of those bots and/or accounts. Therefore, Offended Discretion is advised.»

#SwitchedToLinux #Linux #Windows #Mac #AltTech #FOSS #YouTube #Odysee #Rumble #BitChute #Locals #DLive #Twitch #FactCheckTrue #Fediverse #Fedi22 #Fedi23 #Fedi24 #LinuxMint @LinuxMint



New Post


As always when you join a new social network, you do a test post. This one is from Friendica, the Fediverse version of, well, let's just say that it's run by a guy with a last name that rhymes with Duckerberg. Anyway, here I am with yet another federated account!


Biden's Farewell Message


President Joe Biden's farewell message is reminiscent of Eisenhower's, in that both warned about a takeover of government by a small cabal of self-interested billionaires.

However, like most things Biden...and I love the guy...he's a little late with his message.

The astounding speed with which the billionaire tech bros and MAGA moron zealots have inserted themselves into the decision-making of the incoming administration is one big difference.

Another difference is that this newer group is into "breaking things," not making things -- except massive profits for themselves.

A third difference is that this group is taking a "whole of government" approach, not just focusing on one department's budget.

Finally, this bunch is introducing us to something worse than an oligarchy. They are bringing us a kakistocracy, rule by the incompetent.

We are in for a rough ride. You can be sure that America's rivals for world leadership will be happy to exploit these transactional idiots. Buckle up. Such a shame. We are becoming Russia, maybe just Hungary, but with the Three Stooges in charge. Sad.




New Star Wars Women's History Month Variant Covers Spotlight Iconic Heroes of the Galaxy Far, Far Away marvel.com/articles/comics/new…


I am vaguely aware of something called Lemmy, which is similar to Reddit, including the inability to delete posts. Why, I don't know. Anyway, I read that it can interact with Friendica. But I'm confused regarding finding forums, joining them, and posting to them. Usually, I go to a website, enter friendica.world, am taken to my homepage, and then authorise the connection. But this seems different. Can anyone help me? Also, I primarily use Tweesecake, not the main site, so I have no idea what the bit about widgets means.

wiki.friendi.ca/docs/post_to_l…

#blind #fediverse #forums #Friendica #Lemmy #posting #Tweesecake

in reply to Georgiana Brummell

@dandylover1 I've been on Lemmy until a few weeks ago. It does allow deleting posts, as I deleted mine. However, there are some caveats:
- There's no batch deletion mechanism like Mastodon has, so the user needs to manually delete every single post and comment.
- The interface won't hide the "post/comment space", it will just replace the previous contents with "deleted by creator" (I guess this is what you meant with "Lemmy doesn't allow deleting posts")

However, it's not like platforms such as Wikipedia and Stack Exchange (Stack Overflow) where content, once accepted and established, can't really get deleted.

in reply to Georgiana Brummell

@Georgiana Brummell I think you can delete your content from there too. Yes, Lemmy is like a federated version of Reddit (just like Friendica is to Facebook).

Forum


The language in the documentation is a bit old, now the forums have been renamed to groups, but they're the same thing.

Disregarding the language used, you can go to lemmyverse.net/ and then to the communities tab. From there, click or copy the address for any community that you're looking for - the one starting with an exclamation mark - and paste it in the search bar. Once you find it, follow it like you would follow any other person.

To post in a group, simply create a normal post and tag the group with either ! or @.

Keep in mind that for Lemmy you have to add a title to your post, otherwise it will use the first 200 characters in the first line of it as the title and it might look off.

Btw, we also have some groups in Friendica. They're less active than the Lemmy communities, but they're there. And you don't have to add a title to any post to them.

dir.friendica.social/group



Trying out a new #Fediverse app each day (Day 2)


Today's app is pixelfed.social, a fediverse alternative to Instagram

Pros: I have only been using pixelfed for a couple of days, but with a limit of 20 images and videos per post, it seems to do just about everything I would normally use Instagram for. Content discovery is decent with a Discover feed, but it obviously needs more users.

Cons: The site is a bit slow to load/reload and lacks the ability to "like" or comment on a post without clicking on it to open it into its own page. Oftentimes you must scroll to get to the "like" button and comments.

Overall Score: 5 out of 10, but there is a lot of potential there!

Andy Rush reshared this.





How do you filter all global posts to Friendica instances only?


I would like to see an unique source of content as I check Mastodon separately. I do like the comments under posts from the other platforms though.
in reply to Sunshine

@Sunshine Not sure if it's possible, at least not without an app. That's how the Fediverse works - you get access to every connected network, be it Mastodon, PeerTube, Lemmy, Pixelfed (yes, I saw those too) etc.

In fact, you might have stumbled across posts from other networks on Mastodon too - you only didn't notice because Mastodon and other networks do not display where these actually come from.



For some reason posts from here not appearing on Mastodon
in reply to Max Riethmuller

Oh brilliant, thanks for the update, I can stop wondering if it's me haha.





Harm Reduction bezüglich Cannabis


Aufgrund der #prohibition wurden mir manche Dinge nicht beigebracht und ich habe meine eigenen Erfahrungen gesammelt, welche ich hier jungen Menschen oder unreflektierten Konsumenten als gut gemeinte Tipps weitergeben möchte. Ist primär für Freizeitkonsumenten von #cannabis gedacht.

siehe ausführliche Version:
hdiag.de/tipps-zur-harm-reduct…




Today's Comic


"Jim & Celeste" for 1/16/2025:

thedojahng.com/comic/2025-01-1…



sunlight and shadow,
being cast upon the wall,
blue skies, seldom seen

#haiku



How do I see Groups?


I’m new to Friendica, is there a way to see a list of Groups / create new ones?
Thanks :-)
in reply to Dave M

I'm still figuring out the same thing. For some reason it just shows Lemmy communities.