How to Share your Top 10 Posts
Rosemary O'Neill
Crowdstack
-
Tips❤️By default, the top navigation menu is aligned left within the body of the page, which itself is centered and 1000 pixels wide. It looks like this normally: You can center that top nav menu, however, so it looks like this...
-
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...
-
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*/...
-
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❤️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; }
-
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 */...
-
SuggestionsI would like to suggest that the Alert Bells in the Alerts section do not disappear until you have accessed the specific alert. Currently all the Unread indicators (Bells) disappear when you access the Alerts list but not necessarily access the actual alert itself. I would also like to see the numeric indicator in the top nav show the actual number of unread Alerts. This number would tick down by 1 every time you accessed an unread alert. Currently the numeric indicator disappears after the...
-
Blog Post CommentTHAT is a great idea! Nice way to recap the year too! Thanks for the suggestion!
-
Blog Post CommentYou're welcome Morgan! I'd love to see your list when it's done!
-
Blog Post CommentHi Rosemary! Is there a way to create a collection for forum posts in this manner so it can be pulled into a widget like you suggest with the blog posts?
-
Blog Post CommentNot right now, but as I was writing this post I realized that would be a cool idea...want to go suggest it at https://hey.crowdstack.com/support ? That way we can get it voted up
-
Blog Post CommentDone. And I just posted my top 10 forum posts . Happy Holidays!
-
-
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 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 shall post! ...but maybe you could have just re-titled this post: "Ted's How to CSS the Hell out of the Nav Menu" and kept posting customizations.
-
Topic ReplyFOLLOW UP: How to I get Nav Bar to stay 'box width' instead of page width? At first glance in inspector it seems to say it is contained to a grid (div id="top_nav_bar_wrapper" class="sticky contain-to-grid") ...whatever grid that's referring to. This may have worked right yesterday, don't remember. "If you need it broken, ask Neil."
-
Topic ReplyI have rolled this tip into a larger nav menu positioning tip here: https://hey.crowdstack.com/support/topic/how-to-...
-
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?
-
Crowdstack DiscussionCrowdstack is set to fill only 66% of a browser’s window width when viewing on desktops and laptops. In my opinion, this creates a large waste of screen real estate. In the past, we were warned by Crowdstack that adjusting the display width to fill more of the screen would cause “many issues.” But after repeated requests from my community (www.rotation.org), and my own interests in “trying,” I tempted fate and changed the width from 66% to 80% by making several small tweaks to our custom...
-
Topic ReplyHey Rich... long time! How are things over at OGR? Below is the pertinent custom CSS. I post it with caveats: Caveat 1: We aren't using the "cards" mode/version of Cstack. Like you, we're using what I believe used to be called "version 1" or the legacy format, (i.e. no cards enabled). Caveat 2: We're not running any third-party features (code). If someone is, then our width adjustment may create unintended (but not necessarily unfixable) changes. Caveat 3: Over the years, we've created quite...