[LaunchPad777]

Hi Peter,

Managed to find this code:
#black-studio-tinymce-2 .textwidget {
margin-left: 100px;
margin-right: 100px;
}

It enabled me to insert margins on each side of the content....so far so good.....applying to other widgets.

Does that look similar to what you were suggesting?
Regards
Greg

[LaunchPad777]

Hi Peter,

Yes, the idea was to use empty columns to force the width of the content to be restricted.....

In your example above, if the content is in a widget - do you target the widget?

Regards
Greg

[LaunchPad777]

Hi Andrea,

You gone AWOL on me.....lol

Regards

Greg

[LaunchPad777]

Marcy,

You are a star....thanks so much for your help.

Will let you know what the client says!

Best regards

Greg

[LaunchPad777]

Hello there,

Marcy very kindly assisted me with resolving this on another thread....

This is the correct code to change the background color of the Home Section 1 to white:
.home-section-1 .wrap {
background-color: #fff;
}

Thanks Marcy
Regards

Greg

[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

[LaunchPad777]

Hey Andrea,

Thanks - yes that aligns the text a bit better....
What would need to be changed to square up the block of text the way it is in the screenshot?

http://screencast.com/t/z4FRX66PYJ

So that the edges of the text are in line with the edges of the image above it and justified?

Regards
Greg

[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

[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

[LaunchPad777]

`<div class="one-fourth first"><img alt="" src="http://www.test.gregcooksley.com/wp-content/uploads/2014/02/GLASS-CLEANER-385h.jpg" width="185" height="385" /></div>
<div class="three-fourths"><img alt="" src="http://www.test.gregcooksley.com/wp-content/uploads/2014/02/Product-panel-window-cleaner-510.jpg" width="510" height="124" ></div>
<div>Planet Wash keeps finding ways to make the world a cleaner place. By using highly innovative nano and colloidal technology in our Window Cleaner, we’ve created a product that ensures far less repeated window cleaning. Natural plant and vegetable oils are blended to create particles so small they can penetrate dirt easily and quickly. With the combination of colloidal processes, a thin hydrophobic film is formed and dirt is repelled, keeping windows cleaner for much longer. Hydrocarbon molecules align with each other and bond with the glass to form a strong film. Dirt is encapsulated and suspended until it is returned safely to the environment and naturally bio-degraded. Yet another cleaner, greener, smarter product from the Planet Wash family.</div></div>

[LaunchPad777]

<div class="one-fourth first"></div>
<div class="three-fourths"></div>
<div>Planet Wash keeps finding ways to make the world a cleaner place. By using highly innovative nano and colloidal technology in our Window Cleaner, we’ve created a product that ensures far less repeated window cleaning. Natural plant and vegetable oils are blended to create particles so small they can penetrate dirt easily and quickly. With the combination of colloidal processes, a thin hydrophobic film is formed and dirt is repelled, keeping windows cleaner for much longer. Hydrocarbon molecules align with each other and bond with the glass to form a strong film. Dirt is encapsulated and suspended until it is returned safely to the environment and naturally bio-degraded. Yet another cleaner, greener, smarter product from the Planet Wash family.</div></div>

[LaunchPad777]

Andrea,
If you look at the screenshot again....you will see what I'm trying to implement...

The text is all nicely justified and sits neatly under the 2nd image....

Any advice..

Regards
Greg

[LaunchPad777]

Hey Andrea,

Yes just scroll down a bit....under words "3 Images"....

It's almost 1am here so I lost mine about 4 hours ago....lol

[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

[LaunchPad777]

Hi Andrea,

Okay played around with the columns and it seems to be working now.....
Used the two column option, split one-fourth and three fourths....

Well at least I'm getting the two images up alongside each other....and the content is there too...
Just can't seem to be able to correctly format the content...

What I need is for the text to be justified...

[LaunchPad777]

Hi Marcy,

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

Unfortunately it is not working.

[LaunchPad777]

Hi Andrea,

I did look at that and tried Custom Classes but for some reason it didn't work.....I'm not sure if it's because of the parallax theme...
At the time, I thought it didn't work because I was trying to use it in a Widget....
Will it work inside of a widget?

If it does work inside of a widget, how do you target specific column sizes - say 200px and 550px (for 2 column setup)?

Regards

Greg

[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?

[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

[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

[Author]

Posts