Home>Support>Widget link to post/page

Widget link to post/page

By Fabio Masieri, 10 years ago. Last reply by Magus, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi!
First of all many thanks for the great plugin and sorry for my english: it’s quite rusty these days…
Mi question is simple: I am trying to make a “Solution Page” for the printing company website where I work: It will be composed by imgs of the service, small text and everything linked to a complete page where you can see the features of the service.
So I made a 2 columns row, add the image as visual editor widget backgroud, and put my text in.
Is there a way link background imgs with a custom css or another way I really can see right now?
Thank you for your support!

URL: http://www.grafichegemma.it/?page_id=540

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 2 months ago Magus
    Hi, I Work Here

    Hi Fabio

    You may be to use JS to handle this:

    http://davidegan.me/make-a-div-clickable-with-jquery/

    That little script could be wrapped in script tags and used inline.

    Magus

  2. 10 years, 2 months ago Fabio Masieri

    Hi Magus,
    thank you for the reply!
    I’m sorry, but I have really poor programming skills, so I didn’t get how and where should I put the code…
    I was thinking about something to put in “Attributes” and “CSS Styles” in the Widget Styles of the visual editor but I am clearly missing something…
    If it’s not something that it requires an enormous amount of code, I will try to do it, but I don’t want to bother you too much…

  3. 10 years, 2 months ago Magus
    Hi, I Work Here

    Hi Fabio

    I have found and tested a way for you to achieve this in CSS. In Attributes for the Visual Editor add an entry into Widget Class.

    I will use ‘myfeatures’ as an example.

    In Custom CSS (Appearance->Custom CSS) Add the following

    div .myfeatures {
     position: relative; 
    }
    
    div.myfeatures a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
    }
    

    If you give all the Visual editor widgets on that page the same widget class name then we only need to use this CSS once. You can change the ‘myfeatures’ to whatever you want.

    Let us know how you get on

    Magus

    Let us know how you get on

    Magus

  4. 10 years, 2 months ago Fabio Masieri

    Works perfectly! Thank you so much, I can’t tell you how grateful I am!
    have a great w-e!

  5. 10 years, 2 months ago Magus
    Hi, I Work Here

    You are most welcome.

    If you need any more help please don’t hesitate to open a new support thread.

    Magus

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More