IPS Staff
  • Content count

  • Joined

  • Last visited

About Rikki

  • Rank
    data-type='member title'
  • Birthday 08/17/1983

Contact Methods

IPS Marketplace

  • Resources Contributor Total file submissions: 3

Profile Information

  • Gender Male
  • Location Lynchburg, VA :o
  1. Analytics pageviews decrease between versions?

    Incidentally, we are considering improving integration with Google Analytics so that we can tell it to register a page view for these kinds of dynamic loading areas, so that may change in future  
  2. Analytics pageviews decrease between versions?

    A reduction in pageviews is to be expected. That's because things that required a full pageview in 3.x are now loaded dynamically in 4.0 - for example, changing pages within a forum, topic or search results, replying to a topic, using the messenger etc. These actions won't count as separate page views in analytic tools in IPS4.
  3. Night Mode/Dark Theme

  4. IPS4 Dark Theme

    Version 1.0.2


    A simple dark variation of the default IPS Community Suite theme. Changes are made entirely with theme settings and in the dark.css custom CSS file, for easy upgrading of your site when we release new versions of the suite. Theme designers are welcome to use this theme as a starting point for their own dark themes. Please note: we do not provide official support for this theme.


  5. Night Mode/Dark Theme

    We may be able to offer an unsupported dark version at some point (I stress may - I can't promise it!). Something that changes with the time of day would be best left to a plugin though  
  6. 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.
  7. 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, we used CKEditor's older iframe mode. What this meant is that the entire text editor existed inside of an iframe on the page (although this was seamless and transparent to users). Since styles of a parent page do not apply to the contents of iframes, the only way to style the editor was to edit the CKEditor skin that we shipped with the product. This meant working outside of the IPS4 theme system, but more importantly it made distributing your changes more difficult because you'd also have to distribute your CKEditor skin. In IPS 4.1 onwards, we use the newer div mode. Instead of using an iframe, the editor is built inside a div element right on the page. This is great news for themers, because it means the CSS styles you create within IPS4 will be inherited by CKEditor automatically. So, to start styling the editor, you can simply open your custom.css file in your theme, and using a tool such as Google Chrome's Web Inspector (or the equivalent in your browser of choice), inspect the HTML that CKEditor generates and use that to develop your styling. When you save your custom.css file, you'll see it applies to the editor too. Above: inspecting CKEditor's generated HTML with Web Inspector allows you to see which CSS styles (right) are being applied to each part of the editor, helping you identify which class names you should be using in your own CSS.   Or build a standalone CKEditor skin If you intend to make more substantial changes to the editor, you may still want to consider developing it as an actual CKEditor skin instead. CKEditor has a very mature skin framework that can be used for advanced changes. Consult the CKEditor for more information on creating a skin. If you go this route, you would export the CKEditor skin, and ship it with your IPS Community Suite theme. When an administrator installs your theme, they can install the CKEditor skin in the AdminCP too.   So, that seems quite straightforward - in almost all cases, simply edit the custom.css file you use in your theme, and you can customize CKEditor to match your theme!   But, there's gotchas... There are exceptions, of course. Even in div-mode, CKEditor still generates some iframes. For example, when you click a dropdown menu in the editor (e.g. Font), CKEditor actually builds an iframe for the menu. This introduces the same problems we discussed above, again! Unfortunately, there is no simple answer here. As before, styles you build into your custom.css file won't apply to these special areas where CKEditor uses an iframe. For many theme designers, this won't be a huge problem - being able to edit the 95% of CKEditor available to custom.css will be sufficient. But if you really do need to style the contents of those iframes, the only option is to do it within CKEditor's own skin system (since it loads those CSS files within its iframe). This isn't too problematic if you're only concerned with styling your own community. The CSS files CKEditor uses can be found in /applications/core/interface/ckeditor/ckeditor/skins/ips (if your theme uses the default CKEditor theme we provide). Edit the editor.css file in this directory to adjust the styles (this is a compressed CSS file, so add your own CSS at the end - don't edit existing CSS in the file!). If you plan to distribute your IPS4 theme, however, and you need to style these areas of CKEditor that still exist in an iframe, you'll need to go back to using CKEditor's skin system, and distributing a CKEditor skin with your theme.
  8. I believe it's no to both of those questions.
  9. The last few releases have included this option in your notification settings:  
  10. You can change where it shows:   
  11. AJAX pagination is still broken

    There is a theme setting you can toggle to disable ajax pagination if you're using Google ads. In your AdminCP, go to Customization -> Themes, click Edit next to your theme, and it's under the Custom tab.
  12. You should be seeing this:  
  13. Images actually opened in a lightbox to begin with when the 4.0 preview came out, and the feedback was overwhelmingly negative - that's why we specifically changed the behavior for phones.
  14. There's no lightbox because a lightbox is not the best way of interacting with large images on mobile. You can't view a 'larger' version in a lightbox like you can on desktop, because the screen is already small - essentially, it'd be showing you the same thumbnail at the same size you see it in the post already. Instead, we link to the actual image where you pinch/zoom/drag effectively to view the image at a larger size. 
  15. Excellent Progress on IPS4 Resources Section

    Thanks for the feedback, and please let us know what you'd like to see (especially regarding Pages, since that app is more about what you do with it than what it can do). We also have some improvements to developer documentation in the works.