Need help with creating columns in widget?

[LaunchPad777]

Hi there,

Just started using Parallax Pro for client site....

Need to create 3 columns in one of the Home Section widget areas.
Essentially there will be an image at the top of each column with some text below each image...similar to the portfolio view you see in some parallax sites....

This option isn't offered out of the box for Parallax Pro, so I need help creating it.

Can this be done using a table like one would do in the Page content area (using something like Ultimate TinyMCE Plugin)?
Or is there a way of creating the table effect using CSS?

If so what does the CSS look like?

Thanks for your help...
Regards
Greg

http://www.test.gregcooksley.com

[Marcy]

This tutorial shows you how to do what you want in two different ways.

Add Featured Widgets Inline Anywhere In Genesis

The first method is easier because you already have your full-width widget area, so you don't need to edit the functions.php.
Brad calls his widget area .category-top. Yours will be called .home-section-1 or .home-section-3 (whatever you choose)

Brad uses 4 widgets, so where he has

.category-top .widget {
float: left;
padding: 0 2.8%;
width: 25%;
}

You would want

.home-section-1 .widget {
float: left;
padding: 0 2.8%;
width: 33.333333333333%;
}

(This is later in the tutorial)
If using 33% is too wide, you can try a slightly smaller number.
Also you may need to add a new image size to your functions.php if you are using the Genesis Featured Page or Posts widgets. It's this line in Brad's tutorial

/** Add new featured image sizes */
add_image_size( 'featured-category', 100, 75, TRUE );

You will need to change the size to fit your image.

If you're using a text widget, you can adjust the image size yourself. Also if you need to use an editor for your text widget, I like using Black Studio TinyMCE Widget for clients.

And if you really choose to use a table, you can use Ultimate TinyMCE Plugin, but your page may not be responsive then.

---

Marcy | Amethyst Website Design | Twitter

[LaunchPad777]

Thanks Marcy,

Really appreciate you providing so much information....

If I needed to apply this to a single text widget within the main .home-section-1 area, and not to the entire Home Section......

I looked at the code using Firebug and this looks like the right area:
<section id="text-6" class="widget widget_text"> (this shows up on the left)

But under Style on the right I can't seem to isolate the code that needs to be targetted....
What would I need to change?

If I changed the code and added id="text-6" as follows:

.home-section-1 .widget id="text-6"{
float: left;
padding: 0 2.8%;
width: 33.333333333333%;
}

Thanks again...
Regards
Greg

[Marcy]

OK. You said three columns.

I am recommending that you install three text widgets in your home-section-1 and spread your content yourself between them.

Then the code will work.

Add the three text widgets and the content you want, and then I can look at it.

---

Marcy | Amethyst Website Design | Twitter

[LaunchPad777]

Hello Marcy,

Okay I added the 3 text widgets (using Black Studio TinyMCE Widget) and added the image and content for each one.
Also added the complete code from Brad and only changed this section:

.home-section-1 .widget id="black-studio-tinymce-4"{
float: left;
padding: 0 2.8%;
width: 33.333333333333%;
}
However, that didn't produce the required effect.....

As a test, I then also added a further text widget with just 3 images to see if that would work.
And changed the code:

.home-section-1 .widget id="black-studio-tinymce-6"{
float: left;
padding: 0 2.8%;
width: 33.333333333333%;
}

Still no change....

Any ideas
Regards
Greg

[Marcy]

First:
Right now in home-section-1, I count 9 text widgets (some are Black Studio text widgets), but there are 9.
In home-section-2, there are 2 text widgets, and in home-section-3, there is one text widget.

Which section are you working on?

If you are trying to put 9 text widgets in home-section-1 and float them three across, Brad's code should still work for you.

Second:
Do not add that "id=....."to the code; you are breaking it.

Just add the code below to your style.css just before the first @media section, and then let me look at it.

.home-section-1 .widget {
float: left;
padding: 0 2.8%;
width: 33.333333333333%;
}

---

Marcy | Amethyst Website Design | Twitter

[LaunchPad777]

Hi Marcy,

This query is only for ONE of the widgets in home-section-1....so only trying to target one widget....
The reason is that there is a variety of content in home-section-1 and each type of content needs to be formatted in a seperate widget. See screenshot http://screencast.com/t/DZCCDYweY

So the first widget contains content and and several images....
The second widget is the one we are dealing with here and it needs the 3 widgets to be horizontally arranged next to each other.

