Docs

[sunship]

Hi,

I am using Simple Download Monitor to protect downloads of certain items. I’d like to style the look of the posts, for example: http://kiermyer.com/new/sdm_downloads/fk-tech-rider-2/ can you tell me where I can do this please?

I’d also like to make the icons here be the link, or at least put the link text in line with the icon and text somehow: http://kiermyer.com/new/business/ (I’ve attached a screen shot of the icons I’d like to have as links, half way down this page)

thanks

[Lely]

Hi There,

To customize the look of this link:http://kiermyer.com/new/sdm_downloads/fk-tech-rider-2/ we need to add custom CSS on Appearance > Customize > Custom > Edit Global CSS. Please do give us screenshot of what you want to achieve so we can help you better.

For the link, unfortunately, it is not available by default. It was already added as feature request. We will let you know once we have an update. Please add this temporary script on Appearance > Customize > Custom > Edit Global javascript to achieve that.

jQuery ( function( $ ) {

$('.custom-feature-list .x-feature-box .x-feature-box-content .x-feature-box-text a').each( function() {

$( this ).parent().parent().siblings('.x-feature-box-graphic').find('.x-feature-box-graphic-inner i').wrap( '<a href="' + $( this ).attr('href') + '"></a>' );
$( this ).remove();

} );

 } );

For the code to work, add custom-feature-list on the Feature list element class field. Then populate the LINK TEXT and HREF textfield for each feature list item. The code will look for the href value of the link text and then add it on the icons. It will then remove the LINK text .

Hope this helps.

[sunship]

Thank you very much. I’ve attached a mock-up of what I’d like.

the text at the bottom: to obtain the password, please use the contact form on
the business page or email us at [email protected]

would have a link on ‘contact form on the business page’ back to http://kiermyer.com/new/business/

and an email link on ‘ [email protected] ‘

thank you!

[Rue Nel]

Hello There,

Thanks for providing the screenshot. Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[sunship]

OK Thanks, but this isn’t working:

jQuery ( function( $ ) {

$(‘.custom-feature-list .x-feature-box .x-feature-box-content .x-feature-box-text a’).each( function() {

$( this ).parent().parent().siblings(‘.x-feature-box-graphic’).find(‘.x-feature-box-graphic-inner i’).wrap( ‘‘ );
$( this ).remove();

} );

} );

[sunship]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for the updates!

To resolve this issue, please have your code updated and instead of adding in the customizer, you need to edit the page in Cornerstone instead, go to the settings tab, Settings > Custom JS and insert the following custom js code

jQuery( function($) {
  $('.custom-feature-list .x-feature-box-content .x-feature-box-text a').each( function() {
	$(this).parent().parent().siblings('.x-feature-box-graphic').find('.x-feature-box-graphic-inner i').wrap( '<a href="' + $( this ).attr('href') + '"></a>' );
	$( this ).remove();
  });
});

I have tested this code already on the mentioned page. The first icon has a link now. Just make sure that you have added a link for each feature list item.

Hope this helps.

[sunship]

Thank You! This is great!

I see the icon links now, but can there be a color change on hover and can it open in a new tab?

[Paul R]

Hi,

To open it in a new tab, kindly change then code provided above to this.

jQuery( function($) {
  $('.custom-feature-list .x-feature-box-content .x-feature-box-text a').each( function() {
	$(this).parent().parent().siblings('.x-feature-box-graphic').find('.x-feature-box-graphic-inner i').wrap( '<a target="_blank" class="my-icon-link" href="' + $( this ).attr('href') + '"></a>' );
	$( this ).remove();
  });
});

Then to change it on hover, add this in custom > css

.my-icon-link i {
    color:blue;
    background-color:red;
}

Hope that helps

[sunship]

Thank you!

It’s opening in a new tab now, but the hover isn’t working. I put this in Custom CSS :
.male-icon-link i {
color:blue;
background-color:red;
}

right?

[Joao]

Hi There,

Please try :

.my-icon-link i:hover {
    color:blue;
    background-color:red;
}

Hope it helps

Joao

[sunship]

Thanks , but doesn’t work:

http://kiermyer.com/new/business/

[Jade]

Hi there,

Please update it to:

.my-icon-link i:hover {
    color: blue !important;
    background-color: red !important;
}

[sunship]

Great! Perfect after I changed the colors. Thanks

I’ve used … as the link text and set the color to 0 so it doesn’t show, but it still has a moment when the page is drawing that the icon and text are not aligned, right before the js kicks in. If I could put the … link text on the same line as the title eg: BIO PDF then it would be perfect and not be distracting.

Is there a way to put the link text and the title on the same line?

thanks again!

[Jade]

Hi there,

Please add this code:

.x-feature-box-text {
    margin: 0;
}

Hope this helps.

[Author]

Posts