Skip to main content

Tagged With "CSS"

Tagged With "CSS"

  • Tip
    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...
  • Tip
    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 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!
  • Tip
    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 */...
  • 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
  • Tip
    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...
  • Tip
    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...
  • Tip
    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;}
  • Tip
    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.
  • 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...
  • Tip
    ❤️
    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:
  • SuggestionUnder Consideration2 Votes
    ❤️
    HI, I'd like to be able to pre-populate the custom message for accepting or rejecting a request to join our community. We have a team of people who review applications. We'd like to start with the same core language instead of having to copy/paste from a text file that we have to manage separately. Thanks for considering the suggestion. OR if there's a CSS selector for the content of that object, I can take a run at figuring it out. ST
  • 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?   
  • 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. 
  • Tip
    ❤️
    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...
  • Support 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;}
  • Blog Post Comment
    My team and I are extremely happy with the new platform, as are the members of our ACEsConnection community. Now that you've opened the floodgates, of course we'll be sending (and already have), a few ideas to continue down the path of making Hoop.la the best white-label social network out there!
  • Blog Post Comment
    Thanks, Jane! We love hearing feedback like that and always welcome suggestions and ideas Happy New Year!
  • Support Topic Reply
    Hi Rich, You'll need to use the specific permission circle's numeric ID in the selector, as I mentioned above to Brisotti. You can grab that ID from the URL and then use a CSS selector like .h-member-badge-XXX:before (where XXX is the numeric ID) instead of .h-member-badge-premium:before . Hope that helps! Brian
  • Support Topic Reply
    How can we also Display:None the breadcrumbs display on that specific custom page? (I want to embed a chat but not leave a trail back to our other chat rooms).
  • Support 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.
  • Support Topic 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 Topic 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 Topic 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...
  • Support 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"...
  • Support 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
×
×
×
×