Jump to content

The Old Man

Clients
  • Posts

    3,952
  • Joined

  • Last visited

  • Days Won

    11

Reputation Activity

  1. Like
    The Old Man reacted to Rikki for a guide, Best practices for your themes   
    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, without impacting the ability for the suite to update the default CSS file later upon upgrade.
    By way of encouragement, we ship an empty CSS file called custom.css which you can use as a starting point for your changes. For simpler themes, keeping your changes in this one file might be sufficient. However, you can create more custom CSS files in the custom group if you wish, and they'll be automatically included (no need to use @import statements).

     
    The IPS Community Suite always includes your custom CSS files last in the loading order, so you can use the same selectors you see in the default CSS files and your new styles should overwrite the default.
     
    Keep template changes to a minimum
    Similar to the above, editing templates can lead to difficulty with upgrades, because customized templates may be missing new HTML necessary for a new feature, or worse, break the templates by calling a variable that has since been removed.
    However, unlike CSS files, templates can't cascade, and sometimes editing a template is the only choice. Therefore, we recommend you try to keep these edits to a minimum. There's a few strategies for doing so:
    Use CSS where possible
    It may be tempting to adjust the HTML in templates to help achieve some particular visual style. We recommend exploring using CSS to do this instead wherever possible because it will make maintaining your theme much easier in the long run. Use template includes and custom templates where appropriate
    If you're adding a larger block of HTML to a template (more than a couple of lines), consider putting that code in a custom template bit instead, and then calling that template from the default template. That way, the customization to the default template is a simple include tag that can easily be reverted and added back later without much effort. To call a custom template, you can do: {template="myCustomTemplate" group="<group>" app="<app>"} where <group> and <app> are the keys for the location you chose when you created your custom template bit.
    Consider creating a hook instead
    Application hooks have the ability to adjust templates by 'hooking' into the code inside them. In some situations, using a hook to adjust the template may be more appropriate that editing the template contents directly.
     
    Remember mobile support
    The IPS Community Suite has been designed from the ground up to be responsive; that is, the same theme works on devices regardless of screen size, whether it's a desktop monitor or a phone. When you make changes to your theme, remember to consider mobile support and ensure you include responsive styles too. You can use a tool like Google Chrome's web inspector to mimic different screen sizes, or use a tool like BrowserStack to test your theme on real devices
     
    Remember right-to-left support
    The IPS Community Suite is designed to work fully with both left-to-right (LTR) and right-to-left (RTL) languages. If you are creating a theme that you plan to share with others (rather than one just for your own use), keep RTL support in mind. The next step of this guide covers some steps you can follow to support it.
  2. Like
    The Old Man reacted to Rikki for a guide, Adding custom editor buttons   
    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.
    Note: although custom buttons tend to be simple, we recommend you have knowledge of HTML, or seek assistance from our peer-to-peer forums.
     
    Creating a custom button
    To create a custom button, navigate to Customization -> Editor -> Toolbars. Click the Add Button button in the header, and then the Custom tab. The form you see has the following fields:
    Button title
    The title seen by users when they hover over the button in the editor Icon
    A small image file that will act at the button icon on the editor. For retina support, upload an icon twice as big as you'd like it to display; it will be resized down by the browser and therefore show high-res. Type
    Three types of content are supported, and they roughly mimic the three types of element display in HTML: Inline - used when the inserted HTML exists somewhere in a line of text. Does not create a new line for the content. Single line block - designed for single lines (e.g. headers), and puts the block on a new line Block - used for multiple lines, and puts the block on a new line Use option
    A custom button can optionally accept a value from the user (aside from what they can type as normal inside the block itself). This option will appear as a popup dialog when the user clicks the button in the editor, and the value they enter is passed into the block when it is rendered. With this field enabled, you'll see an additional setting: Option label
    The text shown to the user requesting a value for the option. HTML
    The actual HTML the button will render in the editor when used. Generally, any HTML is supported but it must be valid. Within this HTML, a couple of special tags can be used: {option}
    If the option is used, this tag is replaced with the value the user entered, as-is. {content}
    If your button will allow the user to type within the generated HTML, insert this tag where the user should be able to type. Click the Save button to create the button. Your icon will be shown on the Buttons Not On Editor toolbar, and from here you can drag it to your live toolbars and configure it as normal.
     
    Using custom styles
    We don't recommend using inline styles in your HTML, because it will be almost impossible for you to update later (posts are built at save-time, not display-time, so if you update a custom button, old posts won't reflect those changes).
    Instead, we suggest using classnames, and adding styles for those classnames in your custom.css theme file. This way, you can update the styles later, and old posts will also reflect the changes.
     
    An example
    Within this documentation we have tip boxes like this:
    Tip This is a tip
    This is a custom editor button we've created that is available to staff. Here's the configuration we used to create this button:
    Button title
    Tip Icon
    Type
    Block Use option
    No HTML <div class='docsBox docsBox_tip'> <div class='docsBox_header'>Tip</div> <div class='docsBox_body'> <div class='ipsType_richText ipsType_break ipsContained'> {content} </div> </div> </div>  
    We then add these styles to our custom.css CSS file:
    .docsBox_header { padding: 5px 10px; color: #fff; font-weight: 500; font-size: 15px; } .docsBox_body { padding: 10px; font-size: 13px; line-height: 1.4; } .docsBox_tip .docsBox_header { background: #2E7D32; } .docsBox_tip .docsBox_body { background: #E8F5E9; } .docsBox_tip .docsBox_body .ipsType_richText { color: #1B5E20; }  
  3. Like
    The Old Man reacted to Rikki for a guide, 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 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 drawback - because you've edited the template, IPS4 won't be able to automatically update it for you when you upgrade to newer versions of the IPS Community Suite. We always suggest you try and avoid editing templates directly, for this reason.
     
    Using page-specific selectors - the right way
    There's a better way - every page in IPS4 includes some special attributes on the body tag that identify the app, module and controller being viewed. You can use these to write a CSS selector to only target pages that match the ones you want. Going back to our example, we could target .ipsPageHeader in topic view like so:
    body[data-pageapp="forums"][data-pagemodule="forums"][data-pagecontroller="topic"] .ipsPageHeader { ...your styles } This works because topic view is generated by the topic controller, in the forums module, in the forums app. All pages in the IPS Community Suite follow this controller/module/application structure.
    You can mix and match these. If you want to style all page headers in the forums app only, you could simplify the above to:
    body[data-pageapp="forums"] .ipsPageHeader { ...your styles } You can find out the right values to use by going to the page you want to target, viewing the source in a tool like Web Inspector, and finding the body tag - look for the special data-page* attributes that are used for that page.
    By including these styles in your custom.css file in your theme, you can target specific elements on specific pages, without making it difficult to upgrade your community later.
  4. Like
    The Old Man reacted to Marc Stridgen for a guide, Internal Advertising   
    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 example below, you will see you can chose to enter separate HTML code to appear on secure pages.
     

     
    Once you have added your image or advertisement code, you can then choose the location and permissions for your advert to be shown. You can select more than one location for an ad to show and criteria for when and how long to show the ad.
    When using Google Adsense adverts you may notice that page navigation no longer works as expected. This is caused by Google requiring that adverts are not loaded using AJAX. To resolve this issue you can disable AJAX pagination using the built in theme settings.

    Ajax Pagination
    Should you wish to disable an advert at any time, you can do this by clicking the "Enabled" text in the list, which will then change to "Disabled"

    Disable/Enable
    Manual Ad Placement
    You can put advertisements in several pre-defined locations but it is also possible to create additional locations which you can insert by modifying the HTML code for your community or use in the Pages application.
    First, create your advertisement as normal. For the "Show the advertisement" setting, select "Define your own location" and enter a key into the box (it can be whatever you like). You can then later use the same key for other advertisements that you want to show in this location.
    Now you will need to insert a special tag in the HTML code where you want the advertisement to show. The code to insert is:
    {advertisement="KEY"} Replace "KEY" with whatever key you used.
    In your theme
    Go to Themes and click the "Edit HTML and CSS" button for your default theme. The specific template you need to edit and where to make the change depends on where you want the advertisement to show. For this example, if you wanted the advertisement to show in the profile under the header, go to the core -> front -> profile -> profileHeader template and insert the code at the very bottom.
    Since each theme has its own HTML templates, you will now need to repeat this for each theme.
    In pages or blocks
    The tag can be inserted in a page, block or template within the Pages application. Simply insert the tag wherever you want the advertisement to show.
    Control when Ads Show
    Using the responsive CSS classes available in IPS4, it is possible to set your ads up so that different content displays depending on the device size.
    This only applies to ads you create yourself. If you use an ad service (such as Google Adsense), you should find out how that service supports responsive ads.
    For example:
    <div class='ipsResponsive_showDesktop ipsResponsive_showTablet ipsResponsive_block'> This ad shows on desktop and tablets, but *not* phones </div> <div class='ipsResponsive_showPhone ipsResponsive_block'> This ad shows on phones, but *not* desktop and tablets </div> Ads in email
    Introducts in version 4.4 of the Invision Community platform, is the ability to show your ads within your community emails, as well as on your site. Within the same email section, you will see an Email Advertisements tab, where you can ad advertisements which will only show within emails.
    Ads within Emails can be restricted to only show within specific email types. As you can see in the image below, I have changed this ad only to be sent when the email is from a Topic, such as a topic reply notification.

    Email Ads
     
     
     
     
     
  5. Like
    The Old Man reacted to Rhett for a guide, 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 your configuration)
     
    Then log into the AdminCP > Support > 'Clear System Caches'. This clears out your cache, and will allow all items to then be linked from HTTPS. 

    Running the support tool
    Please also keep in mind that all advertisements or any code you may have added to the site or theme must be served from https or the cert will show an error for your users. 
     
     
  6. Like
    The Old Man reacted to Mark for a guide, 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 already have a project if you have previously integrated Google login on your community. If you do not have project, click the dropdown and create one.


      Select "Enable API's and Services" in the top left of the screen


      Click the "Google Maps JavaScript API" link and then click the "Enable" button.

     
      Click "Credentials" from the left menu, and select "Create Credentials". Choose the API Key option.



      You will be presented with an API key. Please keep hold of this key for the next step.

    On your community, to AdminCP > System > Community Enhancements > Google Maps. Here you need to select which items you wish to use. Here we have selected "Show Google Maps?"



    Important: You will see it then shows at the bottom which APIs you need to enable within 'Enable API's and Services' in your Google Developer Console. We just enabled one already in the previous steps, however you will need to enable any others showing. These will be different, depending on your selections
      Click on Continue, and in the API key given above here, then follow the instructions given on this page to restrict your API key, and create another secret key.

     
     
     
×
×
  • Create New...