So how do I target the right widget? I thought you had to try and target using the "id"???

Will the code you mention above target the correct widget?
Regards
Greg

[Marcy]

It wasn't clear that this is what you asked in your OP, but I will try to help you.
You do need to target each specific id, if they all have different widths. But you do it with #

So the first widget would be:

.home-section-1 .widget #black-studio-tinymce-2 {
float: left;
padding: 0 2.8%;
width: 100%;
}

Then you need:

.home-section-1 .widget #black-studio-tinymce-3,
.home-section-1 .widget #black-studio-tinymce-4,
.home-section-1 .widget #black-studio-tinymce-5 {
float: left;
padding: 0 2.8%;
width: 33%;
}

This should give you something close to what is in your image.
If you're using plain text widgets, the code would be:

.home-section-1 .widget #text-6 {
float: left;
padding: 0 2.8%;
width: 100%;
}

.home-section-1 .widget #text-7,
.home-section-1 .widget #text-8,
.home-section-1 .widget #text-9 {
float: left;
padding: 0 2.8%;
width: 33%;
}

You will need to adjust the ids and widths to match what you want.

---

Marcy | Amethyst Website Design | Twitter

[LaunchPad777]

I do apologise Marcy,

This parallax is a huge learning curve....but no excuse!

Just confused as to whether I need to keep Brad's code in place and insert the code above into it OR whether to delete his code?

[Marcy]

Just try the code above. It's Brad's code, but more specific for what I could see on your site.

---

Marcy | Amethyst Website Design | Twitter

[LaunchPad777]

Hi Marcy,

Ok removed Brad's code and just inserted the code above.....

Unfortunately it is not working.

[Marcy]

I can't see any code added. Is it still there? I need to see it with the code.

---

Marcy | Amethyst Website Design | Twitter

[LaunchPad777]

Hi Marcy,

I had added the code above the @media section as you had instructed...

Moved it now to the end of the last code in the editor.

However, just now, Andrea on another post mentioned this:
http://my.studiopress.com/tutorials/content-column-classes/

So I started playing around with it and got 3 images in a row on another text widget...
The only thing is that I have to find out how to accurately format the text because all the text in the design is justified on both sides.....

It's almost 1am here in South Africa so I'm going to hit the sack....feels like my eyes are square...
Thank you for your help.
Highly appreciated.
Regards
Greg

[Marcy]

Hi, Greg,

OK. It's my fault; I'm really sorry. I used the wrong selectors in the first place and then kept repeating my mistake. :-/
Chalk it up to me looking at it with tired eyes in the first place.

You can use column classes, but what we are doing is putting each text widget into it's own column (using the column class code basically.) If you want all your images and text in one big text widget, I can write that for you, but I thought it would be easier if you have a different widget for each set of image and text. I think it will make it easier for you to edit, but let me know.

In the meantime, this will work for what you have.
You can leave the code at the end where you have it, but this is what you need:

.home-section-1 .widget#black-studio-tinymce-2  {
    float: left;
    padding: 0 2.8%;
    text-align: left;
    width: 100%;
}
.home-section-1 .widget#black-studio-tinymce-3,
.home-section-1 .widget#black-studio-tinymce-4,
.home-section-1 .widget#black-studio-tinymce-5  {
    float: left;
    padding: 0 2.8%;
    text-align: left;
    width: 33%;
}

Notice how the selectors are run together now with no space between .widget and #black-studio-tinymce.

Right now your text should be centered.
I added a text-align: left to each section of code, in case you wanted that, but that will affect the titles too, so let me look at it once you correct the code

---

Marcy | Amethyst Website Design | Twitter

[LaunchPad777]

Thanks Marcy,

No problem at all.....last night I eventually couldn't see the wood for the trees either...

Tried the code but still not working I'm afraid....the three widgets remain one on top of the other.
I wonder if it is not part of the parallax code somewhere.

I have left the code and widgets in place for you to look at...

Regards
Greg

[Marcy]

Greg,
I think you're missing a close bracket in your style.css.
At the end, you have this code:.
Find your first line below where you added the HOME SECTION 2
home-even .home-section-2 widget-area {
and add a } on the line below so it looks like this

home-even .home-section-2 widget-area {
}

