5 photo apps that add panache to your site
Rosemary O'Neill
Community ManagementTechnology
❤️
-
Tips❤️By default, the main navigation menu is displayed ABOVE your site header. It is also full width by default, like so: Below, we will offer some tips for changing the appearance and positioning of your main nav menu. Left Align The Menu To position your menu text so it is aligned left instead, add this CSS: nav#top_nav_bar ul.right { float:left !important; } nav#top_nav_bar ul.right > li > ul.dropdown { left: 0; right: auto; } Your menu will then look like this: Center Align The Menu To...
-
Tips❤️Just as you can use Font Awesome font icons for premium member badges, you can also use them for any permission circle badges, or activity level badges (instead of titles). For purposes of this tip, we will be creating a badge for Activity Level Titles, which can be set via Recipes. First, select the font icon you want from the FontAwesome list of icons, here . Note that while the Solid and Brands icons are free to use, Regular, Light, and Duotone require that you purchase a Pro license.
-
Tips❤️Thought I'd share a few of the CSS customizations we've made to our site which may be helpful to others, ...with the hope that a few of you would post your favorite customizations too. Please include your site's URL. (Would also welcome comments from Hoop if any of these need adjusting.) Our site: www.rotation.org /*hides # of views and bookmarks on a topic*/ .h-topic-metadata { display: none; } /*makes "Current Visitors" profile pics widget bigger*/...
-
TipsThis is similar to the tip about adding a custom icon to Premium Member badges . For this tip, we'll show you how to display a custom icon next to all Member Titles. Note that the same icon will be displayed for all titles in the example, since there is currently no way to differentiate member titles from a CSS standpoint. First, let's see what our sample Member Title of "Dude" looks like without any styling: 1. First, let's focus on simply adding an icon. You can inject a Font Awesome font...
-
Tips❤️Crowdstack contains several icon based menu items and there are times when you may want to replace the icon with text to make the action more clear. For this tip I will be focusing on the search menu item: Each menu item is represented in the DOM using a li -> a, and the items with a icon will contain a i (icon) within the a (anchor). Since I want to customize the search icon I will use a DOM inspector, in this case the one built into chrome to look at that magnifying glass icon used for...
-
Tips❤️One of the new features is support for Font Awesome font icons. The advantage of using font icons is that they can scale to different sizes without distorting whereas using images can't scale without distorting or adding blurriness. New to the applilcation are text-based member badges instead of image-based badges. If you want to add some extra flair to your premium member badge, you can inject a Font Awesome font icon with some simple custom CSS. First, you must select which font icon you...
-
TipsFor the top navigation menu, if you want to have each menu item change color when you hover it, add this custom CSS: /* the following sets the background color for the menu item on hover */ .top-bar-section li:hover:not(.has-form) a:hover:not(.button) { background-color:#444444; } .top-bar-section li.active:hover:not(.has-form) a:hover:not(.button) { background-color:#444444; color:#fffff0; } /* the following sets the text color and icon color for the menu items on hover */...
-
Crowdstack Discussion❤️Another major feature we are adding soon is "reactions", to be included when we roll out Pips . Reactions are an expansion on the "likes" you are already familiar with, with a much broader palette that allows community members to quickly express their feelings about a particular post/reply/comment. Reactions will be expressed on a post like so: Click on a reaction that has already been expressed to add yourself to that reaction, or choose the plus icon to choose one of the other reactions.
-
Crowdstack Discussion❤️Hi all, Not urgent at all. My community is going to stick with only supporting like reactions. I would like to change the emoji to thumbs up. But when I add my CSS, I get this error. "Your request contains invalid 4-byte characters (e.g. Emoji characters). Please go back, remove those special characters, and try your request again." Is there any way around this? Here is my code /*Love Icon*/ .emoji { visibility: hidden; position: relative; } .emoji:after { visibility: visible; position:...
-
Blog Post Comment❤️🔥Thanks Rosemary for the tips. I especially like the Survey idea. Once upon a time, we used them to actually "survey" members about issues/ideas, but now I see that it's also a good idea to provide a point of easy-engagement. Update: We just posted a single survey question and got over a hundred engagements in the first two days One thing we've tried to do is assign "monitoring and response" duties to various members of our admin/moderator group so that every post gets responded to. These...
-
Blog Post CommentI haven't commented on this yet, but while looking into creating our own IOS home screen lock favicon, I found this thread. Lucky you. I'm not a fan of teal in any use. Doesn't help that obviously this was designed by a San Jose Sharks fan. Go Jackets! I would probably have cut off the top pointy triangle on the stylized 'H' to accentuate the logo looking more like a "talk bubble" (which was the intent, right?) Anyway... so on what admin page do I paste my link rel="apple-touch-icon" code?
-
Topic Reply❤️Neil, I'll add to this. Instead of the magnifying glass in the header, I have the word "SEARCH" spelled out. Makes it more noticeable, IMO. Here is the code: /* turn icon into "SEARCH" in top header*/ .h-search i.fa { font: inherit; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; } .h-search i.fa-fw { width: auto; } .h-search i.fa-search:before { content: "Search"; }
-
Topic Reply❤️Let me see if I can get this to work in the wysiwyg editor: This is a test Which definitely works. I think that the issue you are having is that you are trying to use the fas class, which I'm not sure is available in Font Awesome 4.7 (the version we are currently using in Crowdstack). We have plans to upgrade this in an upcoming release. Next, since the WYSIWYG does not have Font Awesome icon support built directly into it you will need to use the "Source code" option on the far right to...
-
Topic ReplyI'm trying to figure out where to put this CSS. I asked about adding badges to title names and I got this response and link to this article. I somehow got to Automation Rules, then creating a rule for Activity Milestones using triggers, but I don't see where to add CSS. Can you point me to where I can do this so it can be based off of points or triggers? Thanks!
-
Blog Post CommentHi Ted, I didn't realize that I needed this until just this past weekend. This is terrific as we stratafy [sic] features to align with incentives. Congratulations on the new logo. I wish we still had the "powered by" image selector for themes." We'd be much happier with a black or dark gray icon to go with our overall grayscale aesthetic. ST
-
Blog Post Comment@Valerie Krist if you want to add a large graphic like I showed above, yes it is still the best way. However, lots of people use small icons, inline with the member title, as a type of "badge." Here's an article that explains how to add a custom icon to member titles .
-
Blog Post CommentYes @derrick.schmidt you can share by using the social share icon at the bottom right of the article. Thanks!