Jump to content

Community

ehren.

+Clients
  • Content Count

    3,038
  • Joined

  • Last visited

  • Days Won

    13

 Content Type 

Profiles

Downloads

IPS4 Documentation

IPS4 Providers

Release Notes

IPS4 Guides

IPS4 Developer Documentation

Invision Community Blog

Forums

Posts posted by ehren.


  1. Hi @GTAPoliceMods

    There's a tutorial teaching you how to edit the background on the ipsfocus website. I've copy/pasted it here for you which should hopefully help you custimize your background 🙂

    ============

    Due to Chameleons blur and gradient effects, the process for adding backgrounds requires an extra step compared to other themes.

    -----

    This tutorial assumes I have uploaded an image under the "Background Picker" tab, in the "Image 2" slot. The image is 1600px in width and 1667px in height. These 3 values are necessary for this tutorial.

    Once you have uploaded your image, return to your theme list and press "Edit HTML and CSS". Choose the CSS tab, and open custom.css. This file will be pre-filled with background image sizes. Since we uploaded the image to "Image 2", all of our classes will be prefixed with .ipsfocus_bg2

    If you have disabled the background picker, replace .ipsfocus_bgx with .ipsApp

    -----

    To scale the image so it occupies 100% browser width (this is the default setting), use the following but replace 1600 and 1667 with your own image dimensions.

    {{if theme.picker_i2}}
    	
    	.ipsfocus_bg2 .background,
    	.ipsfocus_bg2 .box-blur{
    		background-size: auto calc(1667 / 1600 * 100vw);
    	}
    	.ipsfocus_bg2 .box-blur-image{
    		max-height: calc(1667 / 1600 * 100vw);
    	}
    	
    {{endif}}

     

    You can stop the tutorial at this stage if you just needed to change the image dimensions. The rest of the tutorial will explain how to customize the background further, however it's not necessary to follow any more steps.

     

    To use a fixed image height, use this code instead and replace 1400px with any pixel value - it doesn't need to match the actual height of the image which you uploaded. Any value will work.

    {{if theme.picker_i2}}
    	
    	.ipsfocus_bg2 .background,
    	.ipsfocus_bg2 .box-blur{
    		background-size: auto 1400px;
    	}
    	.ipsfocus_bg2 .box-blur-image{
    		max-height: 1400px;
    	}
    	
    {{endif}}

     

     

    To remove the gradient which is used to fade your image into a hex colour, add the following to the end of custom.css

    .ipsfocus_bg2 .background:before,
    .ipsfocus_bg2 .box-blur:after{
        display: none;
    }

     

     

    To use a fixed image when the page is scrolled, add the following to the end of custom.css. Due to the CPU power required, the blur effect (in browsers which don't support backdrop-filter) is removed when background images are changed to 'fixed'.

    .ipsfocus_bg2 .background{
        position: fixed;
    }
        .ipsfocus_bg2 .box-blur{
    	    display: none;
        }

     

     

    To remove the pattern overlay, add this to the end of custom.css

    .ipsfocus_bg2 .background:after{
        display: none;
    }

     

     

    If you want to use a repeating pattern instead of a large background image, add this to the end of custom.css. The 500px value is the height of the pattern which you uploaded:

    .ipsfocus_bg2 .background,
    .ipsfocus_bg2 .box-blur-image:before{
    	background-repeat: repeat;
    	background-size: auto 500px;
    }
    
    .ipsfocus_bg2 .box-blur-image{
    	max-height: none;
    }
        
        /* Remove gradient and overlay for patterns */
        .ipsfocus_bg2 .background:before,
        .ipsfocus_bg2 .background:after,
        .ipsfocus_bg2 .box-blur:after{
    	    display: none;
        }

     


  2. I don't think the .ipsMenu and .ipsDataList classes were ever intended to be used on the one element like that (one creates menus, the other creates tables for data).. but this code will fix it in my themes 🙂

    .ipsMenu[id^="elPFDrop_"]{
      width: 300px;
    }
    
    .ipsMenu[id^="elPFDrop_"] .ipsDataItem{
      width: 100%;
      display: block;
    }

     


  3. 9 hours ago, AnonymousDev said:

    Hey there, Just wondering how to download the latest update? I have paid renewal in June but it looks like I have to pay full price again. Is this correct or am I looking for the file in the wrong place?

    Thanks 🙂

    Hi there,

    I've just checked the purchase list and your username isn't listed. If you believe you've purchased this theme and renewed it in June, I'd suggest contacting the Marketplace moderators so they can look into this for you. 

    If you are an active customer, you'll be able to download all of my updates for free 🙂 


  4. Hello,

    I guess this is just a friendly feedback topic for the benefit of my own customers, which I'm submitting in an attempt to improve IPS Support Ticket responses.

    As a theme developer, customers quite often contact me with bug reports after IPS Support have told them the issue is caused by their 3rd party theme. After quickly checking the issue for myself and noticing the issue also happens with the Default IPS theme, I'm required to redirect the customer back to the IPS ticket system so the Support Staff can investigate further. This isn't a burden for myself, but I can understand the frustration from customers who are bounced between two support desks without a solution.

    If Support Staff could make a conscious effort to always check the Default theme before referring customers to 3rd party developers for a solution, I'm sure my customers would be greatly appreciative of the improved support times. :smile:


  5. Is the css framework outdated? Yes, absolutely. As mentioned by Charles above, it was coded 4 years ago which is ancient in terms of web coding practices, especially front-end. 

    Floats are used to align content (and some areas even fail to clear the floats), grid containers are structured with javascript, absolute positioning is used to position the user bar, dozens of classes assign various colours and font-sizes (in px) to text, and countless hard-coded hex values are scattered throughout the css. I've made sure my theme framework has kept up with modern trends (by using flexbox and grid) to fix many of these issues, so even though the default IPS framework is outdated, it's absolutely possible to modernize it a little. But I imagine a complete re-write of the HTML, css and theme system would be priority for v5.

    Is a 3rd party framework like Bootstrap the solution? No - and I think plenty of people have already expressed their views as to why. Bloated files, excess classes which are never used, non-prefixed classes (such as .ips), and the pressure to keep the software compatible with the latest Bootstrap version are just a handful of reasons. IPS needs to create a clean, versatile and modern style for version 5 if communities are going to survive in the future, and I don't think a Bootstrap copy/paste layout is going to achieve that.


  6. 2 hours ago, Adriano Faria said:

    Sorry, the default theme is the only one supported, otherwise I would have to release a version for each theme out there, which is totally impracticable.

    I'm struggling to understand why that would be necessary - that's not true at all. Wrapping the content with .ipsBox or .ipsBox_alt would increase compatibility to all themes. As it currently stands, your app technically isn't compatible with the default IPS theme, since changing the background colour of your site (to #333 for example) will make your app unreadable. Surely you'd support a customer if they changed the background colour of their site - this is essentially the same situation, and certainly isn't a 3rd party theme issue.

    IPS failed to wrap content in 4.2, however they acknowledged it in the above topic (as did many other customers) and they fixed it in 4.3. Following their lead would be a smart idea for developers if they wish to maintain compatibility across themes. ?


  7. Hello,

    Due to the absence of a bug tracker, I figured the feedback area was appropriate.

    I've been using the 4.x theme system ever since the 4.x beta's and have come across bugs that are seemingly fixed in one version, but broken a few updates later. After working with xenforo's theme system recently and failing to come across a single bug, I figured I'd report on issues with the IPS system so it can be brought inline with xenforo's success.

    My theme setup is a standard Parent/Child setup. I have one main parent theme which includes all of my standard code found throughout my themes. I then create child themes which inherit all of the customized code, and occasionally have their own modified globalTemplate file and "theme.css" file, which is a custom css file. All other files remain untouched, which means I simply need to edit the Parent theme and all child themes inherit the updated code automatically.

     

    Inherited template files:

    The first bug I've found is related to unmodified template files in a Child theme, as shown in the following screenshot. All template files are untouched except for globalTemplate, however the icons indicate that numerous template files have been modified instead of inherited. Opening these "modified" files shows a revert button. Once clicked, it reverts the Parent file back to the default IPS code, which certainly isn't the expected result. Clicking the revert button (which technically shouldn't even be shown since the file is inherited) should revert the template file in the Child theme, so it matches its Parent. Put simply, from my understanding, those red icons should be green.

    1437576885_ScreenShot2018-04-29at11_52_07am.thumb.png.2df8497a0fb07516a2f6fb1651b7ee9b.png

     

    Upload new version:

    Another issue which is constantly reported by my customers is the "Upload new version" feature. I have recently tried this myself and also came across the same issues as my customers. From what I understand, this feature should replace the currently installed theme with the freshly installed version, while retaining theme settings and any code inside custom.css. All other files (including custom HTML or custom css files) should be replaced with the new code. Reports from my customers indicate that some template files aren't replaced, which results in a broken theme and means a fresh theme install is the only solution. This is quite frustrating for my customers since they must reapply all of their old settings (colours, logos, etc), and their members need to reselect the theme from the bottom Theme menu if they've modified their choice in the past.

    My experience of this issue happened a few moments ago, however it varies slightly to my customers. I was working on two forums:

    1. Site A has my Parent theme installed.
    2. Site B also has an identical version of the Parent theme, but it also contains a Child theme. The Child theme has a modified globalTemplate file and a modified theme.css file. For the sake of this example, lets assume I have removed the logo from globalTemplate, and I have added a red background to the site using theme.css
    3. I then edited one HTML file in the Parent theme on Site A. I wanted to transfer those changes to Site B, so I exported the theme from A and used the "Upload new version" feature on B.
    4. The Parent theme on B was replaced successfully (as expected). I then checked the Child theme. The globalTemplate file had correctly retained it's modifications (the logo was still removed - all good), however the theme.css file had been reverted back to the Parent theme.css file which means I had lost all of my previous (red background) customizations. Referring to my example from above: instead of having a Child theme with no logo and a red background, I now have a Child theme with no logo and a white background because my theme.css file was reverted after installing the updated Parent theme.

    That may sound a little confusing to read but if you break it down step by step, it should be easy enough to understand. There seems to be a few issues with Parent/Child relationships and these issues may all be related in one way or another.

     

    Designers Mode:

    The requirement of enabling Designers Mode to create new theme settings is something which is unfortunately no longer a friendly option for me. My demo board had well over 100 themes at one stage, which means that enabling and disabling DM could potentially take hours, especially when all official IPS addons are installed. This means that even though I'd love to create new theme settings for my customers, it's no longer ideal due to the extremely time consuming nature. Contrary with xenforo, I simply enable their DM with one line of code and a "New setting" button appears in the ACP. If I add a new setting to the Parent theme, every Child theme also inherits the new setting. No template rebuilding is necessary, no time consuming processes, just a very easy way to add new settings - as it should be. Removing the line turns off DM, and everything is back to normal.

     

    Export Child theme:

    One final thought is the lack of an "Export child theme" option. IPB 3.x had this feature which was extremely helpful when managing a large amount of themes. Xenforo has this in both 1.x and 2.x, yet it has been removed ever since the initial 4.0 release for some reason. This means that once a Child theme is exported from a site, it can never be used as a Child theme again since it essentially becomes a Parent theme.

     

    If any of the IPS developers have any questions, or if I've incorrectly reported something, please let me know. The IPS theme system has silently struggled with these issues for a while and these small fixes would be a good start in helping to push the theme system back on its feet.


  8. On 4/24/2018 at 7:58 AM, liquidfractal said:

    Could you provide a brief code example of how one might do this in a theme's custom.css?

    .ipsBox_alt{
    	background-color: {hextorgb="area_background_reset" opacity="1"};
    	border: 1px solid #e0e0e0;
    	box-shadow: 0px 1px 0px rgba(0,0,0,0.1);
    	border-radius: 3px;
    	padding: 15px;
    }

     


  9. 3 hours ago, pndemc said:

    Hey @ehren. ,

    I just wanted to check if you have any sort of ETA for the 4.3 updates and if you're already working on them. I know 4.3 is still in beta, but I'd love to be able to upgrade ASAP but that won't be possible as the search functionality is broken on the theme.

    Thank you for any updates. Love your work!

    Hello,

    The 4.3 updates will be started once 4.3.0 Final is released. My themes have never supported beta versions, sorry about that!

    I'll aim to have the themes updated within the first week of 4.3.0 though :)


  10. 2 hours ago, Rikki said:

    I can't guarantee we'll continue to use the individual boxed design approach in future (major) releases.

    IPS certainly doesn't need to use a boxed design (just keep the classes blank in the css), but having the HTML structure for sites which require boxed layouts is a necessity. A major competitor does that with their software and when it comes to creating forum themes, it's potentially the best on the market.

    IPS Suite has advantages with a large feature list and official addons, but the theme system is slowly starting to fall behind, and limiting the HTML in future major updates certainly wouldn't help that. I understand that's potentially years away, but figured I'd add my two cents regardless.


  11. 4 hours ago, Mark said:

    In our guide for upgrading themes to 4.2 there is a section about this change called "No content background color by default" - does adding a background as specified there (which will take you back to a similar approach as used for 4.1) help?

    The issue existed in 4.1 and likely 4.0 too, it's not unique to 4.2. The guide which you linked to isn't related to the issue's we've mentioned, so adding a background colour to the entire site wrapper isn't the solution we're after unfortunately.

    We don't need the entire #ipsLayout_contentWrapper area styled, we need the individual content areas correctly wrapped with ipsBox. The HTML structure is correct on most pages, but other pages are broken (shown in all of the screenshots above) since they lack any form of structure. If you need to reproduce this on your own site, simply change the Page Background theme setting to a dark colour such as #3c3c3c and visit any of the affected pages. It'll become quite obvious :)

    Additionally, the headers which are deliberately outside of the ipsBox elements should at least have a class wrapped around them which can give themers the opportunity to easily style them.

×
×
  • Create New...