How to add a custom font to your Hoop.la site
Rosemary O'Neill
Crowdstack
-
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❤️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...
-
Blog Post CommentPremium memberships?
-
Blog Post CommentWe'll have an ETA on premium memberships later. Will be finished after we finish the search changes mentioned above.
-
Blog Post CommentHello Could you please explain just how the new ‘multi quote’ function can be used when you wish to quote from a previous page, as well as the current page? This is often the case especially when a new page has only one or two post on it. I know that you can post a quote from a previous page; we need to be able to quote from more than one page. Having the posting page tied to the current page (crazy) prevents me from being able to do this as the first quote selected cannot survive the page...
-
Topic Reply❤️Awesome. And let me be the first to request that this be a "point and click option" in the Control Panel, ....when you come up for air.
-
-
Topic ReplyWhere do I put the CSS code above mentioned..?
-
Topic ReplyI placed the CSS code but it did not worked. Please, what I´m doing wrong..? Thanks.
-
Topic ReplyHi Brisotti, The code should go into your Display Settings control panel in the Custom CSS box. You need to make sure you use the permission circle's group ID instead of "premium" if it's not a premium permission group. For your Patrocinador circle, that numeric ID is 350043526109298115, which you can see in the URL when editing the permission circle's details. I changed your selector to .h-member-badge-350043526109298115, which fixed the problem (you also had replaced the 'h' with "webkits"...
-
Topic ReplyBrian, thanks a lot. Plese, how can I change the font size on that Badge..?
-
Topic ReplyHi Brisotti, For that specific badge, the selector is .h-member-badge-350043526109298115 so the font can be controlled with something like this: .h-member-badge-350043526109298115 { font-size: 0.8rem; } Note that we don't generally offer free assistance with Custom CSS. Custom CSS assistance falls under our Advanced Support, which is $150/hour. I've made an exception here to get you going in the right direction. If you need further assistance, please open a new support topic. Regards, Brian
-
Topic ReplyHow can we do this for a specific Permission Circle?
-
Topic ReplyHi Rich, You'll need to use the specific permission circle's numeric ID in the selector, as I mentioned above to Brisotti. You can grab that ID from the URL and then use a CSS selector like .h-member-badge-XXX:before (where XXX is the numeric ID) instead of .h-member-badge-premium:before . Hope that helps! Brian
-
Topic ReplyGot it and DONE! I sure wish I knew more about how all this Custom CSS works.
-
Topic ReplyNice job! CSS is one of those things that you'll surely pick up over time the more you use it.
-
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!
-
Topic ReplyHi, @Valerie Krist : I just saw this and wondered if you'd gotten an answer someplace else? If not, you'll want to go to Settings>>Design>>Display Settings, and add that CSS to the field marked "Custom CSS".