Joomla Templates Club 406,261 posts

[pogostickcowboy2 Friend pogostickcowboy2Join date: April 2013Posts: 9Downloads:0Uploads:2 Thanks: 3 Thanked: 1 times in 1 posts]

#186915

Hi,
I see lots of postings of how to move map points around in the footer/contact us. I have figured out how to add a fourth map point to the maps. Unfortunately, adding a fourth point to the map means the third and fourth boxes overlap on the contact us form. Where is the size/height of this element stored in CSS so I can space these out?
Thanks

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#490462

You can find this module here

+ Go to admin -> Module Manager -> Our brand’s address custom html module

+ Custom output


<div class="brandinfo-wrap">
<div class="brandinfo"><a class="brand-point point-1" href="#">1</a>
<div class="brandinfo-main">
<h4>Brands at Buckingham, New York , America</h4>
<span>Tel: (84 4) 2212820, Mail: info@joomlart.com</span></div>
</div>
<div class="brandinfo"><a class="brand-point point-2" href="#">2</a>
<div class="brandinfo-main">
<h4>Brands at Buckingham, New York , America</h4>
<span>Tel: (84 4) 2212820, Mail: info@joomlart.com</span></div>
</div>
<div class="brandinfo"><a class="brand-point point-3" href="#">3</a>
<div class="brandinfo-main">
<h4>Brands at Buckingham, New York , America</h4>
<span>Tel: (84 4) 2212820, Mail: info@joomlart.com</span></div>
</div>
</div>


+ Css file

Open templates/ja_mendozite/css/template.css file


.contact-misc .brandinfo-wrap {
background-image: url(../images/contact-brands-map.png);
width: 462px;
height: 248px;
}

.contact-misc .brand-point {
background-image: url(../images/contact-brand-point.png);
width: 20px;
height: 50px;
color: #fff
line-height: 85px;
}

.contact-misc .brand-point:hover {
background-image: url(../images/contact-brand-point-hover.png);
}

.contact-misc .point-1 {
left: 85px;
top: 50px;
}

.contact-misc .point-2 {
left: 265px;
top: 30px;
}

.contact-misc .point-3 {
left: 350px;
top: 10px;
}


2 users say Thank You to Ninja Lead for this useful post

1. funci
2. diringer

[pogostickcowboy2 Friend pogostickcowboy2Join date: April 2013Posts: 9Downloads:0Uploads:2 Thanks: 3 Thanked: 1 times in 1 posts]

#490960

Thanks but those areas only address the positions of the map point in the footer, not the overlapping rows in the Contact Us form table on the right.

I have no issue adding/moving map points.

What I need is to be able to increase the height of a portion of the Contact Us module so I can add a fourth brand point in the right hand table to match the four brand points on the map. In bottom right corner of the photo attached you see the row 4 obliterates row 3. So how can I insert a fourth or fifth row to align with any extra points I add to the map?

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#491000

My solution may help you out :

Open templates/ja_mendozite/css/template.css file

+ Add new script


.contact-miscinfo .brandinfo-wrap .point-3 + .brandinfo-main {
top: 100px;
}


+ Change css file

From


.contact-miscinfo .brandinfo-wrap .point-1 + .brandinfo-main {
top: 40px;
}

.contact-miscinfo .brandinfo-wrap .point-2 + .brandinfo-main {
top: 100px;
}

change to

.contact-miscinfo .brandinfo-wrap .point-1 + .brandinfo-main {
top: 0px;
}

.contact-miscinfo .brandinfo-wrap .point-2 + .brandinfo-main {
top: 50px;
}

1 user says Thank You to Ninja Lead for this useful post

1. pogostickcowboy2

[Author]

Posts