5 photo apps that add panache to your site
Rosemary O'Neill
Community ManagementTechnology
❤️
-
Tips❤️A common design choice is to uppercase all letters in the top navigation menu. You can easily do this on your site by adding this custom CSS to your theme: table.horizontalMenu { text-transform: uppercase; } To add this, go to...
-
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...
-
TipsHello Everybody, Opening links in new windows is trivial once you know what you are doing. Simply add a target="_blank" attribute to any link (a element) and you have yourself a link that will load in a new window. Example: <a href="http://socialstrata.com" target="_blank">Example</a> So seeing how simple it is you might be asking yourself why do we need a tip? Well its simple, a lot of the HTML for Crowdstack is out of the site administrators direct control. Meaning there will...
-
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.
-
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...
-
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❤️Here's how to center the main navigation menu: nav.top-bar { text-align: center; } nav#top_nav_bar ul.right, section.top-bar-section > ul.right { float: none !important; display: inline-block; } .top-bar-section .dropdown li { text-align:left; } .top-bar-section .right li .dropdown { left:0; right:auto; }
-
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...
-
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❤️Sometimes I want to reply to a long post and prefer to quote the original post, and then split the quote so I can insert comments. I found a trick for doing it. It's super easy. Reply with Quote Click where you want to split the quoted text. Press Enter once Press Left Arrow once Press Enter three times. This will split the quote and leave space for you to type something inside the split. This makes it easy to reply to a long post like this. Here's a video. Enjoy! Of course, if you know of...
-
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...
-
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...
-
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.