/* Adding columns for product areas HOME SECTION 2 */
home-even .home-section-2 widget-area {

#column1-wrap {
    float: left;
    width: 200px;
}
#column1{
    background-color: #FFFFFF;
    margin-right: 200px;
}
#column2{
    background-color: #FFFFFF;
    float: left;
    width: 550px;
    margin-left: -200px;
}
#clear{
    clear: both;
}

.home-section-1 .widget#black-studio-tinymce-2  {
    float: left;
    padding: 0 2.8%;
    text-align: left;
    width: 100%;
}
.home-section-1 .widget#black-studio-tinymce-3,
.home-section-1 .widget#black-studio-tinymce-4,
.home-section-1 .widget#black-studio-tinymce-5  {
    float: left;
    padding: 0 2.8%;
    text-align: left;
    width: 33%;
}

I think that's all that's wrong now; that's why I could never see the code you added. This time I copied your style-sheet and tried it myself, and it's working for me.
Add all your images and text, and I'll look at it again.

---

Marcy | Amethyst Website Design | Twitter

[LaunchPad777]

Hi Marcy,

Thanks so much.....it worked...

Need to figure out what padding and or margins should be inserted to get it all lined up as per the
screenshot http://screencast.com/t/DZCCDYweY

In the meantime, I changed text-align: left; to text-align: center;

I really appreciate you sticking with this and finding the solution.

Regards
Greg

[Marcy]

Great! And thank you for sticking too!

If you change the 33% to 33.333333333% it will line up better at the right edge with the full-width widget.

Here are some things to think about. It's much easier to work with images that are all the same size because then they line up by themselves.

Yours are:
brain - 127x106px
heart - 128x170px
hand - 125x189px

If you used an image editor to add them all centered in a background that was at least 128px x 189px, then they would all line up as in your screen shot.

The padding is controlled by the line:
padding: 0 2.8%;

The 0 is the top and bottom padding - above the images and below the text; you can change the 0 to 40px or smaller. The 2.8% is the left and right padding - you can make it smaller or larger and also change it to px, if that is easier for you.

You also might want a background-color on the entire .home-section-1 to make it look like the screen shot

.home-section-1 {
    background-color: #fff;
}

All the best, Greg!

---

Marcy | Amethyst Website Design | Twitter

[LaunchPad777]

Thanks Marcy,

Good point about the image size...changed them all to one size and it's sorted...

Is there a way of controlling the padding and/or the margins under the text directly to ensure that each "text Box" (for want of a better word) is the same height?

Tried getting it right by inserting <p></p> but it is not precise.

As far as the background colour is concerned, if I change that parameter, it makes the whole background go white from left to right....you will notice in the screencast that the white area is meant to be fixed width and that there is a grey background behind the website...... http://screencast.com/t/gcho9uhP

I was able to control the width of the widget area by using this:
/* Change background colour to white HOME SECTION 1 */
.home-section-1 #black-studio-tinymce-2.widget {
background-color: #FFFFFF;
}
.home-section-1 #black-studio-tinymce-3.widget,
.home-section-1 #black-studio-tinymce-4.widget,
.home-section-1 #black-studio-tinymce-5.widget {
background-color: #FFFFFF;
}
BUT, that still leaves a gap between the Header and the Home Section that isn't white.

Any ideas on how to get the text and other content to be a specific width?

Thanks again,
Regards
Greg

[Marcy]

OK, you're right about the background color on .home-section-1 covering the entire area.

This will do it though:

.home-section-1 .wrap {
	background-color: #fff;
}

That will be easier than trying to make the actual widget heights the same.
If you want the white background behind .home-section-2 to be the same width, and not full width too, you would use. You can add as many sections as you need.

.home-section-1 .wrap,
.home-section-2 .wrap {
	background-color: #fff;
}

And then you may need to remove the background-color on .home-even too, but that will affect the background-color width of your other home-sections too.

You shouldn't need a background-color on the widgets themselves then, but it doesn't hurt to keep them.

As for the gap between the header and .home-section-1, that is part of Parallax Pro.
You need to find this section

.home-even, 
.home-odd {
    clear: both;
    font-size: 28px;
    overflow: hidden;
    padding: 190px 0 200px;
    text-align: center;
}

and edit the padding line. 190px is at the top and 200px is at the bottom, and it will affect each of your home sections.

I believe if you leave the section above, and add this new section right below the section above, that you will be able to edit the padding on only .home-section-1 until you get what you want. First work on adjusting the top padding, and then the bottom.
.home-section-1 {
padding: 190px 0 200px;
}

But that's probably a question for another thread though.

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts