Docs

[Flightwave]

Hi!

Question:
On a product page, in the “product short description”, I want to place a 3-tabbed area. Tab 1 = Features. Tab 2 = Specs. Tab 3 = Video

In the “features” tab, I want to list features – and use icons. For example:

[clock icon] Up To 2.5 Hrs Flight Time
I’d like the clock icon to be #003EFF, and significantly larger than the font of the text itself. I’d love the text to be <H6>, and the color of the text to be black.

In the specs tab, I’d LOVE to be able to place a nice little table with 2 columns and 5 rows separated by thin grey lines, and be able to put data in the table.

In the Video tab, I’d love to place a vimeo link for a video – and know how to control the display size of the video – or have it pop out into a larger player when the user clicks the play button, or have it play inside the tabbed content area but with the option to “expand” it to a larger size where it plays in a popout larger window (like what happens with lightbox photos).

Is this possible??

Thanks so much!

[Paul R]

Hi,

Yes, that’s possible.

You can use the tab shortcode, kindly refer to the link below.

Tabbed Content

Hope that helps.

[Flightwave]

Paul,
I’m familiar with that shortcode.
I’m using it.
But it doesn’t address my questions. Namely:
1. How do I make the icon font size larger and color different than the text that follows it?
2. How do I place a table within one of the tabs?
3. How do I keep the tab frame at a fixed size – so that if the information to be displayed in the tab is too much to fit – it will create a scrollable area within the tab area?
4. How do I place a video in one of the tabs?
5. How do I confine the video to the fixed size of the tab area?
6. How do I make it so that a user can enlarge the video in a popout window (like what lightbox does for pictures)?

Thanks.
Chris

[Christopher]

Hi there,

#1 & #3 & #5 Please provide us with URL of page in question.

#2 Please check this link : http://www.w3schools.com/html/html_tables.asp

#4 Please use video shortcode, see : http://demo.theme.co/integrity-1/shortcodes/responsive-video

#6 You should use following shortcode :

[image src="image-2.jpg" link="true" href="//player.vimeo.com/video/84751465" lightbox_video="true"]
[lightbox]

Check this link : https://community.theme.co/kb/shortcode-walkthrough-lightbox/

Hope it helps.

[Flightwave]

This reply has been marked as private.

[Flightwave]

P.S.
How can I get all the text to line up (like what would happen in MS Word if you set a left margin) – so that even if the text is too long for one line and it overlaps into a second line – the second line wraps and is left justified with the other text lines?

[Rad]

Hi there,

You mean text wrapping along with the image? Would you mind providing your mockup design of how it should be?

1. Please add this CSS too with your preferred size and color

.x-tab-content .x-icon {
font-size: 40px !important;
color: #000 !important;
}

3. This too, with your preferred size,

.x-tab-content {
overflow: scroll;
}

.x-tab-content .x-tab-pane {
width: 400px;
}

5. And this,

.x-tab-content .x-tab-pane .x-video {
width: 400px;
}

Hope this helps.

[Author]

Posts