Ehren

Hi Geoffro,

If you're able to elaborate on what sort of support you need (theme related, developer related, general questions, etc), you may receive some more helpful replies since "tech savvy" is a fairly broad label. For example, what's a typical issue or question you've had recently which you needed help for?

I'm in Australia and I'm sure many others are too, but we typically have our own set of skills. If there's any theme related issues you're having, I'll be happy to help, but otherwise posting on these forums should typically get you a response if someone else knows the answer 🙂

Hello,

It's a little difficult to provide a solution without seeing the live example, but something like this would work with the default HTML code:

@media (min-width: 980px){
	body{
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	body > *{
		flex: 0 0 auto;
	}

	#ipsLayout_body{
		flex: 1 1 auto;
	}
}

It hasn't been thoroughly tested though, so make sure to play around with it for a while to ensure there are no issues 🙂

Hello,

It depends what solution you're after. If you only have 2 forums in a grid layout, there will likely be a few empty cells after those. To make the cells occupy the entire width, add this to custom.css

.ipsForumGrid {
	grid-template-columns: repeat(auto-fit, minmax(var(--ipsForumGrid--width), 1fr));
}

If you have multiple rows of forums (say 3 on one row and 2 on another), the above code will still leave an empty cell on the right side of the bottom row. To fix this (so the bottom cells occupy the entire row), you'd need to recode the grid using flexbox.

9 hours ago, kmk said:

Hi @Ehren, is possible use css to hide +Create (+ in mobile) button for specific groups, I would like restrict it only vissible for admins and moderators groups.

I can't think of a solution which uses css alone. You'd need to use conditionals in the HTML to hide it.

I imagine you could just do this with Forum/Group permissions.. Restrict all groups from posting new topics in that forum and then make a group which has permission, and add yourself to that group.

To remove it from your topic feed widget, add this to custom.css

[data-blockid^="app_forums_topicFeed_"] .ipsDataItem_title + .ipsType_light{
	display: none;
}

If you only want to display the time, use this:

[data-blockid^="app_forums_topicFeed_"] .ipsDataItem_title + .ipsType_light{
	font-size: 0;
}

[data-blockid^="app_forums_topicFeed_"] .ipsDataItem_title + .ipsType_light time{
	font-size: 13px;
}

Wrap those codes with media queries if you only want to target mobiles.

Yeah, the code is for fluid view only. If you can post your URL, I'll take a look at your existing setup.

To remove that entire row, add this to custom.css:

@media (max-width: 979px){
  .cForumFluidTable .ipsDataItem_meta{
    display: none;
  }
}

If you want to remove everything except the time, use this instead:

@media (max-width: 979px){
  .cForumFluidTable .ipsDataItem_meta{
    font-size: 0;
  }
  .cForumFluidTable .ipsDataItem_meta time{
    font-size: 13px;
  }
}

3 hours ago, kmk said:

Thanks so much...

I forget ask for in case of forum with subforums? I want to leave the description, but without subforums enlist.

This will remove subforums in grid view:

.cForumGrid .ipsType_minorHeading,
.cForumGrid .ipsType_minorHeading + .ipsList_inline{
	display: none;
}

2 hours ago, kmk said:

Is possible only hide description area when the grid card without description? or say, if the forum contain description show description, if not hide it.

Technically that area is meant to be hidden if there's no description, but it's not exactly working as intended. I'll look into this for a future update.

You can remove it manually using the following (change the ID to the correct one):

/* Hide description area on grid view for certain forums */
[data-forumid="3"] .cForumGrid__description{
  display: none;
}

This should do it:

.cForumHeader .ipsType_pageTitle,
.cForumHeader .ipsToolList_primaryAction,
.cForumHeader + .ipsToolList{
	display: none !important;
}

.cForumHeader .ipsToolList{
	margin-left: auto !important;
}

You need to be very careful when deciding what elements to target with css.

Many of the classes which you're editing are used globally, so if you try removing .ipsToolList.ipsToolList_horizontal, you'll be affecting many areas of the site.

To remove the Forums title and the Start New Topic button (on both desktop and mobile), add this to custom.css

