Please help – Completely stumped by this!

[LaunchPad777]

Hello everyone,

I'm converting a existing html website to Genesis using the free Diligent child theme...

I need to get the content set out in the same way on the Home page - with the image and text (red) on the right hand side.

When I research this, it appears that using divs is the way to go rather than using tables.
But I have spent several hours trying to get it right but it is very very frustrating!!!

This is the existing website: http://www.optometristsjohannesburg.co.za

This is the new test site (just started): http://www.optom.saturncooling.co.za/

Please tell me how to use divs to do this...

Your help will be appreciated.
Regards
Greg

http://www.optom.saturncooling.co.za/

[Christoph]

Hi Greg,

since the text is associated to an image, I would probably try to get it in as a caption of the image.
You can assign divs and classes to the caption, so styling shouldn´t be too hard.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[LaunchPad777]

Hi Christoph,

But that is what I am battling with....how do I use divs and classes? I literally spent a couple of hours trawling through the internet looking for solutions....nothing I tried worked.

Any ideas or links to great tutorials?

Thanks
Greg

[Christoph]

Hi Greg

you can write the divs and classes right into the caption:

<div class="name-of-red-text-class">your text in red<div>
<div class="name-of-black-text-class">your text in black with links and whatever else</div>

Then go to your style.css and add those classes with the styling you want.

.name-of-red-text-class {
        color: red;
and whatever else you want to style.
}

.name-of-black-text-class {
     color: black;
and whatever else you want to style.
}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[LaunchPad777]

Hi Christoph,

Firstly thanks so much for providing the information...

I have followed what you posted and inserted the divs and classes as you mentioned.
But for some reason I am not getting the desired result.

This is what I put in:

.name-of-red-text-class {
        color: red;
        float: right;
        text-align: center;
}

.name-of-black-text-class {
     color: black;
     float: right;
     text-align: center;
}

Is there something that I'm missing?
I need to get the divs over to the right hand side - is the float:right the correct code?

Do you have to specify anything more for the divs?

http://www.optom.saturncooling.co.za/

Again thanks..

Regards
Greg

[Christoph]

Hi Greg,

try it as Caption of the image and you won´t have to worry about positioning the text.
You are using it as regular text underneath the image.

http://www.wpbeginner.com/beginners-guide/how-to-add-caption-to-images-in-wordpress/

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[LaunchPad777]

Hi Christoph,

Sorry to keep bugging you...

Okay I followed your instruction and added the text within the divs as the Caption as follows:

<div class="name-of-black-text-class">Becker & Bekker stocking LOW VISION DEVICES  - Get Help NOW!</div>
<div class="name-of-red-text-class">Your child's vision can determine his/her learning & development!</div>

<div class="name-of-red-text-class">Improving how your child sees can have a dramatic effect on their lives.</div>

<div class="name-of-red-text-class">It's vital to realise that visual problems can contribute significantly to learning/reading disabilities. In some cases it can be mistaken or misdiagnosed as a learning disability.</div>

<div class="name-of-red-text-class">TAKE ACTION TODAY - MAKE AN APPOINTMENT NOW!</div>

<div class="name-of-black-text-class">JUST RELEASED</div>

<div class="name-of-black-text-class">Hoya BlueLight coatings for your glasses...</div>

<div class="name-of-black-text-class">Get relief from eye strain and fatigue
Now.</div>

And the following to the stylesheet:

.name-of-red-text-class {
        color: red;
        font-weight: bold;
        text-align: center;
}

.name-of-black-text-class {
     color: black;
     font-weight: bold;
     text-align: center;
}

When I first add the image to the page it shows up correctly on the right hand side but without the text being red or being bold.

But as soon as I Update the page it loses the changes - the image appears on the left without the caption. All the text is below the image (not as caption) but now with correct formatting red and bold text.

Do you think there is something in the theme that is breaking things?
Or am I doing something incorrectly?

Appreciate your help.
Regards
Greg

[Christoph]

Hi,

the caption has a caption id that you have to use in front of the css classes.
You can find it when you look at it in the Inspector or when you switch to text view in the editor.

On my test site the caption id is attachment_11 so the css looks like this:
#attachment_11 .name-of-red-text-class {

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[LaunchPad777]

Hi Christoph,

Again, thanks for your help...

Unfortunately the code didn't work at all - no matter what I did. It is probably because I don't understand how to use divs and classes properly.

In the end, I just added the plain text into the caption and managed to add the red colour in the WP page editor. It has not created the desired effect....

Again, thanks so much.
Regards
Greg

[Author]

Posts