Jump to content

Community

xtech

Members
  • Content Count

    978
  • Joined

  • Last visited


Reputation Activity

  1. Like
    xtech 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.

     
    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"

     
    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.
    Selling Advertising
    Selling advertisement space to your visitors can easily achieved within Commerce by adding a new product within Products. See the Commerce products article for more information.
    You will be able to set an expiration period for the product as well as the maximum dimensions for any banners which are uploaded when a visitor buys an ad space. This allows you control over the size and period that a banner is shown for. You can see more information on this within our commerce guide.
    Any ad purchases will show up within Advertisements as a pending advertisement. This enables you to ensure that the ads are suitable for your site before showing them. You can also add an email to your created product to notify you of any new purchases, should you wish to be notified of these immediately.
    When a clicks to purchase advertising space, they will be prompted to upload their advertisement image to be used, along with the URL this will lead to.

    Purchasing ads
    Optionally, the user can select to upload smaller versions of the advertisement image. These would then be used for devices such as tablets and mobile devices

    Tablet and Mobile Ads
    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
    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.
  2. Like
    xtech reacted to Rikki for a guide, Creating a theme with the Easy Editor   
    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 (required)
    As it will appear to users of your site Parent
    You can make this theme a child of another, meaning it will automatically inherit any style/template changes from the parent theme Default theme
    Makes this theme the default for guests and members who have not specifically chosen another theme Available for
    Sets permissions for which groups can use this theme. Example use: a theme that only 'premium' users can access as an added benefit of paying Click Save once you have filled in the information. Your theme will be created and you'll be returned to the theme listing.
     
    Launching the Easy Mode editor
    From the theme listing in the AdminCP, you can click the magic wand icon on any Easy Mode theme to launch the visual editor (you will need to be logged into the front-end of your community to use the visual editor):

    Note: You can launch the visual editor at any time, even long after you've created the theme. However, if you convert an Easy Mode theme to a normal theme, you can't go back and use the visual editor.
    Launching the visual editor will take you to your community in editing mode (that only you can see). Your community will be shown on the left, with editing tools available in a panel on the right:

     
    The visual editor has a few key functions to help you design your theme. We'll cover each in turn.
     
    1. Colorize
    This tool lets you instantly change all of the theme colors to different shades of another color. Click the Colorize button, and you'll see four swatches:

    Clicking a swatch and choosing a new color will immediately update the live preview to show you the result.

    The colorize tool is great as a first step - if you know you want a red theme (for example), you can use it to get the basics done, and then fine-tune the resulting colors later using the other tools.
    If you don't like the result, you can click the Revert Colorizer button to undo your changes.
     
    2. Select tool
    The Select tool allows you to point-and-click at sections of pages on your community, and the visual editor will automatically show you the color editor for the closest available parts.

     
    3. Custom CSS
    If you are familiar with CSS, the Easy Mode editor gives you the ability to add custom CSS to your theme without needing to convert it to a full manual theme. Simply click the CSS button, and a code editor will be shown for you to use. And yes, you still get the live preview!
     
    4. Style editor
    The available styles you can edit are listed in the main panel. Click one to see the color swatches and to edit the colors. Some styles allow you to edit just the background, others will also allow you to edit the font color.

    Background colors can also be turned into gradients by clicking the    button. To use it, you choose a direction in which the gradient should go, and then add colors to form the gradient.

     
    5. Build
    The Build tab is where you'll go once you're happy with your changes and want to save them. Click the Save Theme button to do so. This will save your changes and make them live to any users who have chosen this theme.
     
     
×
×
  • Create New...