For 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...
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...
This 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...
"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...
You can add alternating background colors to rows in Crowdstack 1.0. For instance, here is an unstyled list of forums (v1 sites only): We can apply alternating background colors to these forums easily by adding this CSS to our theme: After we apply this CSS, our Forum List looks like this: The CSS above specifically tagets the .h-ubb-directory-forum-box, so if you are looking to add alternating colors for a different list, you'll want to make sure you target that specific class.
One 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'>
A 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...
Here's what a forum list looks like by default in Crowdstack 1.0: If you want to encase each forum, topic, and survey with a border, add this CSS to your theme: (You'll want to replace the background and border colors with your own of course.) Here's what the same forum list looks like after applying the CSS above:
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...
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...
For 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 */...
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!
From 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!
I 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:
I 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!
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; }...
With a bit of CSS you can make the new sticky topic display disappear for all screen sizes. To make the new sticky header disappear copy the following into your Display Settings > Custom CSS box /* hide the new sticky header from view for all screen sizes */ .forum-topic-sticky-header.fixed:not(.dont-hide-sticky-header) { display: none !important; }
Depending upon your site's design you may want to change the new default avatar display so that all initials appear the same color. With a bit of CSS you can do that. Copy the following into your Display Settings > Custom CSS box .default-member-avatar-container circle, .default-member-avatar-container rect { fill: gainsboro !important; } In this example "gainsboro" is a greyish color (#dcdcdc for those keeping score). You'll find a large listing of colors to chose from here . You can...
Following up on now closed discussion of some things you can do to adjust the new sticky header option. I did not want the sticky header to use my default background color, so here's the CSS for adjusting the background color of the new Sticky Header. /*adjusts sticky header to give it white background when not sticky*/ .forum-topic-sticky-header:not(.fixed) { padding: 0 !important; background-color: white; } /*background color of sticky header when sticky*/ .forum-topic-sticky-header.fixed...
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.
What 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...
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:...
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.
Hey everyone- We've made a couple of changes to the way that our customer support system works. 1. All customer support tickets are now always private. That means that only the person that created the ticket and our support staff can see each ticket. This way, no one ever has to worry about private details about their sites being made visible to the world. 2. Because those customer support tickets are always private now, we disabled the "suggestions" option in the Customer Support area.
Hi guys, I have Sublime Text Editor (simple editor, not flashy) to customize my pages. What are you guys and gals doing to modify your stock pages, and can you post an example of the layout in HTML and CSS? On a side note, when I installed Sublime, I had checked the feature that should be bringing up the option to open a page in HTML view. It's not happening. Am I doing something wrong or do I need to change a browser setting? I'm using Chrome.
You're so right! I'm a recent convert to Evernote...perhaps that's what's finally allowed me to feel comfortable ditching the paper files. Thanks for stopping by!
When you block a person, they can no longer invite you to a private message or post to your profile wall. Replies and comments they make will be collapsed/hidden by default. Finally, you'll never receive email notifications about content they create or likes they designate for your content.
Note: if you proceed, you will no longer be following .