-
Posts
388 -
Joined
-
Last visited
-
Days Won
24
Community Answers
-
Ehren's post in ipsGrid was marked as the answer
ipsGrid has moved to a more fluid concept in version 5.
With version 4, you'd typically add ipsGrid and then each child would need to use a ipsGrid_spanx class which told it how many columns to span (out of 12). On tablets and phones, these grids would automatically collapse to 1 column.
That concept was fine a decade ago, but with the limitless amount of devices these days, fluid/dynamic concepts are better.
In version 5, when you assign ipsGrid, all children are automatically assigned to a grid (the span class is now redundant). By default, grids have an ideal column width of 260px, but you can change that by adding a basis class, such as i-basis_350 which will make all columns 350px, or by changing the --i-basis CSS variable for that element. Columns will automatically grow/shrink/add/remove depending on the available space on the screen.
If you need to restrict the grid to a certain amount of columns (lets assume you never want more than 3 columns for some reason), you can add ipsGrid--max-3 to the parent.
If you need to use the old grid system and force content into a 12 column grid (like v4), you can use .ipsSpanGrid on the parent, and then ipsSpanGrid__4 (for example) on the children. But the new fluid code is better 🙂Â
-
Ehren's post in What determines the way the Theme menu opens? was marked as the answer
I believe this happens when the dropdown menu is taller than your viewport (browser window).
I imagine this is done intentionally because browsers can't scroll "above the viewport", they can only scroll below the viewport. Imagine if your theme menu was only 900px from the top of your screen (which could happen on certain pages), but the dropdown menu was 1200px in height. If it opened upwards, the top of the menu wouldn't be clickable since it would go above your screen.
Not really a bug, but this will only happen in situations when your theme menu is really tall, so this is technically working as intended 🙂
-
Ehren's post in [Bug] Sidebar Position was marked as the answer
Hello,
Adding this to custom.css should help. I've only tested it on an unmodified default theme, but it may also work on some 3rd party themes depending on their HTML markup.
/* Ensure widgets are shown below the main content on mobiles */ @media (max-width: 979px){ #ipsLayout_contentWrapper{ display: grid; } #ipsLayout_sidebar{ order: 1; } } Â
-
Ehren's post in Auto space after "Mention" was marked as the answer
Hi @abobader,
That's actually working as intended. It behaves the same as other "mention" features such as those found in iMessage and Facebook. The lack of a space is also ideal for situations where you want to place grammar immediately after the username, such as the comma in the top line of this post, or an apostrophe.
I hope that helps to clarify 🙂
-
Ehren's post in Adding a maximum width for a tooltip was marked as the answer
Thanks @SeNioR-, I'll keep this in mind for a future update! 🙂Â
-
Ehren's post in [Theme Bug] Record List was marked as the answer
Hi @Afrodude
Adding the following to your custom.css file will fix the issue on your site. The code will be included in an upcoming Invision update 🙂
@media screen and (max-width: 979px) { html[dir="ltr"] .ipsDataItem_icon:not( .ipsResponsive_hidePhone ):not( .ipsResponsive_hideTablet ) + .ipsDataItem_main, html[dir="ltr"] .ipsDataItem_icon:not( .ipsResponsive_hidePhone ):not( .ipsResponsive_hideTablet ) + .ipsDataItem_main + .ipsDataItem_stats { margin-right: 2.5em; } html[dir="rtl"] .ipsDataItem_icon:not( .ipsResponsive_hidePhone ):not( .ipsResponsive_hideTablet ) + .ipsDataItem_main, html[dir="rtl"] .ipsDataItem_icon:not( .ipsResponsive_hidePhone ):not( .ipsResponsive_hideTablet ) + .ipsDataItem_main + .ipsDataItem_stats { margin-left: 2.5em; } .ipsDataItem_stats { white-space: normal; } } Â
-
Ehren's post in Font Awesome Badges Icon was marked as the answer
Thanks @SeNioR-
A large UI sweep will be done in the future and will address things like this. I've been keeping note of small bugs like this one and I've been adding them to my todo list, so feel free to continue reporting things if you notice them 🙂
-
Ehren's post in Minor CSS bug was marked as the answer
Thanks @opentype
Despite an easy solution (changing the overflow), it's a bit of a tough bug to fix because buttons are currently designed to have truncated text if they're too wide for their parent.
I'll potentially change this in a future version since it's not really ideal to truncate a button/CTA, but I'll fix this issue in the next update with the following code since it's less likely to break existing button layouts:
.ipsButton:has(.ipsNotificationCount){ overflow: visible; } Â
-
Ehren's post in Why extra link in dropdown navigation menu? was marked as the answer
Thanks for the report! This has been fixed on this site and will be patched in the next update.
In the mean time, you can fix it on your own sites by adding this to your custom.css file:
/* Hide duplicate links in mobile navigation panel */ #elMobileDrawer .ipsDrawer_subMenu a[href=""]{ display: none; } Â
-
Ehren's post in Message icon obscured by "close" X. was marked as the answer
Hello,
This code, inside your custom.css file, is causing it:
#elMobileDrawer a.ipsDrawer_close { right:0px; left:auto; top:-4px; } It looks like there are other issues going on since there's a box-shadow around the username, not to mention the bad alignment. I'd probably go through your custom.css file to check if all of the code in there is necessary. Your core > front > global > mobileNavigation template file may also be modified, which means it wouldn't have been upgraded correctly.
For your reference, the user panel is meant to look like this:
Â
-
Ehren's post in Change default font-family was marked as the answer
Your site is currently using this code:
@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap" rel="stylesheet'); body { font-family: Creepster, cursive; } It needs to be this:
@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap'); body { font-family: Creepster, cursive; } Â
With that said, import statements should only appear at the very top of your css file. Depending on how your theme has been coded, the custom.css file can be appended to other files, which means that your import statement is no longer at the top.
A safer solution would be to use the <link> code. Add this to the <head> area of your theme:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Creepster&display=swap" rel="stylesheet"> Then use this in your css:
body { font-family: 'Creepster', cursive; } Â
-
Ehren's post in Change Checked Default Search Option on Front Page was marked as the answer
Hi @Demonland31
There's no built in setting to control this but if you have access to the HTML of the page, add the following to the top of your existing code. If you used the page builder instead, you'll need to create a JS file and assign it to the page via the page settings.
<script> // Change default search filter document.querySelector(".cSearchFilter__menu [value='all']").checked = true; document.querySelector('.cSearchFilter__text').innerText = document.querySelector('.cSearchFilter__menu input:checked + .cSearchFilter__menuText').innerHTML; </script> Â
-
Ehren's post in Badges issues - please help was marked as the answer
Hello,
The core > global > framework > _vars.css file has been modified in your theme. Reverting that file will fix your issue. 🙂
If you need to modify your CSS, you should add your code to the custom.css file. Editing the core files is not recommended as it can cause issues like this.
-
Ehren's post in [Bug] Resent Status Update was marked as the answer
Thanks @Afrodude - I've added this to our internal bug tracker so we can look into it further 🙂
-
Ehren's post in How can make download file to a link was marked as the answer
Hi @bing11
This setting is actually tucked away slightly.
Visit the "Groups" page in your admin cpanel (admin/?app=core&module=members&controller=groups) and click the Edit (pencil) icon. Under the Downloads tab, you'll see an option named "Can submit URLs?"
Enable that for your group(s) and you're done!
-
Ehren's post in Featured products widget - missing alt & closing p tags was marked as the answer
Thanks for the report @The Old Man
I've just fixed the Featured Products widget. It will be patched for our next release. 🙂
-
Ehren's post in The right way to edit themes was marked as the answer
I typically suggest a Parent/child setup, since it allows you to easily compare your customized theme with an untouched one.
To do this, install a 3rd party theme onto your site. Next, visit the Themes page in your Admin panel, click the "edit/pencil icon" next to the theme and tick "None" under the "Available for" option. This will hide it from your members, which is intentional. This theme is referred to as the Parent theme. You should never edit this theme (no code changes, no setting changes, etc), just keep it untouched.
Next, visit the Themes page again, but this time, use the "Create New" button to create a new theme. Select the "Manual mode" option and click Next. Type in a name for your theme, and in the "Parent" dropdown, select the 3rd party theme which you just installed. Press Save.
Doing this will create a "Child theme" which is basically a clone of your Parent. You can edit the Child by visiting the Themes page, and then expanding the Parent, which will reveal your Child. The benefit with this setup is that you can now edit your Child theme and easily compare it to the Parent by using the "Compare with parent" option (by clicking the cog icon at the top right of the code editor). Also, when reverting the code, it'll revert it back to the Parent code instead of the default Invision code.
When you need to upgrade the theme, you should upgrade the Parent theme. You can then use the "compare tools" to manually upgrade your Child theme - or even revert it back to the "unmodified 3d party code", and then reapply your code changes from there. Whatever's easier.
It's a slightly confusing process to type out and explain, but it's very straightforward once you've tried it yourself - so maybe give it a go!
-
Ehren's post in Twitter card not rendering? was marked as the answer
It took a moment to render for me, but it's working on my end:
Â
-
Ehren's post in Big Blank Area was marked as the answer
Hello,
This is caused by an incorrect suffix on your group name. The prefix is:
<strong><font color="#cc0000"> And the suffix is:
</font><strong> Â
The font tag is deprecated and the strong tag is not closed properly. You should change the prefix to:
<strong style='color:#cc0000'> And change the suffix to:
</strong> Â
-
Ehren's post in Syntax for Custom Theme Setting Condition field was marked as the answer
I experimented with a feature like this with my themes. I only wanted a setting to be displayed if a previous setting was set to a certain value.
What I later realised is that the conditional setting will only be displayed once the existing setting has actually been saved. There isn't any ajax functionality which would make the "Gradient direction" setting appear as soon as "Radial gradient" is selected, which actually results in a pretty poor experience for admins since they won't see the new setting until they've saved the existing page and reloaded it.
In my own themes, I've simply added a description to situations like this which basically says "If Radial Gradient is selected above, this setting will control its direction." I feel like this may also be the best solution in your case.