5 photo apps that add panache to your site
Rosemary O'Neill
Community ManagementTechnology
❤️
-
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...
-
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.
-
TipsBy default, the dropdown menu for the top nav menu has no border. It looks like this: To add an outside border to your submenu there, add this code, substituting whatever border color you prefer: .top-bar-section ul.dropdown { border: 1px solid #dfdfdf; }
-
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*/...
-
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...
-
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❤️"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...
-
Tips❤️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.
-
TipsHere'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:
-
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 */...
-
Tips❤️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...
-
Tips❤️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...
-
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.
-
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.
-
Crowdstack DiscussionMinor observation. Forum topics listing pages don't pick up formatting used on replies such as pale text color used to hide spoilers. Assuming that the default of the latest 3 replies is used, this can be dealt with by posting dummy replies after the reply which has used the formatting. I'll demonstrate this by posting such a reply on this topic. The Discussion listing page will show the text that I've formatted in the following reply. I will, once this has been approved.
-
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...
-
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...
-
Topic Reply❤️Thx Rich. I wouldn’t call it “terrible.” Not that apocalyptic 😎 Sometimes my changes at our site have what we call “unintended consequences.” A simple color change negatively affects a feature somewhere else I didn’t expect, and so on. You know. Let’s see how they solve the unintended consequence of this particular change. They always do.
-
Topic ReplyAlways like to see custom CSS tips, Ted We use all caps for our Category labels in a unique way which your cds would override. See below. While we're on the subject of the Breadcrumb nav bar...notice how the forum topic repeats itself ? Seems redundant. Perhaps tweaking your css to adjust background color of just the Breadcrumb trail to differentiate from the topic title. Or adding some space. Also, would prefer an arrow rather than slash. Slash is old school. Lessons and Resources Directory...
-
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 ReplyYou can already set the background color of the overall widget in your theme... in the Widgets section of the theme editor. Thus, no CSS required.
-
Blog Post CommentThanks for sharing your round-the-country trip. It was so much fun to get new photos of the kids. Though I do think a color timeline to see their tan progression over the last month would be awesome. I'm quite fond of the red disney days. Glad you've all made it back safely!
-
Topic ReplyNeil, I genuinely appreciate what you have done here. CSS is a little beyond my knowledge envelope and I really don't understand where to find the things to change, as you have done here. I have used a couple of your custom CSS codes in our site, with a nice improvement in its appearance. I have run into one problem, however. I have placed this code into our site: .h-ubb-directory-forum-box { background-color:#ffffff;border:1px solid #555555;padding:15px; } .h-ubb-topic-list-box {...
-
Topic ReplyHi Rich. Please post your site's url. topic-list-box needs "padding" inside the container: Here's what we're using: .h-ubb-topic-list-box { background-color:#DEDFE0; border:1px solid #DEDFE0; padding:10px; } The How-to: I turn on Chrome's built in "Inspector" to view the CSS which is controlling whatever element I've highlighted on the webpage. (I place my cursor over the element on the site, then right click and select "inspector). Up pops a window with the html and the css source which I...
-
Blog Post CommentClean, simple, and with effective meaning. Also fitting on any site's theme, as it's cyan is never too dark nor too bright. And the text color appears to change to white or black by itself depending on page background? Nice touch!
-
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
-
Topic ReplyWe use the color red in our logo and for a lot of other branding. So, I inserted the following CSS into the Display Settings > Custom CSS box: /* Make All Initials The Same Color */ .default-member-avatar-container circle, .default-member-avatar-container rect { fill: #ee0000 !important; } DONE!
-
Blog Post CommentIt seems like the 'link color' value in my custom theme is also applying to the top nav bar and post type chooser now? Any way to revert back just like @Julie Usher suggested?