Links on Grid items

Professional Joomla social template with metro design and JomSocial extension support.
Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Mon Sep 16, 2013 1:30 pm
Reply with quote
Report this post
I just love this template, but i want to use it without JomSocial.

Can i add a background image to module then assign it to grid position and some how have a link on it .... a link to for example a joomla article, k2 article or a webshop product or category?

If so, how do i add a link to a grid position?

If this is possible i will definitly going to use this template.

Thanks in advance for any help.
User avatar
Senior Boarder

GK User
Mon Sep 16, 2013 5:24 pm
Reply with quote
Report this post
Hi,

Of course it is possible :)

You have to just do the following things:

1) Create a new instance of Custom HTML module
2) Set the module class suffix as "gkPhoto"
3) Set the background image as your image from the Joomla! media manager
4) Put in the content the links structure:

Code: Select all
<a href="YOUR LINK">YOUR INVISIBLE LINK TEXT</a>


The link will be cover the whole image :)
User avatar
Administrator

GK User
Tue Nov 26, 2013 4:52 pm
Reply with quote
Report this post
what is "your invisible link text" ... i had use this code.. the text link is appear..
??
User avatar
Junior Boarder

GK User
Wed Nov 27, 2013 2:32 pm
Reply with quote
Report this post
It can be any text. If you will follow my instruction carefully you should achieve this text hidden.
User avatar
Administrator

GK User
Thu Nov 28, 2013 4:45 am
Reply with quote
Report this post
hi, i had follow the instruction... the text is still appear and link only cover the text ..is there other ways to do that?
User avatar
Junior Boarder

GK User
Thu Nov 28, 2013 11:03 am
Reply with quote
Report this post
Please show me a page where you have implemented it.
User avatar
Administrator

GK User
Mon Dec 02, 2013 8:45 pm
Reply with quote
Report this post
I have the very same problem. My image dimensions are: 1280 * 320, desktop size 4 * 1 (exact ratio as for image) and I've always got a problem somewhere. Tries with background image like in this tread - please see the attachment (bottom - left position). I also tried without background images and with inserted image direct into article and several other options (lost the whole day) and it is not working. Always one or more images are not cropped but resized so if width is O.K. then height is wrong or vice versa.

If I understand the whole concept correctly if the module 4*1 (desktop) is shown in 1*1 in phone the background image couldn't resize it should crop somewhere?!

I'm using a module from your side with bluap template on Joomla 3.2

Thank you
User avatar
Senior Boarder

GK User
Tue Dec 03, 2013 9:22 am
Reply with quote
Report this post
Please provide me an URL to website with the described problem.
User avatar
Administrator

GK User
Tue Dec 03, 2013 10:13 am
Reply with quote
Report this post
The link is: http://senseview.mobi/test.html

The problem is even more visible (for more grid elements) on mobile view

Thank you
User avatar
Senior Boarder

GK User
Tue Dec 03, 2013 4:15 pm
Reply with quote
Report this post
Your problem was connected with two things:

1) You forgot to add space at the beginning of the module suffix.

2) You have used a CSS class unavailable in your template. Please put the following code at the end of the gk.stuff.css file:

Code: Select all
/* Photos */
.gkPhoto {
        background-size: cover;
        background-position: center center;
        height: 100%;
        position: absolute;
        width: 100%;
}
.gkPhoto > a {
        height: 100%;
        opacity: 1; filter: alpha(opacity=100);
        position: absolute;
        text-indent: -9999px;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -ms-transition: all .3s ease-out;
        -o-transition: all .3s ease-out;
        transition: all .3s ease-out;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        width: 100%;
}
.gkPhoto > a:hover {
        opacity: 0.85; filter: alpha(opacity=85);
}
.gkPhoto > h3,
.gkPhoto > h4 {
        color: #fff;
        font-size: 36px;
        font-weight: 300;
        line-height: 1.1;
        padding: 30px 40px;
}
.gkPhoto > h4 {
        font-size: 24px;
        padding: 20px 30px;
}
.gkPhoto > h3 > a,
.gkPhoto > h4 > a {
        color: #fff;
}
.gkPhoto > h3 > a:active,
.gkPhoto > h3 > a:focus,
.gkPhoto > h3 > a:hover,
.gkPhoto > h4 > a:active,
.gkPhoto > h4 > a:focus,
.gkPhoto > h4 > a:hover,
.gkPhoto > .gkTextBlack > a:active,
.gkPhoto > .gkTextBlack > a:focus,
.gkPhoto > .gkTextBlack > a:hover {
        color: #db4a37;
}
.gkPhoto > h3 strong,
.gkPhoto > h4 strong {
        display: block;
        font-weight: 500;
}
.gkPhoto > .gkTextBottom {
        bottom: 0;
        position: absolute;
}
.gkPhoto > .gkTextTop {
        position: absolute;
        top: 0;
}
.gkPhoto > .gkTextBlack,
.gkPhoto > .gkTextBlack > a {
        color: #272727;
}
.gkPhoto {
opacity: 1; filter: alpha(opacity=100);
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.gkPhoto:hover {
opacity: 0.7; filter: alpha(opacity=70);
}
User avatar
Administrator

GK User
Wed Dec 04, 2013 10:12 am
Reply with quote
Report this post
Thank you

It's working now :-)
User avatar
Senior Boarder

GK User
Mon Jan 06, 2014 9:44 pm
Reply with quote
Report this post
Hi, I'm sorry, but I do not understand.
I installed the template today, I got plain this.
I have two simple questions to Grid that an answer I never found. (I read a topic (M) Social Configuration ....)

1. How and where do I change the predefined Grid's icons links to links on predefined demo K2 articles?
From this (after plain instalation): http://img853.imageshack.us/img853/6268/sobn.jpg to this (for example your demo): http://imageshack.us/a/img24/7770/e5yuz.jpg.
2. How and where I can change link from "#" on my personal link for the two icons of the Grid for Twitter and Facebook? (for example is it in my first screen)

Thanks a lot.
User avatar
Junior Boarder

GK User
Tue Jan 07, 2014 10:27 am
Reply with quote
Report this post
Hi again,

EDIT. First is done. I have now all OK, with links from Grid to Joomla articles and K2 articles....
But, second "problem" with change my personal links to Twitter and FB is still actual.
When I change the code ( <a class="gkIcon gkColorFb" href="mypage"><i class="icon-facebook"></i></a> ) in the module, nothing is happens.
User avatar
Junior Boarder

GK User
Tue Jan 07, 2014 10:30 am
Reply with quote
Report this post
Could you provide an URL to your website? Are you sure that you have properly edited the proper module instances?
User avatar
Administrator

GK User
Tue Jan 07, 2014 10:53 am
Reply with quote
Report this post
I sent all to your Inbox.
User avatar
Junior Boarder

GK User
Tue Jan 07, 2014 12:32 pm
Reply with quote
Report this post
I've replaced the content to the one from documentation: http://www.gavick.com/documentation/joo ... iguration/

You have to change:

Code: Select all
href="#"


to:

Code: Select all
href="YOUR_LINK"


where YOUR_LINK is your FB/Twitter profile URL.
User avatar
Administrator


cron