Joomla Templates Club 406,261 posts

[vividphoto Friend vividphotoJoin date: July 2007Posts: 7Downloads:0Uploads:4 Thanks: 6]

#184140

Hi

1. I would like to change the size of the ja-footer that holds ja-copyright info. The spacing can be seen in copyright.png.
Is it possible to change it in less file rather then in css. It’s lost when less is converted to css…

2. There is some weird padding on the bottom of the social icons module when resizing my browser – image 1.png and 2.png. On my site I have only 2 instead of 4 social icons (as per demo site). I would like to know if this can be fixed so I don’t have that empty space below the module.

My demo site is here

Thanks

---

Attachments:

1. 
2. 
3. 

[clrmedia Friend clrmediaJoin date: October 2007Posts: 102Downloads:18Uploads:8 Thanks: 17 Thanked: 11 times in 1 posts]

#480359

1. Put the css information in custom.css. This is not overwritten when you compile the LESS.
2. I converted the social media module to a table to keep the four sections in a square. I changed the buttons around, dropping two and adding two new ones.

The html in the module is:


<table class="social-table">
<tbody>
<tr>
<td style="valign: top;"><a class="btn-icon btn-small icon-facebook" title="Facebook" href="#">Facebook</a>
</td>
<td style="valign: top;"><a class="btn-icon btn-small icon-twitter" title="Twitter" href="#">Twitter</a>
</td>
</tr>
<tr>
<td style="valign: bottom;"><a class="btn-icon btn-small icon-gallery" title="Gallery" href="index.php?option=com_content&view=article&id=4&Itemid=110">Gallery</a>
</td>
<td style="valign: bottom;"><a class="btn-icon btn-small icon-contact" title="Contact Us" href="index.php?option=com_content&view=article&id=7&Itemid=113">Contact Us</a>
</td>
</tr>
</tbody>
</table>


The css I used, which changed the at rest background from white to dark grey, is:


.btn-small {
height: 106px;
}
.icon-gallery {
// background: url('../images/ico/gallery.png') #d4c0a6
background: url('../images/ico/gallery.png') transparent;
margin: 0;
background-position: left bottom;
}
.icon-facebook {
margin: 0;
background-color: transparent;
background-position: left bottom;
}
.icon-gallery:hover,
.icon-gallery:focus,
.icon-gallery:active {
background-color: #da5834
background-position: left bottom;
}
.icon-twitter {
background: url('../images/ico/twitter.png') transparent;
margin: 0;
background-position: left bottom;
}

.social-bg {
background: transparent;
}
.icon-contact {
background: url('../images/ico/contact.png') transparent;
margin: 0;
background-position: left bottom;
}
.icon-contact:hover,
.icon-contact:focus,
.icon-contact:active {
background-color: #5f8f29
background-position: left bottom;
}
.social-table,
.social-table tr,
.social-table td {
padding: 0px;
margin: 0px;
cell-padding: 0px;
color: #ffffff
border: 0px;
}
.social-table tr {
height: 50%;
}
.social-table td {
width: 50%;
border: 2px #000000 solid;
background-color: #636363
}
.social-table {
width: 231px;
}


2 users say Thank You to clrmedia for this useful post

1. HeR0
2. vividphoto

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#480399

Hi Vividphoto
The @clrmedia‘s suggestion is useful for you @vividphoto . You should add override css rule into custom.css file.

Regards

1 user says Thank You to HeR0 for this useful post

1. vividphoto

[vividphoto Friend vividphotoJoin date: July 2007Posts: 7Downloads:0Uploads:4 Thanks: 6]

#480537

Thank you very much. I was going crazy…
The solution is great. It works like a charm.

Right after posting I started playing with the social module “Advanced Options”. I noticed that setting the “Module Style” to “none” does an ok job too. I’m still trying to understand all the new features and options. But I see that I might have to sit down and write a template for Joomla 3.0 to really get it.

Cheers

[Author]

Posts