Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'tabbed block'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Categories

  • Management
  • Design
  • Requirements
  • Development
  • Test
  • Atlassian

Categories

  • Personal
  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-Commerce

Categories

  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
  • Atlassian
  • Security
  • E-commerce

Categories

  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
  • Atlassian
  • Security
  • E-Commerce
  • Others

Categories

  • Thoughts
  • Debate
  • Health
  • Hobbies

Categories

  • Personligt
    • Åsikter
    • Humor
    • Spel
    • Träning
  • Allmänt
    • Internet
    • Program & tjänster
  • Intressant
    • Prylar
  • Professionellt
    • Management
    • Krav
    • Designs
    • Webbutveckling
    • Test
    • Atlassian
    • säkerhet
    • Förvaltning
    • Ehandel
    • Wordpress
  • Personligt_

Categories

  • Prologue
    • About This Book
  • The Tools
    • Jira Software
    • Confluence
    • Jira Service Management
  • The Inception Phase
    • Portfolio Management
    • Project Management
  • The Design Phase
    • Design as part of the Inception phase
    • Design as part of the Requirement phase
    • Working with design libraries
  • The Requirement Phase
    • Definition of Requirements
    • The four levels of Requirements
  • The Development Phase
    • Atomic design
    • Estimations
  • The Test Phase
    • The Definition of Test
    • Types of Test
  • The Operations Phase
    • Release Management
  • The Post Go-Live Phase
    • Incidents
    • Changes
  • Notes
    • My Muses
    • Research

Categories

  • Theme Building
  • Javascript Framework
  • CSS Framework
  • IPS: Pages
    • Database Templates
    • Block Plugin Templates
    • Page Templates
  • Custom Applications
  • Tips & Tricks

Categories

  • Europe
    • Central Europe
    • Eastern Europe
    • Northern Europe
    • Southeastern Europe
    • Southern Europe
    • Western Europe
  • North America
    • United States of America
    • Canada
    • Mexico
    • Caribbean
    • Central America
  • South America
    • Argentina
    • Bolivia
    • Brazil
    • Chile
    • Colombia
    • Ecuador
    • Falkland Islands
    • Guyana
    • Paraguay
    • Peru
    • Suriname
    • Uruguay
    • Venezuela
  • Africa
    • Northern Africa
    • Central Africa
    • Western Africa
    • Eastern Africa
    • Southern Africa
  • Asia
    • Central Asia
    • East Asia
    • South-Eastern Asia
    • Southern Asia
    • Western Asia
  • Oceania
    • Australia
    • Fiji
    • Kiribati
    • Marshall Islands
    • Micronesia
    • Nauru
    • New Zealand
    • Palau
    • Papua New Guinea
    • Samoa
    • Solomon Islands
    • Tonga
    • Tuvalu
    • Vanuatu

Categories

  • Shared Hosting
  • Virtual Private Server
  • Cloud Hosting
  • Dedicated Hosting
  • Co-Location
  • Hosting Services

Categories

  • Professional
    • Management
    • Design
    • Requirements
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-commerce

Categories

  • Defects
  • Ideas
  • Development
  • ☑ Archive

Categories

  • Professional
  • Management
    • Agile
  • Requirements
  • Design
  • Development
    • Frontend
    • Backend
  • Testing
  • Operations
    • Hosting
  • Atlassian
  • Security
  • E-commerce
    • CRO
    • SEO
  • Interesting

Categories

  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-commerce

