5 photo apps that add panache to your site
Rosemary O'Neill
Community ManagementTechnology
❤️
-
Tips❤️Flash works in hoopla, but of course, not on iPads and Android (latest versions). We had a really good flash logo on our homepage vAnd our recent site stats told us 18% of our users were using those OS', and thus, seeing a big blank space where our...
-
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...
-
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...
-
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:
-
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❤️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; }
-
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❤️Hey everyone- Sometime next week, we'll be rolling out another major update for Crowdstack , this one focusing on improving navigation in the Admin Control Panel. Currently, the Admin Control Panel is one very long list of links. We're making things (hopefully) easier to get to by putting the main control panel sections in a smaller menu at the top of each control panel page, with the subsections of each main area available in a sidebar when you are in a particular section. It will look like...
-
Blog Post CommentSticky header is what required to enhance the appearance and help other not to scroll back and forth. I appreciate it
-
Blog Post CommentThe Sticky at the top of the page feels too large, and you lose the context of the discussion. Suggestion. Instead of this: Continue to display the breadcrumbs like this. That is: Make the breadcrumbs sticky. ST
-
Blog Post CommentI agree. I used the CSS to suppress the sticky title because it took up too much of the screen, making it hard to follow the content.
-
Blog Post CommentMore on the Sticky Header. Basically - I appreciate the intent but as it stands, it's pretty jarring when you scroll down. As I mentioned, I'd prefer to keep the context provided by the breadcrumbs, but even if you can do that, how do I solve this. Before the scroll. Once you scroll down far enough to trigger the sticky topic the background of the sticky extends across the width of the window, and you get this. ST
-
Blog Post CommentHi Julie, Would you mind sharing the CSS you used for this. It will save me a lot of time. Thanks, ST
-
Blog Post Comment❤️Hi @neil , all of the links within Hoop.la, and external links TO your Hoop.la site, will just work magically. However, you would want to check your header, footer, any custom CSS, ad slots, images or videos from an external source, etc., for anything loading http:// and change it to https://.
-
Topic ReplyHey there! I'm curious as to what you're looking to customize? Crowdstack plans offer varying degrees of access to things like Custom CSS and Custom pages, as well as custom HTML in the header, but we may be able to help you if we know a bit more about your design goals. Just a tidbit---Crowdstack uses Foundation framework for its CSS. Most browsers include a way to "inspect" a page to see the classes that are being used, which helps if you're trying to focus in on a particular piece of text...
-
Topic Reply❤️Neil, I'll add to this. Instead of the magnifying glass in the header, I have the word "SEARCH" spelled out. Makes it more noticeable, IMO. Here is the code: /* turn icon into "SEARCH" in top header*/ .h-search i.fa { font: inherit; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; } .h-search i.fa-fw { width: auto; } .h-search i.fa-search:before { content: "Search"; }
-
Blog Post CommentWill our existing non-responsive header & footer HTML & images be copied over so I can at least adapt those on the day it's moved?