MrHaim

Значок помогает помечать исходящие ссылки, которые не принадлежат нашему домену.
Вставьте следующий код в custom.css:
.ipsType_richText a:not(:has(img))[rel*="external"]:after { content: "\f08e"; font-family: FontAwesome; font-size:10px; margin-left: 4px; display: inline-block; }
 
Если хотите чтобы значок отображался перед ссылкой замените:
after на
before

Welcome to the first tutorial on creating custom apps for the IPS (Invision Community) engine. This series will focus on create apps and plugins.
What is it the Invision Community?
It is a CMS for advanced forums but it offers applications such as commerce, pages, files, gallery, events, calendar. To create a modification for this engine, a license is required, which can be purchased on the official website. You can test it for free 30-day trial.
How install IPS?
Installation is very easy, like the WordPress CMS You have to download packages form Client Area and follow this guide. If you want install IPS engine on your local machine use test install key and use XAMPP app (I recommended for Mac OS) or Laragon app (I recommended for Windows).
Enable Developer Mode
Before we start creating an application, we need to turn on the developer mode.
Remember not to run developer mode in production! Your community can be run much slower than usual and may introduce security vulnerabilities!
First download Developer Tools for your IPS version.
You can check IPS version by move in AdminCP => System => Support => Get Support.
Extract the developer tools and move them to where IPS Community Suite is installed, merging with the existing files.
Create or modify constants.php file and paste:
<?php define( 'IN_DEV', TRUE ); Your AdminCP should change. In the lower left corner, we should receive information that we are in developer mode.

Create first app
Go to AdminCP => System => Applications and click “Create New”.

Type name of app, application directory (name folder).
Remember: Application Directory must be unique to each installation! You can add come prefix for you app for example (for me) `aXenHelloWorld`.

Congratulations! You are created first application in IPS!

At the moment, your application does absolutely nothing. Let’s create a new website for your community.
In your files you have folder `applications` and inside this folder you have your application. For me this is `helloworld` folder. Open your folder with the application via PHPStorm (paid) or VSCode (free). I using VSCode.

Now take to look for directory structure. You can explore folders, but remember, `data` folder is generate automatically, so you can’t modify files here (with the exception of furl.json).

Create page
Okey, let’s create first page in your application.
Go to AdminCP => System => Side Features => Applications. Find your application and open ”Developer center”.
  Create module
Go to “Modules — Front” tab. Modules are our main classes, which can be said to serve as folders. Defines modules and controllers used on the front end of your application. Files and folders will be generated in your modules/front directory.
Now let’s create new module, click “Add Module” button and provide “Module Key”. I’ll type `helloworld`.

Create controller
In next steep we’re create controller for our first page. Find “Plus” button, click it and provide filename. I’ll type `pagetest`.

Now check files in your applications. We created a module called `helloworld` and a controller called `pagetest.php`.
 

Open “pagetest.php” file. IPS automatically generated us the basic structure of the file. Don’t change it, except for the methods that are inside the class.
Methods build-in:
Execute — code running only once when render other functions, Manage — main function for your controller Congratulations! You are create first page!
Now you can go to your page with the appropriate query:
 

 
Create HTML template
Our page is empty. We must create HTML page to display something here. Go to files your application and open `dev/html` folder.
We have 3 primary folders here:
front — Display in front, admin — Display in AdminCP, global — Display in front and in AdminCP For our app create new folder “front”.
Inside “front” folder create new folder (for group) for example “pagetest” and inside folder create “index.phtml”. The file and folder names are optional.

Inside “index.phtml” on top file you must write header. Add in file (on the top):
<ips:template parameters="" /> Below you can write your HTML. Example:
<ips:template parameters="" /> <h1>Wow! My first page in IPS! Hi :)</h1> In the next step, we will render this HTML code in our controller. Inside controller (for me pagetest.php) modify manage method.
\IPS\Output::i()->output = \IPS\Theme::i()->getTemplate(group, appName, module)->filename(); module — front/admin/global folder, group — Name folder in module folder, appName — your appName (app name you can find in each php file by namespace for example `namespace IPS\helloworld`. “helloworld” this is my app name), filename — your `phtml` file Full code here for me:
protected function manage() { \IPS\Output::i()->output = \IPS\Theme::i()->getTemplate('pagetest', 'helloworld', 'front')->index(); } Now we have text inside page!
  Language string
IPS has language module for strings. Let’s add few strings. Go to your files app and open file in “dev/ lang.php”. Next add some strings.
<?php $lang = [ '__app_helloworld' => "Hello World", 'module__helloworld_helloworld' => "My helloworld Module", 'hello_world_test_page' => "Wow! My first page in IPS! Hi :) for English" ]; “module__helloworld_helloworld” is for your module in breadcrumb.
Now go back to our `index.phtml` file. Replace content to and save file:
<ips:template parameters=”” /> <h1>{lang="hello_world_test_page"}</h1> Now your application use “hello_world_test_page” key to display string “Wow! My first page in IPS! Hi for English”.