.cForumHeader,
.cForumHeader + .ipsToolList{
	display: none !important;
}

Keep in mind that the viewing options (table, grid and fluid) will also be removed. If you need those to stay, let me know.

Wrap the above code with a media query if you only want to target mobiles.

Hello,

It looks like you're already using custom.css to change the background of the active link. Simply add your new color value to that and it'll work.

For example, change this:

.ipsNavBar_primary > ul > li.ipsNavBar_active > a {
    background: #f5f5f5;
}

To this:

.ipsNavBar_primary > ul > li.ipsNavBar_active > a {
    background: #f5f5f5;
    color: #111;
}

On 12/26/2020 at 7:51 AM, SC36DC said:

@Ehren I know you are a master of CSS, you've helped me so many times with the Chameleon theme, if you have a moment, or if this is rather a simple fix, any idea what I can do.

No worries, add this to custom.css

.ipsFieldRow_label[for="elInput_ms_referrer_setting"]{
  display: block !important;
}

I'm guessing the default value for that class is block, but if that code doesn't work, just let us know.

I've just tried viewing the validator URL but I'm seeing a "503 Service Unavailable" error.

Nope, custom.css is untouched during updates so you should be fine 🙂

Hello,

No - the custom.css file which I'm referring to can be found under ACP > Customization > Themes > Edit HTML and CSS (the </> icon next to your theme) > CSS > custom.css

Hello,

Adding this to your custom.css file will add a scrollbar and restrict the height of your code box.

.ipsCode{
	max-height: 400px;
	overflow-y: auto;
}

19 hours ago, AlexJ said:

Need fix for main page too -  it breaks more after the custom css addition.

Ah, I didn't realise the main page used the same selectors. I've edited my code above.

For any of my other customers with the same issue as Alex, add this to custom.css and I'll patch it in a future theme update.

The awardsHr code helps with dark themes, so feel free to leave that out if you like.

[data-role="awards"] > .ipsDataItem > .ipsResponsive_block{
	flex: 0 1 100%;
}

hr.awardsHr {
	border-color: rgba(var(--theme-text_light),.3);
}

Just now, AlexJ said:

@InvisionHQ How can fix layout for @Ehren custom theme? 

If you can send me a PM with the URL, I'll take a look 🙂

The desc tag works for me. I actually use it in my own theme settings:

<?php
	$lang = array(
		'themesetting_focus_light_dark_enable' => 'Enable light/dark toggle?',
		'themesetting_focus_light_dark_enable_desc' => 'A toggle icon will be added to your theme allowing your members to easily switch to an alternate color scheme.',
	);

On 10/27/2020 at 12:26 AM, The Old Man said:

Basically, I just want to this custom setting to be displayed in the theme settings form depending upon the previous setting which is a select box containing line-gradient and radial-gradient.

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.

32 minutes ago, dhendrickson said:

Or, alternatively... wrap it in a bubble of sorts so the icons and text don't get lost in the header image?

Something like this will do the job..

#elUserNav{
	position: absolute;
	background: rgba(0,0,0,.6);
	border-radius: 4px;
	color: #fff;
	padding: 2px 10px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
[dir='ltr'] #elUserNav{ right: 0; }
[dir='rtl'] #elUserNav{ left: 0; }

If you need help beyond that, it would be best to ask future questions in the Theme Assistance forum, since this forum is technically for Feedback and suggestions.

Just now, Kingsguard said:

@Ehren Thanks for your reply! I'm trying it now... but another problem is that now the User Nav collapses to the "hamburger" menu too soon. I mean, the page isn't even that narrow, and it's already collapsing. And I've no idea where to edit that. Can you advise? Thanks in advance!

The breaking point for the responsive theme starts at 979px and is hard-coded throughout dozens of css files. Version 4.x was written years ago with the assumption that anything less than 980px was likely a tablet/mobile device, so the mobile layout should be shown. That assumption of course isn't entirely correct these days since there are a bunch of different screen sizes and devices, so I imagine the next major version of Invision Community will address this with a simple setting.

In the mean time, it's unfortunately quite difficult to change this break point, so I don't have a simple copy/paste solution for you I'm afraid.