How to promote your new online community; 10 ideas
Rosemary O'Neill
Community Management
-
TipsFor your blog posts and clips, we have an "image-centric" mode that displays the title as an overlay on the images, like so: It looks great that way, but some sites like to add background shading to the title text as well, so it looks more like this: To achieve that affect, you'll want to add this CSS to your site: .title-image-title h2, .title-image-title h3 { padding:5px; background-color:rgba(95, 158, 160,0.4); } You can easily change the background color to what you want using the...
-
TipsCrowdstack uses a responsive grid to make sure that interfaces can automatically adapt to different screen and device sizes. We use Foundation's responsive system . Most of the time, you do not even have to worry about that. But there are a few areas where you really need to be cognizant of the overall page structure and responsive and those include your header, footer, and top banners that are displayed at the top of the page. Each of those items is full-width by default and so they will...
-
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...
-
Tips❤️"How to put a widget in the main left column of the homepage" was one of the first questions I asked Hoop about during Beta, and I have seen many others ask the same question since. Answer: you can't put real widgets there. But I did figure out how to 'fake' one there --which also has the side option of creating 3 columns, if you like that sort of thing. Why? We like the idea of more custom content in the Main Left Column (aka " MLC "), and less of the preset content blocks feeding...
-
TipsA common approach with footers is to have 4 columns that contain segmented lists of links (product info, company info, etc.), logos, etc. You can still keep your four-column footer, but you'll want to make sure that it is responsive, automatically shifting columns for smaller screens. The overall goal is to have 4 columns on large grids (large screens), 2 columns on medium grids (like tablets), and 1 column on small grids (typically phones). To handle this, create nested grids- an outer grid...
-
TipsIf you are including a third party video from a service like YouTube in a widget or on a custom page, you should wrap that embed code with a Foundation .flex-video class , like so: <div class="flex-video"> Video Embed Code Here </div> That will make sure that the video sizes correctly on different screen sizes.
-
Tips❤️Time to give back to the community! I was able to figure this out on my own. I must say, being able to use CSS to control the display of content is valuable. If you are looking to hide the # of Topics within a Forum and the # of Replies to a post, just use the following code in your CSS. This definitely cleans up the look at feel of the pages, IMO: .h-topic-count-label { display: none; } .h-topic-reply-count-label { display: none; } I've tried this out on my site, so I know it works. Enjoy!
-
TipsI came across this article today that described an effect that one site uses to make their member avatars more distinctive looking: http://www.lottejackson.com/le...ild-cicada-principle If you like what they did there, here's some code for you to add to your own Crowdstack site that adds the "Cicada Effect" on your Members Directory and in widgets that displays grids of user avatars:
-
TipsI just found this cool (mostly free) tool that helps you pull a dynamic photo feed from Twitter, Instagram, and/or Facebook. If you use their Pro version, it also includes custom CSS and moderation tools. You can paste their embed code into custom content blocks or custom widgets, or into the header or footer of your Crowdstack site. Options include scrolling banners, grids, and map style. SnapWidget If you decide to try it out, come back and share your design!
-
Tips❤️In Crowdstack, if you click your name (top right) there's a menu item Posting Tips . We wanted to control where that link went (instead of https://yoursite/member-cp/posting-tips ) Here's what we did. In Control Panel - Display Settings -- End of Page HTML We added some jQuery to locate the link and replace the href attribute with the address where you want Posting Tips to go. <script> $(function() { // Redirect Posting Tips to our own blog post with posting tips...
-
Tips❤️💯Want to add breadcrumbs to the mobile view for your site? We've come up with some custom CSS (thanks, @Brian Lenz!) that you can use to show the "closest" two levels of the forum breadcrumbs on mobile devices. You would insert this CSS in the the Custom CSS field in your Display Settings: .breadcrumbs-wrapper.hide-for-small-only { display: inherit !important; } @media only screen and (max-width: 40.0625em) { .h-page-for-FORUM nav.breadcrumbs li.breadcrumb { display: none; }...
-
Crowdstack DiscussionOkay, am I not online. I write a lot of replies in our community. I'd like to think I'm an original thinker, but it turns out a great deal of what I type is almost boiler-plate text. Here's something I wrote in 2018 in Library of stock messages/message This morning I documented how to make a post that had been forked to a new topic look like this. You can read about that here: Styling a post that has been forked to a new discussion There's a step where you have to edit the post and put some...
-
Crowdstack DiscussionWhat do you think of this? If you're intrigued keep reading. If not; Move along folks. Nothing to see here. Fork to a New Topic We have the cool feature that let us fork a post to a new topic. and the post then gets a tag like this. The Problem But people will often reply to the post anyway - and that just makes things difficult. I just did this. When you click the Read More button it returns to To make this happen. Edit the forked post Edit the post Source Code Add the highlighted text...
-
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:...
-
Tips❤️Sometimes you want to bring widget content onto the Home page of your community, in the left column. This tip is the step-by-step on how to accomplish that! If you've done this in your community, please share your own hints for making it work here too. In this example, we're displaying forum topics, but you can do this same method with other widget content. Go to control panel, under “manage widgets.” Click the Embedded Widgets tab. Click “add embedded widget.” Select “UBB Forum” in the...
-
Tips❤️How to add an image rotator to your home page banner. We will be using a package called Slick. Slick is fully compatible with Crowdstack, can be responsive, and has oodles of fun features, We will be doing a basic setup just to get it installed and working. First, download the files that you need. Go to the Slick website and click Get it now. Click download now and download the zip file to your desktop or downloads folder, whichever you usually use. Once it is downloaded, unzip the zip file.
-
SuggestionsIn my automated messages, I often greet members by their username (in the email salutation), but your system automatically links their user name to their member profile and thus gives their name the default link color, which is a different color than the rest of the email text. This makes the email look more like a form letter than I would like (as if I just filled in a blank with their name). Of course, this is precisely what happens, but I would like their names not to look so obviously...
-
Crowdstack DiscussionIn our next major update (likely to be released sometime next week), we'll be removing support for the "activity stream" as both a destination page and widget. We're making this change because the Activity Stream is one of the most underused features in the platform, yet it happens to be one of the most complicated ones to maintain, since nearly every action ties into it in some way. In our research of active Crowdstacks, many had disabled the feature entirely. We are still supporting the...
-
Topic ReplyThanks for the code. This is a very helpful organizational option we had in the old Hoopla (and Eve, God rest her soul). Would be nice to see this as a true theme option.
-
Topic ReplyTed, I copied and pasted your code and it worked perfectly. Thx. Might you be willing to provide the code for when you are within a forum and its displaying the list of topics? The above code doesn't work on this page and I have no idea how to write the CSS to target this
-
Topic ReplyHey, Bradley: try using the same code, except instead of .h-ubb-directory-forum-box you'll use .h-ubb-topic-list-box
-
-
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"...
-
Blog Post Comment😂🎉Lovely post! We've been using our Crowdstack platform to simultaneously live stream Facebook Live and Zoom Webinar events directly into the platform using the embed code. It's quite effective and another place for them to catch the livestream!
-
Blog Post Comment❤️Neil, we run banner ads in our Hoopla forum served from an outfit called "Adpeeps.com." When we first made the Hoopla change to https, the banners did not appear. The browser would not display a mix of "secure" and "non-secure" content. All I had to do was go into the Adpeeps code and add the "s" where appropriate and all was OK. Adpeeps now generates code that contains "https" so the problem has solved itself on both ends. External LINKS appeared just fine, even though the link was going to...
-
Topic Reply❤️👍Lighting a candle for the dearly departed Activity Stream There are certain things about you that will be missed: 1. You announced New Premium Members and Newly Registered Members. You were a not-so-subtle encouragement to get others to "join in" too. You gave instant recognition to newbies. You gave community leaders a convenient place to see and follow up on newbies listed there. ( Where do they go now? ) You were a visible way to generate a sense of "community" -- which is something that...
-
Topic ReplyThank you Ted. Is there a CSS code that I can use for the background of the widget to be a color instead of the background image of the theme? If so, would this be placed in the customize widget or the theme?
-
Topic ReplyThanks! (add: you insert the code in the Display Settings / custom css field) How can we control the font in the Nav Bar there? (Not a fan of the all caps and font size)
-
Topic ReplyI cannot get this to work!! So frustrating!! Please help! I have created a clone of a standard theme (to pick from) and added the code to the head css section and it's still not centered. HELP! Thank you!
-
Topic ReplyHello, I still cannot get this to work! This is what I'm posting into the " Custom Code For HEAD Section": div#horizontalNavMenuSecondaryWrapper { width:100%; } #menuWhitespaceTd .horizontalMenuWhitespace { display:none; } table.horizontalMenu { margin:auto; width:300px; } This code shows up ABOVE my forum banner, on all pages. Am I missing something??? Thank you in advance for all help!
-
Topic ReplyHi jpmfan, The "Custom Code For HEAD Section" requires HTML, but what you've pasted there is CSS. You should put that into the Custom CSS section in your theme instead (just beneath where you've got it right now). Hope that helps! Brian
-
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?