Forums

  • General
    • Open Forum
    • Support
  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Test / QA
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-commerce
    • Invision Community
  • Jobs
    • Looking for employee / consultant
    • Looking for Job / Assignment
  • Building The Site's Forums
  • Destiny 2's Discussions
  • The Journey's Discussions
  • Cinephilia's Topics
  • Diablo 4's Diablo 4 Topics
  • Shadownessence's Topics
  • sensory hyperreactivity's Topics
  • Wolcen's Wolcen Topics
  • Quality Assurance Heroes's QA Topics
  • Visual Studio Code's Forum
  • Adobe Illustrator's Adobe Illustrator Forum
  • Sketch Guru's's Sketch Topics
  • Requirements & test management in Jira's Topics
  • Microsoft Teams's Microsoft Teams Discussions
  • Figma's Figma Topics
  • Microsoft Planner's Microsoft Planner Topics
  • Psychology's Psychology Topics
  • Microsoft Word's Microsoft Word Topics
  • Microsoft Powerpoint's Microsoft Powerpoint Topics
  • WordPress Devs's Wordpress Topics
  • Ornamental Design's Ornamental Design Topics
  • Adobe Photoshop's Photoshop Discussions
  • Agile 2's Agile 2 Topics
  • Agile 2's Agile 2 Principles
  • Microsoft Outlook's Outlook Topics
  • My Book's Discussions
  • Outriders's Outriders Discussions

Categories

  • Jimi's Files
    • Curriculum vitae
    • Presentations
    • Certificates
  • Management
  • Requirements
  • Design
    • Fonts
  • Code
  • Test
  • Operations
  • Atlassian
    • Certificates of Excellence
  • Security
  • Ecommerce
  • Invision Power Services
    • JWSE Support Tickets
    • JWSE Task Management
  • Shadownessence's Files
  • WordPress Devs's Wordpress Files

Calendars

  • Project: JWSE Workboard
  • Project: JWSE Workboard
  • Community Calendar
  • Professional Events
  • Management Events
  • Requirement Events
  • Design Events
  • Development Events
  • Test Events
  • Atlassian Events
  • Operations Events
  • E-commerce Events
  • Destiny 2's Events
  • The Journey's Events
  • Cinephilia's premieres
  • Diablo 4's Diablo 4 Events
  • Agile 2's Agile 2 Events

Blogs

  • How to start your own blog
  • Sketch Blog
  • Building The Site's Blog
  • Destiny 2's Destiny 2 ramblings
  • The Journey's Stories
  • Diablo 4's Diablo 4 blog
  • Sketch Guru's's Sketch News
  • Requirements & test management in Jira's News
  • Agile 2's Agile 2 Blog

Categories

  • Personal
    • Humor
    • Music
  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-commerce
  • Destiny 2's Videos
  • The Journey's Videos
  • Cinephilia's Trailers
  • Diablo 4's Diablo 4 Videos
  • Wolcen's Wolcen Videos
  • Visual Studio Code's Videos
  • Adobe Illustrator's Adobe Illustrator Videos
  • Sketch Guru's's Sketch Videos
  • Requirements & test management in Jira's Videos
  • Microsoft Teams's Microsoft Teams Videos
  • Figma's Figma Videos
  • Microsoft Planner's Microsoft Planner Videos
  • Psychology's Psychology Videos
  • Microsoft Word's Microsoft Word Videos
  • Microsoft Powerpoint's Microsoft Powerpoint Videos
  • WordPress Devs's Wordpress Videos
  • Ornamental Design's Ornamental Design Videos
  • Adobe Photoshop's Photoshop Videos
  • Agile 2's Agile 2 Videos
  • Microsoft Outlook's Outlook Videos
  • Outriders's Outriders Videos

Categories

  • Movies
    • Action Movies
    • Adventure Movies
    • Animated Movies
    • Comedy Movies
    • Crime Movies
    • Drama Movies
    • Fantasy Movies
    • Horror Movies
    • Romance Movies
    • Sci-Fi Movies
    • Thriller Movies
    • Western Movies
  • TV Shows
    • Action TV Shows
    • Adventure TV Shows
    • Animated TV Shows
    • Comedy TV Shows
    • Crime TV Shows
    • Drama TV Shows
    • Fantasy TV Shows
    • Horror TV Shows
    • Romance TV Shows
    • Sci-Fi TV Shows
    • Thriller TV Shows
    • Western TV Shows

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me

