Jump to content

shahed

Clients
  • Posts

    507
  • Joined

  • Last visited

  • Days Won

    1

Reputation Activity

  1. Like
    shahed reacted to Marc Stridgen for a guide, Custom Profile Fields   
    In any community there will always be information you want to capture about your members which is not provided within the core product. These may be information needed for administration purposes, or items which you wish to have displayed within profile, or content items. In the IPS Community Suite, we provide the ability to set up many of these, grouping in a way in which is appropriate to your site. 
    Setting Up
    Profile fields can be set up within the following location within your ACP
    Members -> Member Settings -> Profiles -> Profile Fields

    Profile field list
    Clicking on the Create New button in the top right will allow you to set up a new grouping for profile fields, similar to what you see above with the Personal Information section. To add a new field to a group, select the + at the side of the relevant group.
     
    Clicking to add a new field will show you the following screen. You will see I have selected text as the field type on this occasion which will let a user enter information into a text box. 

    New profile field entry
     
    You can see settings here you can use to set up a maximum length and even using Regular Expressions to validate the data that is entered. You will note that there is no "Required" element shown here. This is because we have profile completion set up. If you do not have quick registration set up to use profile completion, you will also see a "Required" checkbox which can be selected.
     
    In addition you can set up where the information is shown, how it is shown, and its behavior with regards to being filled in. Do you want this to be edited once it is filled in? No? Not a problem, just de-select the "Member can edit value" and it will only allow this to be entered once.

    New profile entry
    What is important to note on the screenshot above, is the "Display Format for..." sections. These will appear only if you have the corresponding settings to make these viewable, and were introduced in version 4.4 of the Invision Community platform. So for example, above we have "Show to staff" set for the "Show with members content submissions". If we switched this not to show, then you would not see the "Display format for topics" option.
    Display Formatting
    The display formatting sections by default will display just the field contents. However you can display the item stored in the field in any way you wish, by selecting "Use Custom Formatting". You will then be shown the following field for adding your own formatting code

    Display Formatting
    This is where you can enter HTML along with the placeholders provided to display the information in any manor that you choose. This is how they will then be displayed in that area (Profile or topic).
    Note: Prior to the 4.4 version, this is a single field named "Display Format" and applies to both areas. {title} and {content} should be used instead of the ones below.
    If you add the following code to the example field we set up, the placeholders {$title} and {$content} will be replaced with the title of the custom field, and the content that is entered by the user
    <strong>{$title}:</strong> {$content} User Side
    You will see once you have set up your profile fields the members can then add the information from within their profiles.

    Profile Field Completion
    Depending on if you have setup of your profile fields to be searchable, these can also be searched using the member search form on your site

    Profile Field Search
    And of course, they will show up in various areas of the site, using the formatting in which you have set to your own liking.

    Formatting on Posts
     
     
  2. Like
    shahed reacted to Rikki for a guide, Handling right-to-left languages   
    The IPS Community Suite has built-in support for languages that use right-to-left text (including Arabic, Persian and others), and if you are creating a theme to share with others, you should ensure it is compatible with right-to-left display. Doing so is easy.
     
    RTL-specific CSS
    When RTL display is used, certain CSS properties need to be reversed; for example, if you position something left in LTR languages, when shown in RTL it would need to be positioned right instead.
    The global template in IPS4 always has the dir attribute specifying the text direction (the value is either ltr or rtl), and it is this attribute we can use to add direction-specific styles.
    Let's imagine you have some CSS in your theme like this:
    .yourClass { font-weight: bold; position: absolute; left: 15px; top: 15px; padding-left: 30px; } Some of these styles need to be separated out for RTL or the theme won't look right. So, by using the dir attribute on the html tag, what we instead need to write is:
    /* These styles are the same regardless of text-direction */ .yourClass { font-weight: bold; position: absolute; top: 15px; } /* LTR styles */ html[dir="ltr"] .yourClass { left: 15px; padding-left: 30px; } /* RTL styles */ html[dir="rtl"] .yourClass { right: 15px; padding-right: 30px; } That's it! RTL languages will now correctly position the element on the right-hand side of the screen, while LTR languages will show it on the left as expected.
    Whenever you use styles impacted by text direction, you should split them out in this way.
     
    RTL-specific icons
    The IPS Community Suite makes extensive use of FontAwesome icons. Some of the icons need to be flipped for RTL languages (such as arrows) and if you use the standard classnames (e.g. fa-caret-left), we automatically flip these so that they are correct for RTL languages.
    If you manually specify icons in your CSS classes using the unicode code, you will need to adjust them for RTL so that their opposite icon is used. For example, if you do this in your CSS:
    /* This uses the unicode for FA's 'angle-right' icon */ .nextLink:after { font-family: 'FontAwesome'; content: '\f105'; } You will need to change it to be:
    .nextLink:after { font-family: 'FontAwesome'; } html[dir="ltr"] .nextLink:after { content: '\f105'; } html[dir="rtl"] .nextLink:after { content: '\f104'; }  
    Consider your Javascript
    This usually will not require any action. However, if you have any custom JavaScript which adds user interaction, consider if any changes need to be made. For example, if you have a menu which opens from the left, it may need to open from the right. If you are only using the UI widgets already in the IPS Community Suite, these already make all such considerations so no action will be necessary.
  3. Like
    shahed reacted to Rikki for a guide, Introduction to themes   
    What is a theme?
    A theme is a package that changes how the IPS Community Suite looks. By default, the software has a blue theme (it's the one you see here on our own community), but with themes you can completely change that, including colors, fonts, images and much more. With a little skill, your imagination is the limit!
    Above all, themes are a great way to keep consistent branding between your main website and your community.
     
    Where do you get themes?
    Themes can come from a few different sources, including:
    Our Marketplace, for free or paid Created yourself using the Easy Mode editor Created yourself using the full theme editor (for advanced users) Some designers run their own sites that offer ready-made themes for purchase/download You can hire a designer to create a theme especially for your community   
    Multiple themes
    Although many communities have one theme that matches their brand, it's also possible to install multiple themes and let users choose between them. You can select a default as your 'main' theme, and users can choose their own preference from the theme selector at the bottom of the page. You can even restrict themes to certain member groups, allowing you to have 'premium' themes for paid members (for example). We'll cover how to do all this and more in a later step.
×
×
  • Create New...