Friend-ly enby-box

Cătă

3 Wochen her (Empfangen 8 Stunden her) von Not sent from my iPhone (I don't have one) • •

Cătă
3 Wochen her (Empfangen 8 Stunden her) von Not sent from my iPhone (I don't have one) • •

Friendica tips&tricks. Watch out! It's over 9000 (characters)

Friendica beginner help megathread

Hello, everyone! As we know what Zuck's place is going through, I decided to create a post with all the resources I found online all these years I've been on this place, in a bid to help more people board. Here we go:

List of guides/presentations/quick start

@anubis2814's excelent guides for Friendica. Available as a playlist on YouTube:

or on Peertube:
peertube.stream/w/p/4K4MWYXMEY…
(6 videos)
The Future of Social is Here: a Show and Tell (part 3: Friendica) by @

Friendica beginner help megathread

List of guides/presentations/quick start

@anubis2814's excelent guides for Friendica. Available as a playlist on YouTube:

or on Peertube:
peertube.stream/w/p/4K4MWYXMEY…
(6 videos)
The Future of Social is Here: a Show and Tell (part 3: Friendica) by @Elena Rossini ⁂ @FOSDEM
The Beginner’s guide to Friendica by @Tio
When to use Friendica over Mastodon (updated) by @ericbuijs1
no less important, The Friendica Wiki also available under the help section of your instance (click on your pic and name on the top-right where you're logged in -> help)
The @Friendica Support group for any questions or issues (yes, I intended to post this here).

Resources on the Fediverse about Friendica

Bookface, by @Kristi H. (also comes in a dark version)

All of these should be more comprehensive than this guide.

Short Q&A with the most common problems

How do I post stuff?
Easy, on your profile, click the button in the top right that looks like this:

A pop-up window will open, and you can type anything. Make sure to set the appropriate permissions by clicking the tab at the top. If you want your post to be public then choose public, if you don't, select limited/private and add the exceptions or add who can see it. Make sure you properly select these permissions, because you cannot change them later. If you format your post (see below), you can also check the preview pane to see how your post will look. This also applies for comments.

How to format my text?

Unlike Facebook, Friendica allows you to format your text, just like you'd do in a Word document. It uses BBCodes for text formatting like bold text, italic text, underlined text and many others. You can find more example on the usage of it in the Wiki or under https://your-instance-address/help/bbcode. You don't have to style your text, but you can do some nice stuff with it. You can also get suggestions for formatting by typing [ and selecting an option from the drop-down menu, or typing out your option to narrow your search. But do check the wiki, though. Generally, BBCode looks like [option]your-text-here[/option].

If there is any text where you don't want to add any tags on by accident, slide it between these tags: [noparse][/noparse].

How to upload an image (and how to add alt-text to it)
Just drag&drop it into the composing page. Simple. Easy. No frills.

Also, to note is that you can also re-use an image you previously uploaded if you go to the Browser tab in the compose window.

Finally, you can link to any image you find online, without downloading&reuploading it in the 1st place. Right-click an image, click "copy image link", then go to your post and type [img]paste-your image-link-here[/img] (of course, you paste your image link instead, between the img tags). This is generally how images are displayed via BBCode.

I personally use an external site to host my media and link it this way, whenever there is something I want on the internet for as long as possible in order to save some space on my instance. I mostly use postimages.org, but I also used

Meta and now also Reddit like to change the URL string to the media posted on their platforms, so don't rely on these if you want your post to still stay relevant after a few days.

You can also add Alt-Text to your image if, instead, you type [img=your_image_url]Your Alt-Text here[/img]. Alt-Text is generally an image description that is displayed when the image fails to load/before loading, and is useful to visually impaired people using screen reading software which can read this out loud. The latter is the reason why it is highly recommended by many people all across the Fediverse (not just on Friendica).

How to upload a video or other media
Just like you do with an image. However, the video will be posted under Browser, and then the "Files" icon:

Select your file, and it will be posted with an tag.

However, there's currently no user facing way to delete these as yet, so feel free to upload them on any other external service and share the direct link to the audio/video if you care about this.

You can use the tags [audio]your-link-to-the-audio[/audio] and [video]your-link-to-the-video[/video] for that.

How do I make a poll/vote at polls
Polls are currently supported by a few Fediverse platforms, but not by Friendica fully, right now (you can see them, but you cannot vote on them and create them).

You can again use an external service for creating polls, such as poll-maker or Strawpoll.

Okay, but do I need to add a title?

No, you don't. I didn't add one either here. You can if you want your post to be more fancy and want to turn your profile into a more of a personal blog. Which would be cool, but it's not necessary. You do you!

How to post to a group

Groups on Friendica, as well as any other ActivityPub platform, are generally just some special accounts that automatically boost/reshare whatever post you added while tagging them. Therefore, just create a regular post and tag them with the ! or @ signs (one of these tags should suffice). The former one creates a post that is visible on the group but unlisted wherever else (i.e. in a public feed). The latter takes account of your permission settings. You will see how you can find groups somewhere below.

How to find various people

There are multiple ways; One is to use any of the established lists:

Fedi.db's list
Most followed Mastodon accounts by Stefan Hayden
Fliboard federated accounts (for news organizations on Flipboard who enabled AP integration) [Google Sheet spreadsheet]
[Public] Popular/famous/notable Mastodon accounts (also available as a website) [Google Sheet spreadsheet]
The Friendica directory (only for people on Friendica)
Follow @FediFollows for suggestion

You can also go to Settings>Profile>Miscellaneous and scroll all the way down to add some tags to the profile. Then, you can also go to Contacts and choose "similar interests" in the left pane, get friend suggestions or a random profile.

Finally, you can also follow hashtags to get posts from people that also share your interests directly in your feed, and then follow them from there.

I'm posting stuff here, but how can people discover me?

Just like on Mastodon, you can enhance your posts with #hashtags. Other people who follow the same hashtags can find you and connect with you if they want.

But that's not the only way. You can also add yourself into the aforementioned Friendica Directory or to your server's one by going to Settings>Account>Security and Privacy Settings and check any of these two options:

They're the 1st two boxes

This way anyone can find you according to your interests.

If, however you would like more privacy, you can check the following box below:

This limits the visibility of your content to only instances that are made aware of it, and people that have access to it based on your privacy settings. Unlogged users will not be allowed to find your content. E.g., open my profile in a new tab to see how this feature works: libranet.de/profile/petrescatr…

How do I find groups?

Same as with regular people. There are multiple lists:

Friendica Directory (for groups that are on Friendica).
Check the list of @Fedi.Tips available here.
Lemmyverse (For Communities on Lemmy - a decentralized Lemmy alternative - be wary of this though)
Check out the servers of other Fediverse software like Mbin or Piefed. These are more forum-like platforms, centered around communities. Generally, each of these communities has a Fediverse address. Copy that, paste it in the search bar, and you should be able to find it. If it doesn't work the 1st time, try a few more times. If it still doesn't work, look whether the server is not on the banned list by accessing your-server-address/friendica, and/or contact your admin for clarification.

How do I use the search? Is it any useful beyond just searching for people and groups and other accounts?

Yes. Check the Wiki for more information.

Are there any mobile apps?

Yes there are. From my personal experience, Raccoon for Friendica gave me the best results. Relatica is also a great option, as well as Fedilab (the latter is more of a Mastodon client, but you can disable the display of reply in the feeds and enable BBCode - fiddle out in the settings). There are other apps for various platforms as well. If you don't find any of them fitting, you can just access your Friendica server in your browser (e.g. friendica.world, nerdica.net etc.). It's very responsive and easy to use.

I hope this Q&A covers the most common aspects of using Friendica

Bonus: Text colors

One aspect that hasn't really been touched on in the wiki is the colors. You can have text in any color if you type the text like this [color=color_name_or_value]your text here[/color]. Hex values are accepted, however there are also some human readable names that can be used (based on this thread):
Antiquewhite
Aqua
Aquamarine
Azure
Beige
Bisque
Blanchedalmond
Blue
Blueviolet
Brown
Burlywood
Cadetblue
Chartreuse
Chocolate
Coral
Cornflowerblue
Cornsilk
Crimson
Cyan
Darkblue
Darkcyan
Darkgoldenrod
Darkgray
Darkgreen
Darkkhaki
Darkmagenta
Darkolivegreen
Darkorange
Darkorchid
Darkred
Darksalmon
Darkseagreen
Darkslateblue
Darkslategray
Darkturquoise
Darkviolet
Deeppink
Deepskyblue
Dimgray
Dodgerblue
Firebrick
Floralwhite
Forestgreen
Fuchsia
Gainsboro
Ghostwhite
Gold
Goldenrod
Gray
Green
Greenyellow
Honeydew
Hotpink
Indianred
Indigo
Ivory
Khaki
Lavender
Lavenderblush
Lawngreen
Lemonchiffon
Lightblue
Lightcoral
Lightcyan
Lightgoldenrodyellow
Lightgreen
Lightgrey
Lightpink
Lightsalmon
Lightseagreen
Lightskyblue
Lightslategray
Lightsteelblue
Linen
Magenta
Maroon
Mediumaquamarine
Mediumblue
Mediumorchid
Mediumpurple
Mediumseagreen
Mediumslateblue
Mediumspringgreen
Mediumturquoise
Mediumvioletred
Midnightblue
Mintcream
Mistyrose
Moccasin
Navajowhite
Navy
Oldlace
Olive
Olivedrab
Orange
Orangered
Orchid
Palegoldenrod
Palegreen
Paleturquoise
Palevioletred
Papayawhip
Peachpuff
Peru
Pink
Plum
Powderblue
Purple
Red
Rosybrown
Royalblue
Saddlebrown
Salmon
Sandybrown
Seagreen
Seashell
Sienna
Silver
Skyblue
Slateblue
Slategray
Snow
Springgreen
Steelblue
Tan
Teal
Thistle
Tomato
Turquoise
Violet
Wheat
White
Whitesmoke
Yellow
Yellowgreen

Kristi H.

2025-01-18 02:12:16

Bookface Light Version 4

This is the 4th revision of my Friendica FB facelift user stylesheet.

How to use:

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 choose "Custom" copy+paste this schemestring:

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

What's New?

Adds “superscript” engagement numbers to mobile Action Buttons.
Settings “Submit” buttons normalized to right-hand placement.
“Mention” button and “Compose” buttons sizing is now same.
Compose Modal/Page and Reply are now styled
File Attachment button hidden[1] on Compose File Browser
Adjustment to Event RSVP buttons for both desktop and mobile
Styling and adjustment to Profile Extra Links
Changed Network Links from “Link:” text to button style with “>>”

Mattias is adapting these styles to a Friendica Template (Work-In-Progress, not ready for production use).

[1] There is no way to manage/delete the uploaded/attached files so I hid the button to do it. If you actually use this partially-implemented/broken feature delete the line that hides it, it’s commented in the stylesheet.

The Code:

Zum Öffnen/Schließen klicken

/* BOOKFACE LIGHT VERSION 4
   ====================================
   This "user styles" stylesheet will override Friendica and style it more like Facebook.
     
   Go to Settings - Display - Theme and select "Frio"
   Under "Theme Customization" select default "Lite" scheme, blue variant
   -or -
   Choose "Custom" and paste this schemestring:

   {"nav_bg":"#ffffff","nav_icon_color":"#606637","link_color":"#0866ff","background_color":"#f2f4f7","background_image":"","contentbg_transp":"100"}
   
   Paste the code below into Stylus add-on for Firefox, Stylus Extension for Chrome, or Usercripts extension for Safari.
   You can also pasted it into a userContent.css file for Firefox, but wrap it in "@-moz-document domain(friendica.instance){...}" (replace with your server)
*/
	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;
		margin-top: 2px !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;
		}
	/* Make Submit Buttons Pretty */
	.settings-submit,
	button[type="submit"]{
		background-color: #0866FF !important;
		color: white !important;
		border-radius: 8px !important;
	}
	.settings-submit.form-button-search,
	button[type="submit"].form-button-search {
		border-radius:50px !important;
		margin-top:-.5px !important;
	}
	.settings-submit:hover,
	.settings-submit:focus,
	button[type="submit"]:hover,
	button[type="submit"]:focus{
		box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
	}
	/* make position of submit buttons in settings consistent */
	.panel-footer button[type="submit"]{
		float: right !important;
	}
		.panel-footer::after{
			content: '';
			display: block;
			clear: both;
		}

	/* 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;
			line-height: 45px;
			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;
	}
	#profile-extra-links .btn {
		border-radius: 8px !important;
		margin-bottom: 10px !important;
	}
	/* 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 */	
	/* Compose and Reply */
	#jot-modal-content,
	.wall-item-comment-wrapper {
		background-color: #fff !important;
		   border-radius: 15px !important;
	}
	#jot-modal-content input,
	#jot-modal-content .friendica-tagsinput {
		   background-color: #fff !important;
	}
	#jot-modal-content .fbrowser .folders button {
		   background-color: rgba(0,0,0,.1) !important;
		   color: black !important;
		   /*! box-shadow: none !important; */
	}
		   #jot-modal-content .fbrowser .folders li:hover,
	#jot-modal-content .fbraower .folders li:focus {
		   border-color: transparent !important;
		   background-color: transparent !important;
	}
		   
	#jot-title {
		   border-radius: 50px !important;
		   background-color: #fff !important;
	}
		   #profile-jot-text, #profile-jot-wrapper textarea,
		   #jot-location,
		.wall-item-comment-wrapper textarea {
			background-color: #fff !important;
		}
	#jot-text-wrap, #profile-jot-wrapper .dropzone.dz-clickable,
	.wall-item-comment-wrapper .dropzone.dz-clickable {
		   background-color: #f2f4f7 !important;
	}
	.jot-nav {
		   border: none !important;
	}
	.jot-nav a {
		   border: none !important;
		   border-radius: 8px !important;
		   margin-right: 5px;
	}
	.jot-nav a:hover, .jot-nav a:focus {
		   background-color: rgba(128,128,128,.2) !important;
	}
	.jot-nav .active a {
		   background-color: transparent !important;
		   border-radius: 0 !important;
		   border-bottom: 3px solid #0866FF !important;
	}
	.jot-nav .active a:hover, .jot-nav .active a:focus {
		   background-color: transparent !important;
	}
	[id^="comment-edit-preview"],
	.comment-edit-preview {
	  border-radius: 8px !important;
	  box-shadow: none !important;
	  background-color: rgba(0,0,0,.1);
	}
	[id^="comment-edit-preview"]:hover,
	[id^="comment-edit-preview"]:focus,
	.comment-edit-preview:hover,
	.comment-edit-preview:focus {
		   background-color: rgba(0,0,0,.2) !important;
	}
	#profile-jot-wrapper .wall-item-container.panel-body.preview {
		   border: 1px solid #666 !important;
		   margin-top:20px !important;
		   border-radius: 8px !important;
	}
		/* file browser */
		#upload-photo {
			background-color: #0866FF !important;
			color: white !important;
			border-radius: 8px !important;
		}
		 #upload-photo:hover,
		#upload-photo:focus {
			background-color: darkblue !important;
		}
		.fbswitcher [data-mode="attachment"] {
			display: none !important;
		}	
/* Profiles */
	#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;
		}
	}

@FediFollows @anubis2814 @Tio @Fedi.Tips @Elena Rossini ⁂ @Friendica Support @Greenpepper @Kristi H.

Dieser Beitrag wurde bearbeitet. (1 Tag her)

⇧