New positioning of icons on my homepage!

Hey,

What you need to do is make the image a background image of those titles. Right now it is just an image before the H2.

So instead make this https://www.traininglatitude.com/wp-content/uploads/2012/08/arrow_home1.png a background image of the H2 then add some left hand padding and align the image left and center.

Another method is to add padding to h2 there now and the do like margin-bottom:-20px on the img.

I would suggest adding a class to those h2 titles too so you can have more flexibility and control.

Great thanks for replying, I’m a bit of a beginner so if you wouldn’t mind could you supply me with the code to put into the widget as am not sure where to add code for h1, I know it might be in the CSS but need to know where to put it and what the code needs to say to make this happen, sorry to be a pain! but am not really a developer!

Thanks again,

Ian.

Hey,

I can give you an example of the code but not knowing where to find it in the css or where to edit the divs in the template will give you troubles.

Here is an example of what you would need to do though.

First find the source of the widget code and add a class to the h2 named arrow then erase the image above it.

Then add this to css

h2.arrow {
background:url(https://www.traininglatitude.com/wp-content/uploads/2012/08/arrow_home1.png ) no-repeat left center;
font-family: Museo500;
color: #1E1551;
font-size: 20px;
padding:0px 0px 0px 30px;
}

Ok this is the widget row code, how do I and where do I add the class? Really sorry to be a pain but very inexperienced with code!!

<div style="padding-left:40px;">[one_third position="left"]

        <img style="display: block;
     margin:6px left 0px !important;" src="https://www.traininglatitude.com/wp-content/uploads/2012/08/arrow_home1.png" alt=""/>
        <h2 style="text-align:left;">Project Management</h2>

        <p style="font:helvetica;">When we begin the 4:79 AM Template, we have decided SEO as the priority. All tests are made by double check strategy. Think outside of the box! In tristique ullamcorper nisi, vel vestibulum ipsum ornare sit amet Suspendisse pellentesque ornare <a href="#"> Learn more..</a></p>

        [/one_third]	

        [one_third position="center"]

        <img style="display: block;

            margin:6px left 0px !important;" src="https://www.traininglatitude.com/wp-content/uploads/2012/08/arrow_home1.png" alt=""/>

        <h2 style="text-align:left;">Relations Management</h2>

        <p>Training Latitude helps you build a strong alignment between IT outsourcing company and your business. We will help you plan a strategy that builds trust and alignment, and articulate your needs by creating clear and effective service delivery agreements... <a href="#"> Learn more..</a></p>

        [/one_third]	

        [one_third position="right"]

        <img style="display: block;

            margin:6px left 0px !important;" src="https://www.traininglatitude.com/wp-content/uploads/2012/08/arrow_home1.png" alt=""/>

        <h2 style="text-align:left;">Change Management</h2>

        <p>Effective organizational change initiatives are dependent upon several factors. One of the most critical success factors for any change initiative is strong project management and communication plans, which includes preparing people... <a href="#"> Learn more..</a></p>

        [/one_third]	

        </div>

Hey,

So erase this line for each widget

<img style="display: block;
margin:6px left 0px !important;" src="https://www.traininglatitude.com/wp-content/uploads/2012/08/arrow_home1.png" alt=""/>

Then add this to the h2

<h2 class="arrow">Relations Management</h2>

And then the CSS will be

h2.arrow {
background:url(https://www.traininglatitude.com/wp-content/uploads/2012/08/arrow_home1.png ) no-repeat left center;
font-family: Museo500;
color: #1E1551;
font-size: 20px;
padding:0px 0px 0px 30px;
text-align:left;
}

Yes! we are so close!!! you the man!! lol

Please can you check https://www.traininglatitude.com as I need the icons over to the left a bit more so they are next to the title!!! I have tried playing with padding figures but didn’t work, please can you tell me what I need to do to put icon to the left of the title?

Sorry, nearly there!!

Ian.

Okay try this for the CSS instead

body h2.arrow {
background:url(https://www.traininglatitude.com/wp-content/uploads/2012/08/arrow_home1.png ) no-repeat left center;
font-family: Museo500;
color: #1E1551;
font-size: 20px;
padding:0px 0px 0px 30px !important;
text-align:left;
}

No!! they’ve vanished now!!! did we need body right at the start? I think this may be why they have vanished!!!!! we were so close!

Ian.

Okay sorry try this.

.main-content-area h2.arrow {
background: url(https://www.traininglatitude.com/wp-content/uploads/2012/08/arrow_home1.png) no-repeat left center;
font-family: Museo500;
color: #1E1551;
font-size: 20px;
padding-left: 40px;
text-align: left;
line-height: 30px;
}

Hi, I’m afraid to say I still seem to be in a bit of a pickle, I have the icons back but cannot get them to move to the left of the titles? have tried anything i can thing of and really need to get this sorted asap if possible…..please help!!

Cheers,

Ian.

Hey,

That last CSS code I just sent should have done the trick. What’s the problem?

Both of you need to please start using code tags ??

Sorry Ipstenu I will do it from now on.

Hi,

Your solution didn’t solve the problem, and now my icons have vanished?? Really, really, really need a solution fast!!

Again the url in question is http;//www.traininglatitude.com

Please help as we were so close and now looks like we have failed!!

Thanks,

Ian.

You are doing something wrong. I do not see any CSS showing for that element. That needs to be somewhere in the CSS and if it doesn’t quite do the trick it needs a selector class because styles are being over ridden.

https://www.w3.org/TR/CSS2/selector.html

This needs to be in the CSS though

h2.arrow {
background: url(https://www.traininglatitude.com/wp-content/uploads/2012/08/arrow_home1.png) no-repeat left center;
font-family: Museo500;
color: #1E1551;
font-size: 20px;
padding-left: 40px;
text-align: left;
line-height: 30px;
}