Jump to content
Sign in to follow this  
james341

Inserting video in 1 of my 3 box in home page

Recommended Posts

james341

I set my home page as feature page. I have there my feature set and under the feature I have my 3 boxes. My question have 2 parts : 1. First I want to have in the middle box some kind of video in all the box space. I want this video box will be wider than the other 2 boxes (left and right ones). 2. My second question is there a way to make it like in the first part : having left and right boxes that they are smaller and have in the middle a video box that is wider? Thanks I must say that signing up and buy this theme was smart choice - I love the support you get here for the product you buy. Thanks

Share this post


Link to post
Share on other sites
antonella
I'm not an expert and usually have to tweak around a bunch to find it. You can try the code below (of course, changing the sizes as you need) and see if it helps get you any closer: #fbox_10 .dcol_3 { width: 478px;) #fbox_11 .dcol_3, #fbox_9 .dcol_3 { width: 220px: }

Share this post


Link to post
Share on other sites
james341
1. This will make the right and left boxes thinner ? 2. where do i put this code? ): 3. how do i put in the middle the video? i'm using Vimeo thanks

Share this post


Link to post
Share on other sites
antonella
1. Yes, but you can change the 220px to any width you want. the three should add up to 918 I think. fbox_10 is the middle column, and fbox_11 and fbox_9 are the right and left boxes. 2. You have to go into the PLATFORM PRO dashboard and select CUSTOM CSS. There you can add this code. 3. I don't know if video will work in the boxes or not, but you can try it! Once in the box post file you want, go to the html tab and paste in the EMBED code for your vimeo video. I'm not familiar with Vimeo, but it's probably similar to youtube. You have to pick up a special embed code, not just the URL link. Then you also have to change the width in the embed code to match the width of the box. Also, the code above got a smiley in it somehow and the last width size should end with a semicolon, not a colon! Sorry about that... Should be: #fbox_10 .dcol_3 { width: 478px; } #fbox_11 .dcol_3, #fbox_9 .dcol_3 { width: 220px; }

Share this post


Link to post
Share on other sites
catrina
To prevent the code from creating smilies, you can add the following before the code: [*code*] ...and this after the code: [*/code*] Just take out the asterisks.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
james341
i inserted the code in the css section in platform pro settings and nothing happened to the boxes .... :-(

Share this post


Link to post
Share on other sites
catrina
Try this code (unnecessary spaces were removed): [code]#fbox_10 .dcol_3 {width: 478px;} #fbox_11 .dcol_3, #fbox_9 .dcol_3 {width: 220px;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
james341
no...still nothing happened ...i insert it in the css box... do i need to do something else ?

Share this post


Link to post
Share on other sites
catrina
Try this one: [code]div.dcol_container_3 #fbox_10 .dcol_3 {width: 478px;} div.dcol_container_3 #fbox_11 .dcol_3, #fbox_9 .dcol_3 {width: 220px;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
james341
no still nothing.... also it seems i can't insert the video in the box - it's just the code you can see it : www.skip-up.com

Share this post


Link to post
Share on other sites
james341
ok working now - now only to make the boxes smaller - nothing happened ...

Share this post


Link to post
Share on other sites
james341
you can see the problem in my site: www.skip-up.com

Share this post


Link to post
Share on other sites
james341
i found out i need to make the font of the 2 boxes smaller to make it look good and make the middle box wider for my movie

Share this post


Link to post
Share on other sites
antonella
Sorry! Forgot to mention above about the html editor, but see you've got it covered. It seems that the fbox id numbers have changed. If you used different feature boxes, you will have to change the identifiers. Try this: [code] div.dcol_container_3 #fbox_315 .dcol_3 {width: 478px;} div.dcol_container_3 #fbox_11 .dcol_3, #fbox_319 .dcol_3 {width: 220px;} [/code] You can use Firefox Firebug to inspect elements in the code and easily identify the css. Or look it up in the source code of the page.

Share this post


Link to post
Share on other sites
james341
again.. how can i know the number of the box? i used the firebug but i can't find it?

Share this post


Link to post
Share on other sites
antonella
If you don't already have firebug open, right-click on the area of your page that you want to review and select Inspect Element. A split window will open up and show you the html code for the general area you have clicked on. You should be able to see the ids for the boxes you have, written as fbox_315, etc. You can hover over each line in your html and if you look on the web page, it will highlight the area it affects. If you send me your email, I will send you a screen grab.

Share this post


Link to post
Share on other sites
antonella
James, did you finally get this to work? I see the middle box has the video in frame.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×