Home>Support>Circle Icon of Feature Widget image instead of icon

Circle Icon of Feature Widget image instead of icon

Hi,

I have stumbled upon a problem while configuring my homepage. I first wanted to use the Circle Icon widget, because it looked as it would get me what I want. Sadly it did not. Now I am trying to get the Feature widget to do what I want, but again with no results.

What I want to have:

I need tree buttons on my homepage. Instead of the Icons, that are available I want to use my onw images, that I uploaded to WordPress. Beneath the image I want to have the name of the category, that would be opened by clicking on the button, as well as some additional inforamtion.
Basically, what the circle Icon widget offers.
However I don’t want to use the More function for the URL forwarding. I want to be able to go to the page just by clicking on the button.

you can check my homepage here: http://www.mystudiumguide.de/

Fun thing – with one of the old versions of Vantage I had exactly that function, but since I started to update the design and updated the theme, I can’t seem to find a way to do it again.

Would be very thankful if you could help me.
I already read and tried everything there is on the Support forum, but nothing works. In the best case, with the circle Icon widget, I manage to put my image into the icon field, but it is small and has some background behind and arreund it. Also, the forwarding works only with the More function.

Thanks in advance

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

  1. 7 years, 8 months ago MikeMSG

    hi, would you be able to help me with that?

  2. 7 years, 8 months ago Alex S
    Hi, I Work Here

    Handling via Premium support.

  3. 7 years, 8 months ago Alex S
    Hi, I Work Here

    The following is the CSS we ended up with to accomplish what Mike was after. Please add it to WP Admin > Appearance > Custom CSS:

    .widget_circleicon-widget .circle-icon-box a.more-button {
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	font-size: 0;
    }
    
    
    .widget_circleicon-widget .circle-icon-box .circle-icon {
    	background-color: transparent !important;
    }
    
    
    .widget_circleicon-widget .more-button i {
    	display: none !important;
    }
    

    You might also need to install the SiteOrigin CSS Editor.

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