Jump to content

Tips & Tricks

  1. Common logic checks using HTML Logic

    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 he

  2. Changing FontAwesome icons per-forum

    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 i

  3. Making the community fluid-width

    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

  4. 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.

  5. Targeting elements on specific pages with CSS

    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

  6. Creating custom Staff Directory layouts

    It is possible to create custom layouts for the Staff Directory page. You will need to write the templates using HTML, so to do this you will need to be familiar with HTML, as well as basic PHP logic. In the AdminCP, go to Customization -> Themes and click the "Edit HTML and CSS" button for your default theme. Then, from the "New" dropdown, choose "HTML Template". You can name the template whatever you like, and fill the rest of the form out with the following details:   Variables
Invision Community © 2024 IPS, Inc.
×
×
  • Create New...