Jump to content

Community

Leaderboard

  1. Rikki

    Rikki

    Invision Community Team


    • Points

      108

    • Content Count

      24,255


  2. Marc Stridgen

    Marc Stridgen

    Invision Community Team


    • Points

      31

    • Content Count

      261


  3. Mark

    Mark

    Invision Community Team


    • Points

      18

    • Content Count

      36,196


  4. Charles

    Charles

    Management


    • Points

      9

    • Content Count

      19,565


Popular Content

Showing content with the highest reputation since 02/24/2009 in Guides

  1. There are several methods of adding advertisements on your Community both in HTML and as image-based ads. They are placed automatically in areas of your choosing. Create Ads Advertisements can be placed on you site in either image or plain HTML in Advertisements in the AdminCP. You can add a new advertisement by clicking on the "Create new" button shown in the image above. Once you have done this you will be presented with the various options for creating an image. You can either enter HTML code or you can click "Upload Images" in order to upload an ad image. In the
    9 points
  2. Mark

    Google Map Integration

    Enabling integration with Google Maps provides autocomplete functionality when a user enters an address (which is particularly useful if you are using the Commerce application) and can display maps when looking at IP addresses and elsewhere. Warning You need to enable three different API services. Make sure you follow all of the following instructions carefully. To enable Google Maps integration: Go to the Google Developers Console and sign in if you are not signed in already. In the top-left corner is the project selector. You may
    9 points
  3. By default, we use the 'comments' icon from FontAwesome to represent forums on the read/unread badges. IPS4 also includes an option to upload an image that will be used instead of the icon. But what if you want to use a different FontAwesome icon for each forum? The good news is this is possible using some custom CSS. Each forum row in the index template includes a data attribute with the forum ID, meaning we can write a style to specifically target each individual forum and overwrite the icon it uses. Note: Although this method isn't terribly complex, it does require editing
    7 points
  4. Rikki

    Pages

    The foundation of Pages (the application) is the page (the thing). Tip To alleviate confusion in these tutorials, the application "Pages" will always be referred to with a capital letter; pages within the application or community will be lowercase. What is a page? A page is a container for content. Depending on your needs, a page can simply contain simple content (whether that's plain text, or rich content with images, embeds, and the other things you're used from our other applications), or more complex content like blocks and databases (see l
    6 points
  5. We can now tie everything together with some Javascript. It's with the Javascript that everything will feel snappy and interactive. Begin by heading over to the template editor, and editing the Javascript file we created earlier. The Javascript controller we write will do two things: Load the first record when the page is loaded Handle click events on the other records to load the ones the user clicks Here's the final Javascript code you need to insert into the file. We'll explain it shortly:
    5 points
  6. Rhett

    Using SSL (HTTPS)

    Community in the Cloud customers can submit a support ticket to request SSL/HTTPS be enabled for your community. Applies to self-hosted customers only You will need to obtain an SSL certificate and install it on your server before following these instructions To enable SSL/HTTPS for your community, please edit your conf_global.php file, changing 'http' to 'https' in your URL, then save. From: $INFO['base_url'] = 'http://www.yourdomain.com'; To: $INFO['base_url'] = 'https://www.yourdomain.com'; (it's possible that this parameter may be called board_url in
    4 points
  7. HTML Logic is a very powerful way of conditionally showing different elements in your theme, depending on the values of certain properties. Since the entire IPS4 framework is available within a logic expression, there's a lot of scope for using different kinds of data to determine what should show. In this guide we'll provide a range of examples of common logic checks you might want to do. Even if the exact expression you need isn't listed here, it should provide a good starting point to help you write your own expressions. Logic Recap Let's quickly recap how HTML Logic w
    4 points
  8. Occasionally, you'll want to be able to change the style of a particular element on a particular page, without affecting similar elements on other pages. For example, lets say you wanted to change how the .ipsPageHeader element looks in topic view, to make the title bigger, but without changing it for all other pages that also use .ipsPageHeader. Adding a classname - the wrong way One method would be to edit the template for topic view, add a classname to the element, and then create a style using that new classname as the selector. This works, but it has a drawbac
    4 points
  9. For more advanced sites built with Pages, you may want to change the output of a custom HTML or PHP block depending on which page the user is viewing. For example, if you have a custom menu, you may want to highlight the active item. We can implement this in Pages by checking the underlying page URL parameters. Although you access a page with a friendly URL (FURL) like http://<yourcommunity>/section/page, behind the scenes this is mapped to a raw URL, such as http://<yourcommunity>/index.php?app=cms&module=pages&controller=page&path=/section/page. Notice the pa
    4 points
  10. If an existing CKEditor plugin isn't available that meets your needs, another alternative that may be suitable is to create a custom button. What can custom buttons do? Custom buttons allow you to create blocks of HTML that are inserted by clicking a button on the editor toolbar. The blocks you create can accept content that users can enter. Custom buttons don't have the capabilities of a full CKEditor plugin - they can't be dynamic or use Javascript, for example. But for formatting text the user enters, a custom button may be the best choice. Not
    4 points
  11. Rikki

    Buttons

    Basics The button classes described here can be applied to any element, although typically would be applied to an element like a, input[type="submit"] or button so that the user can interact with it. As a minimum, a button should receive the basic ipsButton class, plus a size class and a style class (explained below). Button styles ipsButton_normal Normal button ipsButton_primary Primary button ipsButton_alternate Alternate button ipsButton_important Important button ipsButton_lig
    4 points
  12. Rikki

    Icons

    Description We make use of an icon font called FontAwesome. This enables us to display icons that are accessible, that don't require an additional HTTP request, that can be styled with CSS (and inherit styling automatically), and which scale without loss of quality. Usage An icon can be included within the markup by using the following code: <i class='fa fa-iconname'></i> The list of possible icons and their classnames is available at http://fontawesome.io/icons/. Note that these classnames are not prefixed with ips as with other
    4 points
  13. It may be handy at times, to be able to add some of the blocks you see in pages, or even your own custom blocks, into external webpages. Within IPS4 we give you the ability to choose any block to embed externally directly from the admin CP. Getting the code In order to embed one of your blocks on an external page. First log into your admin CP and visit Pages>Page Management>Blocks. Once you are in here, select the dropdown box next to the block you wish to embed externally, and select "External embed" Once you have selected this, you will be presen
    3 points
  14. Rikki

    Adding custom fields

    Custom fields are what you use to make a database that is specific to your needs. IPS4 supports a wide range of field types so that you can collect data in the appropriate formats, from text and numbers, to upload fields and YouTube embeds. We're going to create a few different fields to gather information about each recipe that we can then display in our database. They are: List of ingredients Prep time Cook time Cuisine A link to a YouTube video recipe We don't need fields for the recipe title, or the instructions. Databases already provide a title fi
    3 points
  15. Rikki

    Responsiveness

    Introduction to responsive classes IPS4's CSS framework is responsive, meaning elements adapt according to the size of the display the users chooses to use. In most cases, the existing classes already outlined in this guide take care of it for you; for example, menus automatically adjust, and tab bars collapse into a dropdown menu on mobile phones. There may be times when you need to control on which devices sizes elements show or hide themselves. For example, if you add a custom footer element, you may want to only show it on desktop, and hide it from tablets or phones. The res
    3 points
  16. Rikki

    Using designer's mode

    While the standard template editor is useful for light template editing, for larger, more complex changes, editing with a real IDE is desirable. The IPS Community Suite facilitates this through something called Designer's Mode. What is Designer's Mode? Designer's Mode allows you to use a real IDE by exporting all of the templates and CSS files to disk as files, and then reimporting them to the suite when you have finished editing them. With Designer's Mode enabled, the software will load its theme from this folder, meaning you can edit the files and see the changes as you
    3 points
  17. For most admins, creating a theme with the Easy Editor is the best option. It allows you to customize the default theme in a point-and-click environment and see your changes in real-time, and requires no coding skills whatsoever. Creating the theme To create the theme we'll edit, navigate to Customization -> Themes in the AdminCP. Click the Add Theme button. In the popup window, ensure the Easy Mode option is selected (it's the default), and then click Next. On the next screen, you can configure some choices about your new theme: Name (requi
    3 points
  18. Rikki

    Dropdown Menus

    Description Dropdown menus allow users to select from a number of options. The markup is designed to work in tandem with the ips.ui.menu javascript module. Usage A menu consists of a trigger element, and the menu element itself: <!-- The trigger --> <a href='#elMyMenu_menu' id='elMyMenu'>Open Menu</a> <!-- The menu --> <ul id='elMyMenu_menu' class='ipsMenu'> ... </ul> The ID of the menu should be the ID of the trigger element, suffixed by _menu. If the trigger element is a link, its href should be a
    3 points
  19. Rikki

    ips.ui.dialog

    Description The dialog widget displays popup windows within the page, typically loading content from a remote source. Usage A dialog is defined simply by including the widget key as an attribute on a trigger element. It is recommended that the trigger element be a link or button, so that if the user has javascript disabled their browser can take them to a full-page version of the dialog contents. <a href='...' data-ipsDialog data-ipsDialog-url='...'>Launch dialog</a> Dialogs offer special functionality for forms contained with the dialog, enabling them
    3 points
  20. Reputation & Reactions are an important part of communities across the internet. IPS Community Suite gives you the flexibility to set these up in a way which is suites your own community needs. Basic Settings Reputation settings can be managed in the following location in your ACP Members -> Member Settings -> Reputation & Reactions From the basic settings screen, you can set up various overall settings, related to how reputation and reactions work on your site. You can switch the system on and off, as well as assign which groups are allowed to u
    2 points
  21. 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 Pro
    2 points
  22. Rikki

    Template plugins

    It's often useful to transform raw values in some way, and this is achieved in IPS4 with template plugins. Template plugins take a value, and optionally some arguments, and output some transformed value. The syntax for template tags is: {pluginkey="<value>" argument="..."} The value can be a normal string, or it could be a variable coming from elsewhere. Template plugins can always be used in templates, but some can also be used in CSS files. Those that can are identified below. Available plugins {advertisement="$location"} The HTML for the specified a
    2 points
  23. Selling advertisement space to your customers can easily achieved within commerce by adding a new product within Commerce>Store>Products. Before reading this step, it is suggested that you read the previous step. This step will cover the items specifically relating to selecting advertisements as the product type. When selecting the Advertisement product type, you will be presented with a screen similar to the following. In addition to the many items discussed in the previous step of this guide, you can choose an advertisement location when selecting this type. This will allow you t
    2 points
  24. Rikki

    Mixins

    Mixins are a special type of controller that allow you to augment or change the functionality of an existing controller. This is particularly useful when you need to change something about how a built-in controller works. Basic structure This is the boilerplate for a mixin: ;( function($, _, undefined){ "use strict"; ips.controller.mixin('mixinName', 'core.global.core.table', true, function () { // Your code goes here } }); The method signature is: ips.controller.mixin( string mixinName, string extendsController, boolean autoLoad, function mixinBody ) mix
    2 points
  25. Marc Stridgen

    Upgrading themes

    When a new version of the software is released, there will inevitably be changes to the default templates in which would need to be replicated in your own custom themes. On an upgrade, only unedited templates would be upgraded automatically, and therefore this would be for yourself to upgrade any templates which cannot be upgraded. There are a couple of tools available for you in order to achieve this. Each of which is explained below. Theme differences The theme differences tool is an external tool which can be found in the following location on our site https://invisionpo
    2 points
  26. 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 ei
    2 points
  27. Rikki

    Miscellaneous

    Padding ipsPad 15px padding on desktop ipsPad_half 7px padding on desktop ipsPad_double 30px padding on desktop The padding classes are scaled appropriately on mobile devices. Spacing ipsSpacer_top 15px top margin ipsSpacer_bottom 15px bottom margin ipsSpacer_both 15px top and bottom margin ipsSpacer_half When combined with one of the above, halves the spacing ipsSpacer_double When combined with one of the above, doubles the spacing Clearing ipsClear Clears floats preceding the element this class is app
    2 points
  28. You can set up gift cards on the system, which will allow your customers to purchase gift cards for people to use on your site. To set these up, you would visit the following area within your admin cp. Commerce>Store>Settings>Gift Cards Setting up gift card settings When first visiting this area, you will see the following screen. You can then set up various set amounts that your members can purchase along with optionally allow their own amounts if you wish to do so, as you can see I have set up below. Purchases gift c
    2 points
  29. Rikki

    Databases part II

    Database URL structure Databases exist inside a page you've created with Pages. Individual categories and records in the database are accessed via the URL of the page. For example, if you had a page with the URL <yourcommunity>/mypage and this page contained your database, you might have a record that's accessed via the URL <yourcommunity>/mypage/category/record, where category is the category name and record is the record name. Your URLs would dynamically update themselves if you renamed your page or moved the database to a different page. To facilitate this approach, da
    2 points
  30. While the theme system allows almost limitless customization possibilities, there are a few best practices that we recommend you follow. They will make things easier for both you and site admins who choose to use your theme. Don't edit default CSS files Whenever a default theme file is edited, it makes upgrading a site a little more difficult because the customizations have to be handled. This is an easy problem to solve for CSS because by its nature it cascades - that means you can create your own CSS files that overwrite styles defined in our default CSS files, w
    2 points
  31. Rikki

    Messages

    Description The messages module provides a way to style informational messages to bring something to the user's attention. Usage To create a message, simply add the ipsMessage class to a container element (e.g. div), along with one of the message styles below. The message style class will automatically add the appropriate icon to your message box. Message styles Error - ipsMessage_error This is an error message. Success - ipsMessage_success This message indicates something happened successfully.
    2 points
  32. On the front end of your community, moderators can moderate your site depending on the permissions that you have given them to do so. Moderation can be done at an item level, or the level of its container. For example you may moderate individual posts from the topic screen, or moderate topics from the forum screen. Content Moderation Whilst within a post or topic, if you hover over the topic or post you wish to moderate you will see a checkbox appear in the top right of that item. Selecting this will add this to the items that you are currently moderating. Once you have select
    1 point
  33. Share Icons You can place links to share content to other social media such as Facebook and twitter. You will see these links below any content on the site. Here is an example from a topic. Share icons Share Permissions If you visit Sharing you will see all of the sharing sites that you can currently use. You can disable any of these completely at any time. Simply click the "Enabled" button and this will change to "Disabled" Shares Available If you click on the pen
    1 point
  34. S3 is a reliable, scalable cloud storage service provided by googles AWS platform. Using AWS, for some, may be a cost effective and faster way to store data outside of your usual hosting environment. The following guide shows how to set up S3, alongside your Invision Community setup. Note that this guide is correct at the time of writing, and screens may vary from time to time on the AWS console. If you have not set one up already, please first of all ensure you have created an amazon AWS account. You can do this at the following location. https://portal.aws.amazon.com/gp/aws/developer/r
    1 point
  35. Marc Stridgen

    Customer Referrals

    Customer Referrals can be a good way in which to drive sales on your site, as you can get your customers doing the work for you, giving a small benefit to the customer who is referring people to your site. Within the admin CP, you can get to the referal setup section by going to Commerce>Customers>Referrals. Switching On Once you enable referrals and save them as being on, you will see 3 tabs. The first section you will see will look similar to the screen below, and allow you to switch the system on and off, and to set whether your customers can see the commision rules.
    1 point
  36. Rikki

    Styling CKEditor

    The IPS Community Suite uses CKEditor to power its rich text editing capabilities. Often, when developing a theme for you own community or for distribution, you'll also want to style the editor to match. CKEditor itself is a very large and complex project. It has many hundreds of CSS classes, and explaining how to style each part of the editor is beyond the scope of this guide. We recommend you check out CKEditor's website if you need more information. That said, here's some tips to guide you. Using custom.css to style the editor Prior to IPS 4.1,
    1 point
  37. By default, IPS4 has a maximum body width of 1340 pixels, and is fluid at sizes smaller than this. However, we ship the software with a customizable theme setting allowing this to be easily overridden, should you want to change the behavior. Using the Easy Mode theme editor If your theme was made using the Easy Mode editor, you can adjust the body width on the Settings tab when designing your theme. First, click the magic wand icon to launch the Easy Mode editor: And then the Settings tab. There's two settings you need to adjust; turn on Enable F
    1 point
  38. Rikki

    Databases part I

    What's a database? Databases are one of the most powerful and flexible features available in the Pages application. With some configuration and customization, they enable you to add complex, data-driven areas to your community, using some of the basic underlying functionality that full IPS4 applications have. Databases, as the name implies, are designed to hold data and display that to the user. This might be as simple as a table of records each containing a title and a body, from which you could make a very simple blog-like section, or it might be as complex as a completely
    1 point
  39. Rikki

    Variables

    Each template bit can have variables passed into it by the backed PHP code, and these variables can be used by the template bit to control the display. Consult either the template editor or designer's mode guides (depending on your preference) to find out how to determine which variables are available to a template. As well as these local variables, you can access the various objects created by the IPS4 PHP framework. Variables are escaped It's important to note that by default, all variable values are HTML-escaped when you output them in templates. This i
    1 point
  40. Rikki

    Plural phrases

    Why plurals are treated differently Many of the phrases used in the IPS Community Suite are plurals. Some examples are: 21 replies 3 comments You have 10 new notifications In English, a plural typically has an 's' for multiple, and no 's' for singular. In other languages, the rules may be more complex and require a specific format depending on the exact number. To facilitate these nuances, the IPS Community Suite uses a special syntax for phrases that refer to a plural items. The language system passes the value being used into the phrase, a
    1 point
  41. On occasion you may wish to override the theme choice members have made (for example, when you install a new default theme). The IPS Community Suite allows you to do this easily on a per-group basis. Navigate to Customization -> Themes in the AdminCP, and click the dropdown arrow next to the theme you want to force as the selected theme. Select Set as Members' Theme from the menu: In the popup window that will appear, you can choose which groups (or all of them) to reset. For example, if a member in the Members group had chosen the Green Theme to use, by using the
    1 point
  42. Rikki

    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
    1 point
  43. Rikki

    Forms

    Description The form module provides classes for styling forms throughout the suite, with a range of options available to change the appearance and flow. Usage A form should have the base class ipsForm. In many cases this will be directly on the <form> element, but it can actually appear on any element that contains form elements. The recommended basic DOM structure for a form is as follows: <form class='ipsForm'> <ul> <li class='ipsFieldRow'> ... </li> <li class='ipsFieldRow'> ... </li&g
    1 point
  44. Rikki

    Layout: Grids

    Description The grid module provides classes for building layouts based on a flexible 12-column grid, with automatic margins, and with additional classes to enable the layout to collapse properly on smaller devices. Usage A grid should be made up of a wrapper element with the class ipsGrid, and direct descendants with appropriate size classes applied (see below). For example: <div class='ipsGrid'> <div class='ipsGrid_span3'>Span 3</div> <div class='ipsGrid_span3'>Span 3</div> <div class='ipsGrid_span4'>Span
    1 point
  45. Rikki

    Layout: Columns

    Description The column module, unlike the grids module, provides classes that enable layouts comprising both fixed and fluid columns to be easily created. This is a layout often used for fixed sidebars with fluid content areas, for example. Additional classes are available to collapse the layout on smaller devices. Usage A column layout consists of a wrapper element, with the column elements as direct descendants of the wrapper. No other layout classes should be applied directly to the column elements. An example of a column layout: <di
    1 point
  46. Introduction In order to properly differentiate between CSS classes and HTML elements that form part of the IPS4 framework and those that do not, and in order to create a logical structure that can be understood at a glance, naming conventions are applied as follows. Framework classes & elements The IPS4 CSS framework is split into loosely-defined 'modules'. A module groups together related styles in a single file, with the aim of making it clearer which styles will be applied to a given element, and also to make it easier to find those styles to edit in the CSS
    1 point
  47. Rikki

    Controllers

    Overview Controllers are special modules that handle specific functionality on specific pages. They are not necessarily reusable in different contexts, although some may be. A controller is initialized on an individual element, and that element becomes the controller's scope. A controller responds to user events (such as click) and events triggered by UI widgets or sub-controllers, and manipulates its scope element accordingly. The scope of a controllers functionality is entirely flexible. A controller might be initialized on a very small fragment of the page and perform just one tas
    1 point
  48. In IPS4, most javascript is split into self-contained, named modules. Modules and javascript files have a one-to-one relationship - each javascript file should contain one module only. Modules prevent variables leaking into the global scope (which must be avoided), and helps ensure code stays focused. All modules appear under the ips namespace. Types of Module A number of primary types of module exist within the software: Utility Modules Exist on the ips.utils namespace, and provide assorted functionality that other modules can make use of, including cookie handling and meth
    1 point
×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy