Joomla Templates Club 406,261 posts

[bkwhite Friend bkwhiteJoin date: September 2012Posts: 4Downloads:0Uploads:0 Thanks: 2]

#193552

Hey guys,

I am trying to edit the social media tiles that appear in the home-1 position. The only module that i find edits the social link module that appears at the top. This module has youtube, instagram, twitter amd facebook. what i want to do is edit the tiles that appear in home-1 to mirror these.

thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#517713

You mean these 3 modules: http://prntscr.com/2hh28p?

Titles of these modules are hidden by default, you can configure to show the titles, just go to Backend > Extensions > Module manager > filter with home-1 position. Then change title in each module.

[bkwhite Friend bkwhiteJoin date: September 2012Posts: 4Downloads:0Uploads:0 Thanks: 2]

#517793

Those are it….. The problem that i am having is that i cant edit the module itself. i want to change the g+ to instagram and then add another tile for my youtube channel. I have configured the twitter and i know how to change the facebooks tech specs ie, where it points but i want to change the fb logo itself, I want to change the look of the g+ tab and point it to my instagram page.

Thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#517853

Facebook and Google Plus modules in this template are custom HTML modules

Facebook:

In order to change logo or background, you create a new file named custom.css in /templates/ja_fixel/css folder. Then add code below to change the logo:


.facebook-like {
background: url(../images/fb-logo.png) no-repeat center center #34609d <<< change to your own logo
}


G-Plus:

We add code to display Google+ share button from Google Developer site: https://developers.google.com/+/web/share/. For detailed steps to get this code, please refer to this post. I think that you should create a new module for Instagram, instead of linking to Instagram page from Google+ module 🙂

1 user says Thank You to Saguaros for this useful post

1. bkwhite

[bkwhite Friend bkwhiteJoin date: September 2012Posts: 4Downloads:0Uploads:0 Thanks: 2]

#517866

i found the .google-plus stye in the template.css. I am looking for the .g-plus now and cant find that.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#518000

Sorry for above-mentioned text, I mean Google Plus, not g-plus:


.google-plus {
background: url(../images/google-plus-logo.png) no-repeat center 70px #d9563a
color: #fff
height: 300px;
padding: 220px 40px 40px;
text-align: center;
width: 300px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}


If you want to customize, I recommend you add your custom code into the file custom.css file.

[Author]

Posts