Invision Community 5: A video walkthrough creating a custom theme and homepage By Matt Thursday at 04:02 PM
marklcfc Posted July 3 Posted July 3 I read that I wouldn't be able to edit templates. Are they still viewable? Currently for adverts, I have to alter the body class line in globaltemplate, how would I achieve this? There are also certain scripts I have to add to this template. I've also made various other minor changes but for display reasons, like changing the padding to padding-half that kind of thing. Can I no longer do this? 🤔
Marc Posted July 3 Posted July 3 You wouldn't be able to view them, no. You would likely be using template hooks for some of these. Some items you need to find different ways of achieving the same things, such as overriding CSS elements.
marklcfc Posted July 3 Author Posted July 3 (edited) 21 minutes ago, Marc Stridgen said: You wouldn't be able to view them, no. You would likely be using template hooks for some of these. Some items you need to find different ways of achieving the same things, such as overriding CSS elements. That doesn't help for adverts where I need to add some info to the start of body class line so it can display certain adverts to logged in and more to guests or in the supporters case, none. This is what I'm doing currently at the start of body to determain if a member is logged in or not. If you remove things there needs to be alternative way to do it. <body class='{{if \IPS\Member::loggedIn()->member_id }}logged-in {{endif}}{{if \in_array( \IPS\Member::loggedIn()->member_group_id, array(9,32) ) }}supporter {{endif}} Edited July 3 by marklcfc
Daniel F Posted July 3 Posted July 3 3 minutes ago, marklcfc said: That doesn't help for the adverts where I need to change the body class so it can display certain adverts to logged in and guests. This is what I'm doing currently at the start of body <body class='{{if \IPS\Member::loggedIn()->member_id }}logged-in {{endif}}{{if \in_array( \IPS\Member::loggedIn()->member_group_id, array(9,32) ) }}supporter {{endif}} This would still be possible out of the box with an own app and extension ti customize the output.
marklcfc Posted July 3 Author Posted July 3 How would I know what to use when the templates are not viewable
Jim M Posted July 3 Posted July 3 35 minutes ago, marklcfc said: How would I know what to use when the templates are not viewable You will want to read through the blog below for full details:
marklcfc Posted July 3 Author Posted July 3 (edited) I have done, but it doesn't tell me everything. How do I find out the code to use for logged in / or in member groups # if I can't view the templates, or is it the same as I posted earlier? Edited July 3 by marklcfc
Jim M Posted July 3 Posted July 3 1 minute ago, marklcfc said: I have done, but it doesn't tell me everything. How do I find out the code to use for logged in / or in member groups # if I can't view the templates, or is it the same as I posted earlier? You would use Designer Mode in order to manage that. Also, in the hook manager, you can review the template in question you are selecting to modify.
Ehren Posted July 3 Posted July 3 Attributes for "logged in" and "member group ID" are already available by default in v5 on the <html> element: data-ips-member='1234' data-ips-member-group='4' Editing templates just to change "padding" to "padding-half" is a poor decision in terms of maintenance. Using CSS to overwrite those areas is much more future-proof. Version 5 has more helpful selectors in the code, so you'll be able to target elements much easier compared to v4. SoloInter 1
marklcfc Posted July 3 Author Posted July 3 (edited) 12 minutes ago, Ehren said: Attributes for "logged in" and "member group ID" are already available by default in v5 on the <html> element: data-ips-member='1234' data-ips-member-group='4' Editing templates just to change "padding" to "padding-half" is a poor decision in terms of maintenance. Using CSS to overwrite those areas is much more future-proof. Version 5 has more helpful selectors in the code, so you'll be able to target elements much easier compared to v4. Thanks, hopefully it will be easier to achieve. Will I be able to edit the body class as I showed earlier or is this just allowing new lines of code to be placed somewhere? The padding was an example, I have also edited templates to hide things on phone that are not hidden by default, and make the topic title/follow / forum title area the same as it was in earlier versions, meaning less bulk to have to scroll past on mobiles. I couldn't do that with just css, but I'm no expert. Edited July 3 by marklcfc
Ehren Posted July 3 Posted July 3 Out of curiosity, what requirements are you trying to fill by adding classes to the body element? Hiding elements on mobiles is very easily achieved by CSS and doesn't require template modifications. You could potentially shuffle the page header elements with CSS (grid or flexbox), but v5 will aim to have more consistent component designs across the suite, so this will hopefully no longer be an issue for you.
marklcfc Posted July 3 Author Posted July 3 (edited) I use this code as the ad company need to know who is logged in and sees 2 adverts in topics, who is a supporter and sees no adverts, and who is a guest (sees 4 adverts in topics plus a footer ad). <body class='{{if \IPS\Member::loggedIn()->member_id }}logged-in {{endif}}{{if \in_array( \IPS\Member::loggedIn()->member_group_id, array(9,32) ) }}supporter {{endif}} So I am logged in on my site, the body will look like this If I am a supporter (this is for those who donate to the site), then it will say logged-in supporter If I am a guest, logged-in doesn't show and it shows what it normally would. But now the ad company knows to show more adverts to whoever is a guest. This was the easiest solution we came up with Edited July 3 by marklcfc
Ehren Posted July 3 Posted July 3 Yes, but that use-case was already addressed in my earlier post 😅 Version 5 outputs that information as data-ips-member and data-ips-member-group attributes. If the visitor is a guest, data-ips-guest is used instead. With all of that said, you should really be using the Advertisements feature to show ads conditionally to user groups. Manually hard-coding them into themes isn't very future-proof, and you don't get easy access to conditional settings such as "Show in certain locations" or "Show to certain user groups" or "Hide after certain date", etc.
marklcfc Posted July 3 Author Posted July 3 (edited) I can't use the Advertisements feature as its too limited. It won't let me add 4 adverts to topics for instance, just one after the first post. 13 minutes ago, Ehren said: Yes, but that use-case was already addressed in my earlier post 😅 Version 5 outputs that information as data-ips-member and data-ips-member-group attributes. If the visitor is a guest, data-ips-guest is used instead. I know that now but I'd need to get something on the source code so ad network can use it to determain how many adverts to display if its for someone logged in or not, I do that now through the body class line, and wondering how I'd achieve it in the next version. Then this is all achieved through one script that is also placed into globaltemplate though from the ad network Edited July 3 by marklcfc
Esther E. Posted July 4 Posted July 4 13 hours ago, marklcfc said: I can't use the Advertisements feature as its too limited. It won't let me add 4 adverts to topics for instance, just one after the first post. It no longer works this way in v5. Marc and SeNioR- 2
Fast Lane! Posted July 5 Posted July 5 Some things we do in our custom template edits (not sure if all can be done without edits in IPB 5?): Fully different Pages templates which are different, for different db/page apps Custom templates which are inserted into Head to keep things organized (ex: Prepid config, Google Admanager ad unit config settings... really long list, other overrides). Some apply to specific areas of the site only and can't show otherwise. Ex: {{if preg_match("/forums\/forum/", $_SERVER['REQUEST_URI'])}} remove mark site read in breakcrumb Insert custom menu items ONLY in the mobile menu (not desktop) Remove social links and inset fully customized footer Various scripts and items placed in Header Replace native search (and place in nav bar) on desktop with Google custom search box Replace forum/topic dots with custom images we have (read, unread, etc.) Hide post counts in forums from being viewable Remove ads from specific forums (Google policy they can't be on Off Topic areas.... rick getting banned)... this like: {{if $category->_id == 139 && !in_array(member.member_group_id,array(24))}} Add non-IPB custom fields to profiles inn topics Have ads shown to guests in some areas (but not members). Ex: {{if member.member_id == 0}} Show ads after XX post, but only if the member has more than YY posts and only if the current page has ZZ posts. Ex: {{if (!member.member_id || (member.member_id && member.member_posts < 1000)) && ($postCount % 15 == 8) && ($topic->posts - $postCount >= 9)}} Many custom ads inserted into locations This was just a quick skim on our end. FYI, having to create custom hooks for all of this (that was a minor edit now) will take considerable additional effort. What's the value add (just support time debugging people's themes...)? Today support just says revert custom edits as they don't support debugging that. SeNioR- 1
Jim M Posted July 5 Posted July 5 Keep in mind that Pages templates are separate from Theme templates. Theme templates are what are being discussed here. A lot of what you mention there will be doable with CSS or the theme template hook system. Some of it will be available via the native software and not require adaptation.
Fast Lane! Posted July 6 Posted July 6 8 hours ago, Jim M said: Keep in mind that Pages templates are separate from Theme templates. Theme templates are what are being discussed here. A lot of what you mention there will be doable with CSS or the theme template hook system. Some of it will be available via the native software and not require adaptation. Good to know Page templates are still available to customize (it sounds like). How complex is the upcoming 'template hook system'? I've maintained the above custom theme edits with minimal effort over the years but have no experience with creating hooks (assume it will take longer?).
Jim M Posted July 6 Posted July 6 8 hours ago, Fast Lane! said: Good to know Page templates are still available to customize (it sounds like). How complex is the upcoming 'template hook system'? I've maintained the above custom theme edits with minimal effort over the years but have no experience with creating hooks (assume it will take longer?). I would advise reading the blog mentioned above as it details the process 🙂
Management Matt Posted July 8 Management Posted July 8 Fully different Pages templates which are different, for different db/page apps Pages retains templates, so no problem there. Custom templates which are inserted into Head to keep things organized (ex: Prepid config, Google Admanager ad unit config settings... really long list, other overrides). Some apply to specific areas of the site only and can't show otherwise. Ex: {{if preg_match("/forums\/forum/", $_SERVER['REQUEST_URI'])}} remove mark site read in breakcrumb You can do this via CSS. Insert custom menu items ONLY in the mobile menu (not desktop) The menu is the menu in v5, what do you need adding into the menu for small devices? Remove social links and inset fully customized footer CSS and custom template hooks Replace native search (and place in nav bar) on desktop with Google custom search box Either JS, or CSS and custom template hooks. Replace forum/topic dots with custom images we have (read, unread, etc.) Hide post counts in forums from being viewable Doable via CSS. Remove ads from specific forums (Google policy they can't be on Off Topic areas.... rick getting banned)... this like: {{if $category->_id == 139 && !in_array(member.member_group_id,array(24))}} What pages cannot accept ads? (Not a challenge, just curious). We also have this setting. Add non-IPB custom fields to profiles inn topics Would need to be a custom app, but possibly doable. Have ads shown to guests in some areas (but not members). Ex: {{if member.member_id == 0}} Already possible . Show ads after XX post, but only if the member has more than YY posts and only if the current page has ZZ posts. Ex: {{if (!member.member_id || (member.member_id && member.member_posts < 1000)) && ($postCount % 15 == 😎 && ($topic->posts - $postCount >= 9)}} Seems quite precise, what is your use-case for this? Many custom ads inserted into locations Custom template hooks are likely the answer. Jim M and TDBF 2
marklcfc Posted July 8 Author Posted July 8 What about the two if codes I want to place in the body line?
Jim M Posted July 8 Posted July 8 8 minutes ago, marklcfc said: What about the two if codes I want to place in the body line? As you are simply adding a class to an element: you could use JavaScript to add what you need or create a new div container after the body tag which closes before the end body tag. Modifying an existing element would not really be possible any more straight up in the theme, however, you could indeed create a custom application to perform this.
Esther E. Posted July 9 Posted July 9 14 hours ago, Matt said: Insert custom menu items ONLY in the mobile menu (not desktop) The menu is the menu in v5, what do you need adding into the menu for small devices? You can insert mobile menu items using a UserMenu extension. 14 hours ago, Matt said: Remove social links and inset fully customized footer CSS and custom template hooks The new Block Manager has a "global footer" area for this purpose. 14 hours ago, Matt said: Show ads after XX post, but only if the member has more than YY posts and only if the current page has ZZ posts. Ex: {{if (!member.member_id || (member.member_id && member.member_posts < 1000)) && ($postCount % 15 == 😎 && ($topic->posts - $postCount >= 9)}} Seems quite precise, what is your use-case for this? Many custom ads inserted into locations Custom template hooks are likely the answer. The Advertisements in v5 are much more flexible than in v4. You can show an ad in specific components (e.g. in Forums but not in Blogs). You can also show an ad after post X or every X posts. In addition, you can now create a Pages block to show an advertisement, so you can drop that anywhere. Anything further would use template hooks, as Matt said. 9 hours ago, marklcfc said: What about the two if codes I want to place in the body line? Without knowing how the ad script works, it's hard to say. This seems like something that was designed specifically for your site(?), in which case you could probably adjust it to work with the attributes, as Ehren mentioned. Regardless, I'm 99% certain there is a clean way to handle this, but again... without knowing exactly how the script works, it's hard to say.
Como Posted October 10 Posted October 10 On 7/9/2024 at 5:23 AM, Esther E. said: You can insert mobile menu items using a UserMenu extension. Is this a thing? Or a suggestion? Because a menu-item shortener/changer in mobile view would be helpful.
Daniel F Posted October 10 Posted October 10 8 minutes ago, Como said: Is this a thing? It's a "feature" for 3rd party developers Como 1
Recommended Posts