Breadcrumbs
You can create your own breadcrumb for page. Go to your controller and modify manage method.
\IPS\Output::i()->breadcrumb[] = [null, \IPS\Member::loggedIn()->language()->addToStack('hello_world_test_page')]; This line accept array with 2 parameters:
URL — current null if is current page, String — to display text This is method language module build-in IPS. “‘hello_world_test_page” is your language key.
\IPS\Member::loggedIn()->language()->addToStack('hello_world_test_page');php Check the results:
  Title Page
We don’t have current title page. Check browser tab for current page in your IPS.

If we want to add some text here, we can do that by modify manage method in your controller.
\IPS\Output::i()->title = \IPS\Member::loggedIn()->language()->addToStack('hello_world_test_page'); Check the results:

 
Export Application
Now you can build application for your production community. Go to AdminCP => System => Side Features => Applications. Find your application and click “Download” button.
  Choose new version and click “Save”.
  Done! Now you have `.tar` version of your application.
Ending
Congratulations! You’re created first application in IPS engine. If you are lost, look at the source code on my GitHub.
Credit to Maciej Piotr Balcerzak

Можливо, в інших темах це робиться інакше, але я зробив так:
Ідіть у: Адмінка > Кастомізація > Зовнішній вигляд > Теми > Вибір вашої теми > HTML та CSS код теми > Шаблони > файл globalTemplate
Внизу шукаєте тег <footer></footer>, всередині нього вставляєте код лічильника.
Також код лічильника можна поставити і поза цим тегом, просто відразу після нього (обидва варіанти Яндекс Метрика показала, як встановлений лічильник).
Код лічильника можна отримати в Яндекс Метриці:  https://metrika.yandex.ru/
 
 
Maybe other threads do it differently, but this is what I did:
Go to: Admin > Customization > Appearance > Themes > Choose your theme > HTML and CSS theme code > Templates > file globalTemplate
At the bottom, look for the <footer></footer> tag, insert the counter code inside it.
You can also put the counter code outside this tag, just right after it (both options Yandex Metrica showed how the counter is installed).
The meter code can be obtained from Yandex Metrica: https://metrika.yandex.ru/

Hi. Try adding something like this to your post template:
{{$addWarningUrl = \IPS\Http\Url::internal( "app=core&module=system&controller=warnings&do=warn&id={$comment->author()->member_id}", 'front', 'warn_add', array( $comment->author()->members_seo_name ) );}} {{$wr = base64_encode( json_encode( array( 'app' => 'forums', 'module' => 'forums-comment' , 'id_1' => $comment->topic_id, 'id_2' => $comment->pid ) ) );}} {{$addWarningUrl = $addWarningUrl->setQueryString( 'ref', $wr );}} {{if member.modPermission() and $comment->author()->member_id != member.member_id }} <li data-ipsTooltip title="{lang="warn_user_title"}" class="ipsType_light"><a href="{$addWarningUrl}" data-ipsDialog data-ipsDialog-title='{lang="warn_user"}'><i class="fa fa-exclamation-triangle"></i></a></li> {{endif}} Credit to SeNioR
 

Paste this code into custom.css:
 
#ipsLayout_header header { background-image: url(link do twojej grafiki); background-position: center; background-size: auto; }  
Russian
Вставьте этот код в custom.css:
#ipsLayout_header header { background-image: url(link do twojej grafiki); background-position: center; background-size: auto; } Credit to Hype Beast

core -> front -> widgets -> twitter
Change the following
{{if $style}}data-theme="{$style}"{{endif}} to either:
data-theme="light" or
data-theme="dark" Not sure how this will behave with regards to caching though.

First, go to: ACP -> Appearance -> Styles and Templates -> Edit HTML and CSS -> template Tab ->footer
Paste the code below at end of your code:
<!--Float button for new topic created By Arash.Ranjbar--> {{foreach \IPS\Member::loggedIn()->createMenu() as $k => $url}} <a href='{url="app=forums&module=forums&controller=forums&do=add" seoTemplate="topic_non_forum_add_button"}' data-ipsdialog="" data-ipsdialog-size="narrow" data-ipsdialog-title='{lang="select_forum"}' class="arash"> <i class="fa fa-pencil arash01" style="color:white;"></i> </a> <div class="arash-container"> <div class="arash-label">create topic</div> <i class="fa fa-play arash-01"></i> </div> {$data} {{endforeach}} <!--End Float button for creat new topic By Arash.Ranjbar--> Paste the code below at custom.css:
.arash-container{ position:fixed; bottom:20px; left:105px; display:table; visibility: hidden; } .arash-label{ color:#FFF; background:rgba(51,51,51,0.5); display:table-cell; vertical-align:middle; padding:10px; border-radius:3px; } .arash-01{ display:table-cell; vertical-align:middle; color:#FFF; opacity:0.5; } .arash{ position:fixed; width:50px; height:50px; bottom:20px; left:40px; background-color:#b7ae31; color:#FFF; border-radius:50px; text-align:center; } .arash01{ font-size:24px; margin-top:13px; } a.arash + div.arash-container { visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s ease; } a.arash:hover + div.arash-container{ visibility: visible; opacity: 1; } This button will only be displayed for logged in users!
 

Hello. I had an idea to replace the first three places in widget with trophy icons. I tried several times and was successful in doing it only using CSS. 😉 
How to do it? Add the following code to custom.css:
/* First Place */ .ipsWidget .ipsDataItem:first-child div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:first-child div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: var(--trophy-first--background); font-family: FontAwesome; } /* Second Place */ .ipsWidget .ipsDataItem:nth-child(2) div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:nth-child(2) div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: var(--trophy-second--background); font-family: FontAwesome; } /* Third Place */ .ipsWidget .ipsDataItem:nth-child(3) div.ipsDataItem_icon.ipsType_large strong{ display:none; } .ipsWidget .ipsDataItem:nth-child(3) div.ipsDataItem_icon.ipsType_large:after { content: "\f091"; color: var(--trophy-third--background); font-family: FontAwesome; } Results:

