Linkable Block Images

[michaelw]

On the image for the blocks on the landing page, I put this code in the first box on the left per your instructions

<a href="your site link" rel="nofollow"><img src="your image url" /></a>

And updated with my info as follows:

<a href="http://funfordads.com/wp-content/uploads/2012/07/Transformational-Consulting-Logo.jpg" rel="nofollow"><img src="http://www.fshstrategy.com" /></a>

However, it is coming up blank. You can go to http://www.funfordads.com to see what I mean. Any ideas?

[Towfiq I.]

Go to Appearance> Editor and select “index.php” and replace this line:

<?php echo of_get_option('block1_textarea'); ?>

with this:

<a href="http://funfordads.com/wp-content/uploads/2012/07/Transformational-Consulting-Logo.jpg" rel="nofollow"><img src="http://www.fshstrategy.com" /></a>

[michaelw]

Thank you, however it is still not working. Go to http://www.funfordads.com and you will see what I mean. It is doing the same thing, where it is clear that photo belongs there, but nothing is showing. Any idea if the code might be slightly incorrect?

[Towfiq I.]

try this:

<a href="http://www.fshstrategy.com" rel="nofollow"><img src="http://funfordads.com/wp-content/uploads/2012/07/Transformational-Consulting-Logo.jpg" /></a>

[michaelw]

Okay, the link work if you click where the picture should be, however the picture is not showing up….any more ideas? I can’t figure it out.

[Towfiq I.]

its there, but its being cutoff because the image is huge. Add this to your stylesheet:

.mid_block_content img{width:200px; height:auto;}

its better if you add 200×120 px images to those blocks.

[michaelw]

Thank you, that worked!!! Which lines do I replace for the other 3 boxes?

[michaelw]

Scratch that, I figured it out 😉

[michaelw]

One more question, on the home page right under my blocks is a block that says “Leadership Training” with a description. Where is that coming from and how do I remove it?

[Towfiq I.]

Its a widget, you added from Appearance> Widgets.

[michaelw]

Got it, thanks. Somehow it wiped out several other widgets, but that is ok.

Is there now a way to add text under the images? I am moving away from the slider on the landing page and just want a static page with the four images as portals and text under the images.

[michaelw]

Also, maybe some text in the middle between the header and the blocks? Is there a way to also add a text box there?

[Towfiq I.]

Add this to your stylesheet:

body .mid_block_content{height:290px;}

body .midrow_blocks{height:300px;}

and go to Appearance>Zenon Options> Slider and select “No Slider”

[michaelw]

Thanks. I had two requests, which one was this in reference to? To be clear, here are the two things I need:

1. Is there a way to add text under the images? I am moving away from the slider on the landing page and just want a static page with the four images as portals and text under the images.

2. Is there a way to add text in the middle between the header and the blocks? Is there a way to also add a text box there?

Please respond to both in the same numbered order if you don’t mind. I am a simple thinker ;-)))

Thanks!!!

[Towfiq I.]

1. Remember how you replaced these in the index.php with the image code? put theme back on before your image codes.:

<?php echo of_get_option('block1_textarea'); ?>

<?php echo of_get_option('block2_textarea'); ?>

<?php echo of_get_option('block3_textarea'); ?>

<?php echo of_get_option('block4_textarea'); ?>

2. Add these line to your index.php:

<div class="midrow_blocks">

<p>Your text here......</p>

</div>

after this line:

<!--SLIDER END-->

[michaelw]

Thank you. I did both, here are my new issues 😉

1. on the bottom blocks, I actually added that script AFTER the script I had put in earlier so that the words were below the image. The problem is the box is not big enough to show all the script. How do I make the 1-4 bottom blocks bigger?

2. This put in a nice big box in the middle of the page as requested. In fact, it is too big. How do I change the size of this box, and how do I change the font size within the box?

Thanks so much! you are awesome to be answering all these questions.

[Towfiq I.]

1. Add this to your stylesheet:

body .midrow_block{height:275px;}

2. First from index.php find these lines that you added:

<div class="midrow_blocks">

<p>Organizational health and growth can be hindered by the personal limitations of its leaders. Successful leaders must be trustworthy and serve as effective role models in team relationships. Since no one is perfect, personal transformation and continued personal development must happen first in the lives of the leaders. We believe that everyone is a leader at some level. We also believe that no team, business or organization will ever rise above the constraints of its own leadership. Participants will learn to remove personal and professional constraints so that personal transformation can occur, leading to healthy, trusting relationships. This training when implemented will result in positive change within companies as well as in family and personal settings.</p>

</div>

and replace this line:

<div class="midrow_blocks">

with this:

<div id="wlcm" class="midrow_blocks">

Then, add this to your stylesheet:

body #wlcm{height:100px!important; font-size:18px;}

[michaelw]

Thanks. I think you may not have seen my first question:

1. on the bottom blocks, I actually added that script AFTER the script I had put in earlier so that the words were below the image. The problem is the box is not big enough to show all the script, or all the script simply is not showing up. How do I make the 1-4 bottom blocks bigger or have the script show up?

[Towfiq I.]

when you add thee code, it will increase the blocks height.

[michaelw]

Thanks!

[michaelw]

If you could, please check http://www.funfordads.com. On the forth block on the right, Transformational Foundation, how do I get the logo centered and the words to begin under the logo, not beside it?

[Towfiq I.]

Add this to your stylesheet:

.midrow_block:nth-child(4) img{padding-left:10px;}

.slider_wrap .skew_bottom_big, .slider_wrap .skew_bottom_right{display:none;}

[michaelw]

Thanks. I put that in the bottom of the stylesheet, but it did not change anything. you can see it at http://www.funfordads.com, the last block on the right (Foundation).

Any other ideas? (see image)

[michaelw]

trying the resized image now…

[michaelw]

grrr…one more try…

[attachment=5252,311]