Found 2 results

  1. Adding content using tabs in Invision Community Pages is one of the most common questions I get about this website. It is something that is really not that complicated, but it is a bit tricky to find the information. In this article I will show you how I created my tabbed blocks so you can use it on your own page. While you can add this directly into a template if you want, I prefer to build this using blocks. This way I can control the content in more detail and it makes my life easier since I have different blocks for each content. So I first start with creating a block that will hold the tabs themselves. In this block I will reference in other blocks to display the content for each tabbed content. To create a new block you go to Pages -> Page Management -> Blocks. There we create a custom block with manual HTML as the content editor. Give the block a name and a template key. I also have organized my templates so that my Tabs are in a separate category, which help making things a little easier to find when you have a lot of blocks like I do. In the content section you can now add the HTML and template logic to create the tabs section. The information on how tabs work can be found in the documentation here: https://invisioncommunity.com/4guides/themes-and-customizations/javascript-framework/using-ui-widgets/ipsuitabbar-r66/ <div class="ipsTabs ipsTabs_contained ipsTabs_withIcons ipsTabs_large ipsTabs_stretch ipsClearfix" id="elTabBar" data-ipstabbar="" data-ipstabbar-defaulttab="1" data-ipstabbar-contentarea="#" data-ipstabbar-updateurl="false"> <a href="" data-action="expandTabs"><i class="fa fa-caret-down"></i></a> <ul role="tablist"> <li> <a href="" role="tab" id="1" class="ipsType_center ipsTabs_item ipsTabs_activeItem" aria-selected="true"> <i class="far fa-newspaper"></i> Management Articles </a> </li> <li> <a href="" role="tab" id="2" class="ipsType_center ipsTabs_item"> <i class="fas fa-comment-alt"></i> Management Discussions </a> </li> <li> <a href="" role="tab" id="3" class="ipsType_center ipsTabs_item"> <i class="fas fa-id-card"></i>Management People </a> </li> <li> <a href="" role="tab" id="4" class="ipsType_center ipsTabs_item"> <i class="fas fa-cloud-download-alt"></i>Management Downloads </a> </li> <li> <a href="" role="tab" id="5" class="ipsType_center ipsTabs_item"> <i class="fas fa-play-circle"></i>Management Videos </a> </li> <li> <a href="" role="tab" id="6" class="ipsType_center ipsTabs_item"> <i class="fas fa-link"></i>Management Links </a> </li> </ul> </div> <section class="ipsTabs_panels ipsTabs_contained"> <div id="ipsTabs_elTabBar_1_panel" class='ipsTabs_panel'> {block="latest_management_articles"} <a href="https://jimiwikman.se/blog-articles/blog/professional/management/">Read All Articles</a> </div> <div id="ipsTabs_elTabBar_2_panel" class='ipsTabs_panel'> {block="management_forum_topics"} </div> <div id="ipsTabs_elTabBar_3_panel" class='ipsTabs_panel'> {block="awesome_management"} </div> <div id="ipsTabs_elTabBar_4_panel" class='ipsTabs_panel'> {block="latest_management_downloads"} </div> <div id="ipsTabs_elTabBar_5_panel" class='ipsTabs_panel'> {block="latest_management_videos"} </div> <div id="ipsTabs_elTabBar_6_panel" class='ipsTabs_panel'> {block="latest_management_links"} </div> </section> In this code we have the top section defining the tabs themselves. Each tab has an ID that we use in the bottom section to determine what content we show in each tab. This is done in the bottom section by adding the ID to the div ID "ipsTabs_elTabBar_HERE_panel". So for example we can add the ID of 1 to show the content for the first tab by adding the number 1 to that ID: "ipsTabs_elTabBar_1_panel". What I have done for my setup is to add blocks rather than content directly into the bottom section. For me that make things easier to manage, but you can add it directly to your block if you prefer that. In my code here I am using FontAwesome to create the icons for the tabs. You can just take those out if you prefer not to have icons in your tabs. Once this has been done, then you have a block that you can add to any page, just like other blocks. You can see this example live here: https://jimiwikman.se/management/ I hope this is helpful and if you have any questions on how this works or how to modify it, feel free to add a comment. I will do my best to answer as always. If you have other questions on Invision Community, please use the discussion forum.
  2. Adding content using tabs in Invision Community Pages is one of the most common questions I get about this website. It is something that is really not that complicated, but it is a bit tricky to find the information. In this article I will show you how I created my tabbed blocks so you can use it on your own page. While you can add this directly into a template if you want, I prefer to build this using blocks. This way I can control the content in more detail and it makes my life easier since I have different blocks for each content. So I first start with creating a block that will hold the tabs themselves. In this block I will reference in other blocks to display the content for each tabbed content. To create a new block you go to Pages -> Page Management -> Blocks. There we create a custom block with manual HTML as the content editor. Give the block a name and a template key. I also have organized my templates so that my Tabs are in a separate category, which help making things a little easier to find when you have a lot of blocks like I do. In the content section you can now add the HTML and template logic to create the tabs section. The information on how tabs work can be found in the documentation here: https://invisioncommunity.com/4guides/themes-and-customizations/javascript-framework/using-ui-widgets/ipsuitabbar-r66/ <div class="ipsTabs ipsTabs_contained ipsTabs_withIcons ipsTabs_large ipsTabs_stretch ipsClearfix" id="elTabBar" data-ipstabbar="" data-ipstabbar-defaulttab="1" data-ipstabbar-contentarea="#" data-ipstabbar-updateurl="false"> <a href="" data-action="expandTabs"><i class="fa fa-caret-down"></i></a> <ul role="tablist"> <li> <a href="" role="tab" id="1" class="ipsType_center ipsTabs_item ipsTabs_activeItem" aria-selected="true"> <i class="far fa-newspaper"></i> Management Articles </a> </li> <li> <a href="" role="tab" id="2" class="ipsType_center ipsTabs_item"> <i class="fas fa-comment-alt"></i> Management Discussions </a> </li> <li> <a href="" role="tab" id="3" class="ipsType_center ipsTabs_item"> <i class="fas fa-id-card"></i>Management People </a> </li> <li> <a href="" role="tab" id="4" class="ipsType_center ipsTabs_item"> <i class="fas fa-cloud-download-alt"></i>Management Downloads </a> </li> <li> <a href="" role="tab" id="5" class="ipsType_center ipsTabs_item"> <i class="fas fa-play-circle"></i>Management Videos </a> </li> <li> <a href="" role="tab" id="6" class="ipsType_center ipsTabs_item"> <i class="fas fa-link"></i>Management Links </a> </li> </ul> </div> <section class="ipsTabs_panels ipsTabs_contained"> <div id="ipsTabs_elTabBar_1_panel" class='ipsTabs_panel'> {block="latest_management_articles"} <a href="https://jimiwikman.se/blog-articles/blog/professional/management/">Read All Articles</a> </div> <div id="ipsTabs_elTabBar_2_panel" class='ipsTabs_panel'> {block="management_forum_topics"} </div> <div id="ipsTabs_elTabBar_3_panel" class='ipsTabs_panel'> {block="awesome_management"} </div> <div id="ipsTabs_elTabBar_4_panel" class='ipsTabs_panel'> {block="latest_management_downloads"} </div> <div id="ipsTabs_elTabBar_5_panel" class='ipsTabs_panel'> {block="latest_management_videos"} </div> <div id="ipsTabs_elTabBar_6_panel" class='ipsTabs_panel'> {block="latest_management_links"} </div> </section> In this code we have the top section defining the tabs themselves. Each tab has an ID that we use in the bottom section to determine what content we show in each tab. This is done in the bottom section by adding the ID to the div ID "ipsTabs_elTabBar_HERE_panel". So for example we can add the ID of 1 to show the content for the first tab by adding the number 1 to that ID: "ipsTabs_elTabBar_1_panel". What I have done for my setup is to add blocks rather than content directly into the bottom section. For me that make things easier to manage, but you can add it directly to your block if you prefer that. In my code here I am using FontAwesome to create the icons for the tabs. You can just take those out if you prefer not to have icons in your tabs. Once this has been done, then you have a block that you can add to any page, just like other blocks. You can see this example live here: https://jimiwikman.se/management/ I hope this is helpful and if you have any questions on how this works or how to modify it, feel free to add a comment. I will do my best to answer as always. If you have other questions on Invision Community, please use the discussion forum. View full blog article
×
×
  • Create New...