How to add a custom font to your Hoop.la site
Rosemary O'Neill
Crowdstack
-
TipsThe theme editor allows you to customize the overall background color for your widgets. Here's a typical widget styled using the the theme editor only: Change Title Font Properties If you just want to change the widget title's font size, color, or weight (how bold it is), apply CSS like this (setting your own specific colors, sizes, weights): header.widget-header h3 { color: #4d709f; font-weight:400; font-size:1.1rem; } Note that you should be using REM units for font size, not pixels. That...
-
TipsOn the Group Directory page, we don't style the list of groups much by default. Here's a typical group list: You can easily add more definition to this list by adding CSS to style the box for each group and also to change the way the group name is presented. For example, try adding this CSS: /* group directory improvements*/ .h-group-box { border:1px solid #dfdfdf; padding:10px; } .h-group-name h4 { text-transform:uppercase; font-weight:400; font-weight:1.1rem; } Your directory would look...
-
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.
-
TipsIf you'd like to increase or decrease the size of the font used in the top navigation bar, insert this Custom CSS in your theme (this example increases the font size relative to the default size you've set): .top-bar-section ul li > a {font-size: 1.25rem;}
-
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*/...
-
Tips❤️When you are adding a custom header, footer, widget or page, you may want to make use of the built-in CSS utility classes in Crowdstack. This should make your coding much easier. I'll break them down by classes native to Foundation , which is the responsive framework Crowdstack uses, and those that are built into Crowdstack. Foundation CSS Classes .text-right : equivalent to text-align:right .text-left : equivalent to text-align:left .text-center : equivalent to text-align:center .flex-video...
-
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...
-
TipsOne thing we discovered recently is that, for at least some Google Fonts, if you do not include the "bold" version of the font when you include it then items you make bold may not actually appear bold when using Chrome. Thus, we recommend that you include both the normal and bold versions of the Google Font, if you are adding a Google Font to your HEAD area. Here is an example: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
-
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...
-
TipsFrom a design perspective, i think it looks good to have your forum names bolded along with the titles of the topics. To do this, just add the following to your Custom CSS section found on this page: YOURSITE.hooplaupgrade.com/cp/display-settings .h-forum-name {font-weight: bold;} .h-topic-title {font-weight: bold;} I implemented this on my site and it looks good. Enjoy!
-
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.
-
Suggestions👍It would be really convenient to have some "at a glance" shorthand "Permission Notes" in the CP's Forum Topics View showing Who Can View Subject/View Content/Post/Reply --without having to open each one. Invariably we think a permission is set a certain way for something and it's not. Put the shorthand "permission" notes in the wide-open space between the forum's name and the trashcan in a tiny font. ourURL/cp/forum-structure Shorthand examples: View Subj: All; Content: Spec Roles; Reply:...
-
Survey❤️SlackTwitterMailchimpSalesforceHubspotGmailGoogle CalendarEventbriteLinkedIn -
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...
-
Blog Post CommentAlso read my post on the topic https://hey.crowdstack.com/s...oop-la-etc-see-links
-
Blog Post CommentTHAT is a great idea! Nice way to recap the year too! Thanks for the suggestion!
-
Blog Post CommentYou're welcome Morgan! I'd love to see your list when it's done!
-
Blog Post CommentHi Rosemary! Is there a way to create a collection for forum posts in this manner so it can be pulled into a widget like you suggest with the blog posts?
-
Blog Post CommentNot right now, but as I was writing this post I realized that would be a cool idea...want to go suggest it at https://hey.crowdstack.com/support ? That way we can get it voted up
-
Blog Post CommentDone. And I just posted my top 10 forum posts . Happy Holidays!
-