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...
  • QuestionUnanswered
    I'm having a hard time figuring out how to style our html that's set to be used as the header of our emails, so that they have a margin of 0.  Outlook seems to add padding to top, left, right, etc. 
  • 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;}
  • QuestionUnanswered
    I hope it's not inappropriate for me to ask this. I like the way this hoop.la site set up their navigation bar, specifically the upper right side where there are button links to the tumblr, facebook, flickr, twitter, and youtube. How did they set...
  • QuestionUnanswered
    Hi, I am concerned with the padding/margins on the Beta site. I have tried to add custom CSS to the whole  site; but no results are being displayed. Now that my BETA site is done, can we set up a time for you to show me how to make minor tweaks to the CSS on the site?   
  • 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:
  • IssueResolved
    Hi Can you help me figure out why the POST button has a serif font? I basically copied this button to our home page (same class definition). They look like this. This only happens on IE 11. Other browsers render like this: I don't think I've done anything to the CSS. Thanks ST
  • IssueResolved
    Hi there! Since the recent major update, I noticed theres's this new 'Sticky Header' added to topic pages. Seen under the top navigation as well as at the top of the page after scrolling down. (see screen snaps below) I can't find where to style it, unless I'm missing something obvious. I could do it by custom CSS, but since it breaks dark themes I believe that at least its colors should be selectable from the theme editor. Thanks in advance!
  • Support Ticket Reply
    Hi Melody- I would suggest posting your specific questions here. That's going to be the most expeditious way to get the answers you want. What exactly are you trying to change padding/margin for?
  • Support Ticket Reply
    I was told that we would get training on how to tweak the CSS on the BETA site before it goes live. We need to set this up. The words are all cramped against the sides of the divs and up aginsta the photos. I would just like to get a walk-through please. Thank you for your quick response.
  • Support Ticket Reply
    Hi Melody- David Dreezer already had a call with your team ealier this month and in that call we were asked to go ahead and do all of the work on your beta site (which we did at no cost). We'd be happy to set up training, but there is a cost associated with that. If you would like a quote, let me know. I really think it will be much cheaper (and faster, since I'm not sure when we will be able to schedule training right now) if you just tell us the specific issues you are having (or the...
  • 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
  • Support Ticket Reply
    ❤️
    Hi, Slaz! Thanks for the report--there will be a fix for this very soon, and we'll post back here once it's fixed. Lori
  • Support Ticket Reply
    Thank you Lori! In the meantime I'm doing this through custom CSS. If anyone else uses a dark theme and wishes to fix it, add below code to the Custom CSS section of your Display Settings. Ideally you should change #000000 (black) to your page background color.
  • Support Ticket Reply
    ❤️
    Thanks Slaz. Changing the Background color will also help the sticky header stand out from the page's background too. Hoop: When viewing on a small device... The FONT SIZE of the floating bar needs adjusted for small devices. It eats up too much of the screen real estate. I tried to apply font-size but the CSS would not take. Please give us the secret sauce to adjust the font size. Also, the Sticky Header covers up the Hamburger Menu. (For that reason alone I might want to turn it off.) Hope...
  • Support Ticket Reply
    ❤️
    Hi @neil - When we roll out the fix for this, the sticky header will not appear on "small grids" (narrow viewports like mobile phones). Thus, you won't have to worry about that.
  • Support Ticket Reply
    ❤️
    Good news! We've just rolled out an update that solves this problem. The sticky header will now use the same colors set in your theme for Default Content. In addition, the sticky header will not appear at all on smaller screens. Thus, no CSS should be required now, unless you want to change use colors other than the Default Content theme items.
  • 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...
×
×
×