Jump to content

Ehren

Invision Community Team
 View Profile  See their activity

  • Posts

    254

  • Joined

  • Last visited

  • Days Won

    22

 Content Type 

Downloads

Release Notes

IPS4 Guides

IPS4 Developer Documentation

Invision Community Blog

Development Blog

Deprecation Tracker

Providers Directory

Forums

Events

Store

Gallery

Everything posted by Ehren

  1. Ehren
    Hi @Redmak I do something similar on my own forums, however I show an overlay to non-customers (basically guests or regular members). If an admin or customer is viewing the site, the overlay isn't shown. I use css to achieve this, and it only involves a minor template modification on globalTemplate. This technique can easily be adjusted to show the icon/message to members instead. To use this technique on your site, open your globalTemplate file and find: <html Change that to: <html data-group-id='{expression="member.member_group_id"}' That will output the member group ID of the current visitor. We can now use something like the below code to display a message or icon next to certain forum names. This example will add a "Members only" badge next to forum #81 if the person viewing your site is in group 3 ("Members" by default): [data-group-id='3'] [data-forumid='81'] .ipsDataItem_title::after{ content: 'Members only'; font-size: 0.6em; font-weight: bold; background: rgb(var(--theme-text_light)); color: #fff; border-radius: 4px; padding: .2em .7em; margin-left: .7em; } If you're unfamiliar with CSS, you can add this badge to multiple forums by duplicating and comma separating the top line like so: [data-group-id='3'] [data-forumid='81'] .ipsDataItem_title::after, [data-group-id='3'] [data-forumid='82'] .ipsDataItem_title::after, [data-group-id='3'] [data-forumid='105'] .ipsDataItem_title::after, [data-group-id='3'] [data-forumid='202'] .ipsDataItem_title::after, [data-group-id='3'] [data-forumid='231'] .ipsDataItem_title::after, [data-group-id='3'] [data-forumid='232'] .ipsDataItem_title::after{ content: 'Members only'; font-size: 0.6em; font-weight: bold; background: rgb(var(--theme-text_light)); color: #fff; border-radius: 4px; padding: .2em .7em; margin-left: .7em; } Or, if you'd rather use the padlock instead: [data-group-id='3'] [data-forumid='81'] .ipsDataItem_title::after, [data-group-id='3'] [data-forumid='82'] .ipsDataItem_title::after, [data-group-id='3'] [data-forumid='105'] .ipsDataItem_title::after, [data-group-id='3'] [data-forumid='202'] .ipsDataItem_title::after, [data-group-id='3'] [data-forumid='231'] .ipsDataItem_title::after, [data-group-id='3'] [data-forumid='232'] .ipsDataItem_title::after{ content: '🔒'; } Does that help?
  2. Ehren
    Hi Darren, If possible, posting a URL to that topic might be helpful so we can view the code 🙂
  3. Ehren
    Adding elements can't be done with css alone, sorry!
  4. Ehren
    Add the following to your custom.css file: .cContentMessage__header > .ipsFlex-fw\:wrap{ flex-wrap: nowrap; }
  5. Ehren
    Hello, I'd need to see a live URL if possible.
  6. Ehren
    You'd need to remove the vertical padding and use a min-height instead while also using flexbox to vertically center the text. Personally, I'd keep it as-is since it's technically working as intended.
  7. Ehren
    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>
  8. 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 🙂
  9. Ehren
    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 🙂
  10. Ehren
    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.
  11. Ehren
    I can't think of a solution which uses css alone. You'd need to use conditionals in the HTML to hide it.
  12. Ehren
    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.
  13. Ehren
    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.
  14. Ehren
    Yeah, the code is for fluid view only. If you can post your URL, I'll take a look at your existing setup.
  15. Ehren
    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; } }
  16. Ehren
    This will remove subforums in grid view: .cForumGrid .ipsType_minorHeading, .cForumGrid .ipsType_minorHeading + .ipsList_inline{ display: none; }
  17. Ehren
    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; }
  18. Ehren
    This should do it: .cForumHeader .ipsType_pageTitle, .cForumHeader .ipsToolList_primaryAction, .cForumHeader + .ipsToolList{ display: none !important; } .cForumHeader .ipsToolList{ margin-left: auto !important; }
  19. Ehren
    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.
  20. Ehren
    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; }
  21. Ehren
    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.
  22. Ehren
    I've just tried viewing the validator URL but I'm seeing a "503 Service Unavailable" error.
  23. Ehren
    Nope, custom.css is untouched during updates so you should be fine 🙂
  24. Ehren
    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
  25. Ehren
    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; }
Invision Community © 2024 IPS, Inc.
×
×
  • Create New...