Skip to main content

Tagged With "CSS"

Tagged With "CSS"

  • 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
    The 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:
  • Tips
    On 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
    When you create a custom page and choose to insert it within the standard page wrapper, Crowdstack will automatically include the Page Name as the title at the top of the page. If you don't want the title to appear, insert this piece of custom CSS in your Custom Page, within the Custom CSS box: .h-home-menu-title-column { display:none; } NOTE this is updated since the April 2020 software release.
  • Tips
    If 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...
  • Tips
    This 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...
  • Tips
    For 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
    I 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:
  • Topic Reply
    Hi 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 Reply
    Hi 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 Reply
    Thank 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 Reply
    You 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 Reply
    Good 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 Reply
    Hi, 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 Reply
    Okay 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 Reply
    I 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 Reply
    Hello, 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 Reply
    Hi 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 Rosemary, this is a good tip. If I also have some CSS for the other h1 tag on the page - not the one for the title tag - could I still include information for the h1 in the CSS: h1#pageTitle { display:none; } h1 { font-size: 18pt;; font-style: bold; margin-left:8%; } .breadcrumbs {display: none;}
  • Topic Reply
    Hi, 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 Reply
    Hi, Jonmark. That was helpful and I appreciate the time and effort you put into this. Signing on this topic. With thanks, ST
  • Blog Post Comment
    Any idea when the Pinterest feature will actually be in place, as would like to announce to my members. Thanks.
×
×
×