CSS learning resources, free and cheap
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...
-
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❤️Crowdstack displays breadcrumbs on all pages. However, for most sites, having a breadcrumb that simply says "Home" on the home page is superfluous. To remove the breadcrumbs on the home page only, add this CSS to your site:
-
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...
-
-
TipsIf you'd like to increase or decrease the size of the font used in the top navigation bar, insert this Custom CSS in your theme (this example increases the font size relative to the default size you've set): .top-bar-section ul li > a {font-size: 1.25rem;}
-
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...
-
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 */...
-
TipsI 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:
-
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.
-
Topic Reply❤️Awesome. And let me be the first to request that this be a "point and click option" in the Control Panel, ....when you come up for air.
-
-
Topic ReplyWhere do I put the CSS code above mentioned..?
-
Topic ReplyI placed the CSS code but it did not worked. Please, what I´m doing wrong..? Thanks.
-
Topic ReplyHi Brisotti, The code should go into your Display Settings control panel in the Custom CSS box. You need to make sure you use the permission circle's group ID instead of "premium" if it's not a premium permission group. For your Patrocinador circle, that numeric ID is 350043526109298115, which you can see in the URL when editing the permission circle's details. I changed your selector to .h-member-badge-350043526109298115, which fixed the problem (you also had replaced the 'h' with "webkits"...
-
Topic ReplyBrian, thanks a lot. Plese, how can I change the font size on that Badge..?
-
Topic ReplyHi Brisotti, For that specific badge, the selector is .h-member-badge-350043526109298115 so the font can be controlled with something like this: .h-member-badge-350043526109298115 { font-size: 0.8rem; } Note that we don't generally offer free assistance with Custom CSS. Custom CSS assistance falls under our Advanced Support, which is $150/hour. I've made an exception here to get you going in the right direction. If you need further assistance, please open a new support topic. Regards, Brian
-
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.
-
Topic ReplyHi Chris- I went ahead and forked off your post above into a new private support topic for you.
-
Topic Replythese tips are great! I'm applying them and they make the site look great!
-
Topic ReplyPlease tell me how to convert font size in px to REM; I have NEVER heard of this before. Thank you
-
Topic ReplyGood evening, The REM value is derived from the "Base Font Size" setting defined within your theme: CP -> Design -> Standard Themes If you edit your theme you will see the setting in the "Fonts" section. Consider a REM value a multiplier of that value. So if you have a "Base Font Size" of 16px, and you want to target a element to use a 12px font size you would set the REM value to 0.75rem. That is 16px * 0.75 = 12px. I think I can sense what you are thinking: "But Jonmark, why wouldn't...
-
Topic ReplyHi, Thanks for the explanation. It still doesn't help. In what way do I write the font size??? 12px? 12 pt?? I have set my font size in a widget which has my welcome pagagraph, and no matter what I do to it, it is displaying what I would call 2pt type. Please HELP!!!!!
-
Topic ReplyOkay I really need help!!! All my pages are displaying in this super tiny font, including Private Messages!! Please tell me what to set , where to set it , so it displays as 12 point type!! AAAGGHHHH!!!!!!!!!!!!!!!!!!! I don't have the time to screw around with this!!!!!
-
Topic ReplyI cannot get this to work!! So frustrating!! Please help! I have created a clone of a standard theme (to pick from) and added the code to the head css section and it's still not centered. HELP! Thank you!
-
Topic ReplyHello, I still cannot get this to work! This is what I'm posting into the " Custom Code For HEAD Section": div#horizontalNavMenuSecondaryWrapper { width:100%; } #menuWhitespaceTd .horizontalMenuWhitespace { display:none; } table.horizontalMenu { margin:auto; width:300px; } This code shows up ABOVE my forum banner, on all pages. Am I missing something??? Thank you in advance for all help!
-
Topic ReplyAnd yes, I am putting it on my selected Theme page, which is my active theme.
-
Topic ReplyHi jpmfan, The "Custom Code For HEAD Section" requires HTML, but what you've pasted there is CSS. You should put that into the Custom CSS section in your theme instead (just beneath where you've got it right now). Hope that helps! Brian
-
Topic Reply❤️Hi Brian, Thanks so much! That did the trick! Best, jpmfan
-
-
-
Topic ReplyHi, Ted. I just installed UNICODE 9.0 fonts so I could use this symbol. And later I found your post above. I went to Font Awesome https://fontawesome.com/icons/power-off?style=solid and used the instructions that said to use this code < i class = " fas fa-power-off " > </ i > When I do that, I get and trying the same code here in this message the html editor in this windows strips out the code and it won't render. What am I doing wrong. Thanks, ST </body>
-
Topic Reply❤️Let me see if I can get this to work in the wysiwyg editor: This is a test Which definitely works. I think that the issue you are having is that you are trying to use the fas class, which I'm not sure is available in Font Awesome 4.7 (the version we are currently using in Crowdstack). We have plans to upgrade this in an upcoming release. Next, since the WYSIWYG does not have Font Awesome icon support built directly into it you will need to use the "Source code" option on the far right to...
-
Topic ReplyHi, Jonmark. That was helpful and I appreciate the time and effort you put into this. Signing on this topic. With thanks, ST
-
Blog Post CommentAny idea when the Pinterest feature will actually be in place, as would like to announce to my members. Thanks.
-
-
Blog Post CommentWe've now completed the deployment of this release!