In this short tutorial we will show you in step 1 how to decorate the entries in the navigation bar with Font Awesome icons and in step 2 how to replace the status icons of the individual forums. It's actually quite simple, Invision Community supports FA by default and you can find a list of currently supported icons HERE.
When you find something you want to use, click on it and note the Unicode in the detail view...

 
Next you go to the list of installed themes in the AdminCP and click on the </> symbol for the theme in which you want to use the icons.
Then click on the CSS tab and look for the template custom.css, in which an unedited theme should usually only show a placeholder.
 

 
In order to use FA in navigation, it must first be triggered for this position. This code snippet is responsible for this, which you copy into the empty template...
.ipsNavBar_primary li > a:before { font-family: "FontAwesome"; line-height: 1; font-weight: normal; } OK, now we know where to get the icons and where to put them. Now we only have to tell the theme where it should display which icon.
To do this, go back to the frontend, right-click on the element you want to assign an icon to and select Inspect from the context menu, whereupon your browser will present you with something like this...

 
What interests us in this case is the ID 21. Now copy the following into your template, save it and update your page...
.ipsNavBar_primary li[id="elNavSecondary_21"] > a:before{content:"\f198"} /* Slack */ Now the element with ID 21 should associate the FA icon with Unicode f198, in this case "Slack". Do the same for all other elements in the top navigation bar. It's the same for subnavigation, only the code is a little bit different...
.ipsNavBar_secondary li[id="elNavSecondary_10"] > a:before{content:"\f086"} /* Comments */ Now we come to step 2, in which we devote ourselves to the status icons of the forums. You can find out their IDs with a right click, just like those of the elements in the navigation. The code to replace a forum icon is just a bit longer and looks like this...
.ipsDataItem[data-forumid='2'] .ipsItemStatus.ipsItemStatus_large .fa-comments::before, .ipsItemStatus:not( .ipsItemStatus_large ) .fa-comments::before { content: "\f198"; } The icon with the Unicode f198 is assigned to the forum with the ID number 2, that's pretty much it. When you're done, it might look something like this...

In this short tutorial we will show you in step 1 how to decorate the entries in the navigation bar with Font Awesome icons and in step 2 how to replace the status icons of the individual forums. It's actually quite simple, Invision Community supports FA by default and you can find a list of currently supported icons HERE.
When you find something you want to use, click on it and note the Unicode in the detail view...

 
Next you go to the list of installed themes in the AdminCP and click on the </> symbol for the theme in which you want to use the icons.
Then click on the CSS tab and look for the template custom.css, in which an unedited theme should usually only show a placeholder.
 

 
In order to use FA in navigation, it must first be triggered for this position. This code snippet is responsible for this, which you copy into the empty template...
.ipsNavBar_primary li > a:before { font-family: "FontAwesome"; line-height: 1; font-weight: normal; } OK, now we know where to get the icons and where to put them. Now we only have to tell the theme where it should display which icon.
To do this, go back to the frontend, right-click on the element you want to assign an icon to and select Inspect from the context menu, whereupon your browser will present you with something like this...

 
What interests us in this case is the ID 21. Now copy the following into your template, save it and update your page...
.ipsNavBar_primary li[id="elNavSecondary_21"] > a:before{content:"\f198"} /* Slack */ Now the element with ID 21 should associate the FA icon with Unicode f198, in this case "Slack". Do the same for all other elements in the top navigation bar. It's the same for subnavigation, only the code is a little bit different...
.ipsNavBar_secondary li[id="elNavSecondary_10"] > a:before{content:"\f086"} /* Comments */ Now we come to step 2, in which we devote ourselves to the status icons of the forums. You can find out their IDs with a right click, just like those of the elements in the navigation. The code to replace a forum icon is just a bit longer and looks like this...
.ipsDataItem[data-forumid='2'] .ipsItemStatus.ipsItemStatus_large .fa-comments::before, .ipsItemStatus:not( .ipsItemStatus_large ) .fa-comments::before { content: "\f198"; } The icon with the Unicode f198 is assigned to the forum with the ID number 2, that's pretty much it. When you're done, it might look something like this...