Topic: 2 Column Box Question | Thesis Laboratory Support

This topic contains 9 replies, has 2 voices, and was last updated by Thomas 11 years, 4 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
May 13, 2014 at 4:44 pm #124

tvanwyk
Participant

Hi,

I’m setting up a website using the Criss Cross skin and on the home page I want to have a video and an opt-in form to the right of the video.

My question is this: Can you configure the two column box in custom css or elsewhere so that the left column is 2/3 and the right column is 1/3?

I want the video to go in the left column and be 2/3 of the width and the opt in box go in the right column and be 1/3 of the width.

Let me know if that’s possible, and if not, maybe a new box idea for you where you can change the widths of the columns or just a 2 column box with a 2/3 and 1/3 configuration.

Thanks,

Trevor

May 13, 2014 at 6:13 pm #125
Thomas
Keymaster
Adding the following code to your custom css area should adjust the width of the first box to 2/3 width and the second box to 1/3 width.
```
.col-boxes.columns-two.grt.post_box .col1 {
    width: 66%;
}
.col-boxes.columns-two.grt.post_box .col2 {
    width: 32%;
}
```
Let me know if these values work for you.

Cheers!
May 13, 2014 at 7:45 pm #126

tvanwyk
Participant

Thanks Thomas. So far so good. Another question…If I want to remove the border of each column, what would I put in the custom css area?

Thanks,

Trevor

May 13, 2014 at 9:09 pm #127
Thomas
Keymaster
Try using this:
```
.col-boxes.columns-two.grt.post_box .col {
    border: none;
}
```
May 14, 2014 at 11:08 am #128

tvanwyk
Participant

Hi. That code didn’t remove the borders. I think what I’m going to do is keep the border for the right hand column and then remove the border for the left hand column where the video is. Let me know if there’s a way to do that.

Thanks,

Trevor

May 14, 2014 at 3:45 pm #129
Thomas
Keymaster
Ok, I think it’s because I used border instead of border-bottom.

If you wan’t to remove just the left column border, replace the code I gave you from your question about resizing the columns with the code below and completely remove the code I gave you in the previous post.
```
.col-boxes.columns-two.grt.post_box .col1 {
    width: 66%;
    border-bottom: none;
}
.col-boxes.columns-two.grt.post_box .col2 {
    width: 32%;
}
```
If that doesn’t work, try
```
.col-boxes.columns-two.grt.post_box .col1 {
    width: 66%;
    border-bottom: none !important;
}
.col-boxes.columns-two.grt.post_box .col2 {
    width: 32%;
}
```
May 14, 2014 at 4:23 pm #130

tvanwyk
Participant

I had to get rid of the box shadow too, so here’s what worked…

.col-boxes.columns-two.grt.post_box .col1 {
width: 66%;
border-bottom: none;
box-shadow: none;
}

I then removed the top padding so the top of the video player and the top of the right column lined up horizontally.

Thanks for your help!

Trevor

May 14, 2014 at 4:40 pm #131
Thomas
Keymaster
Excellent, you’re welcome! If you want to remove the shadow from both boxes, you should remove the box-shadow: none; property in your previous post and add the following code:
```
boxes.columns-two.grt.post_box .col {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
```
May 14, 2014 at 6:08 pm #132
tvanwyk
Participant
I’m going to keep the border and box shadow for the right column. Do I need to add the webkit and moz lines of code to the left column to fully get rid of the box shadow?

Next question…now I’m on to the 4 Column Feature Box. Is there a way for the links to open in a different window? I don’t know how I’d code that.

Thanks,

Trevor
- This reply was modified 11 years, 4 months ago by tvanwyk.
May 14, 2014 at 7:40 pm #134
Thomas
Keymaster
The webkit and moz lines are the vendor-prefixed properties of different browsers. -webkit is for Chrome and Safari & -moz is for Firefox. Not always, but sometimes you may have styling differences across browsers without them.

Since there is currently no selection option for opening the links in a new page, you can use a workaround method by doing this:

1) Leave the ‘Button Link’ option empty.
2) In the ‘Button Text’ area, use the following code with your own link and text: <a href="http://yourcustomlink.com/" target="_blank">Your Button Text</a>
3) Add the following CSS to your custom css area.
```
.feat4 .ccs-button a {
    color: #FFF;
}
.feat4 .ccs-button a:hover {
    background: none;
    border-bottom: none;
}
```
This should solve your problems, let me know if you run into trouble.
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.