Support ForumHow i add link description – Support Forum

How i add link description

PCMalaga — Tue, 20 Jan 2015 17:09:24 +0000

Hello, i dont know how i can add link descriptions on all links on my web.

Reply To: How i add link description

IshYoBoy — Wed, 21 Jan 2015 06:02:58 +0000

Hey there,

could you please let us know little bit more about what exactly you mean by adding link description on all links?

Thanks in advance
Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: How i add link description

PCMalaga — Wed, 21 Jan 2015 08:04:02 +0000

For example:
##

I want to change to:
##

Or:
## Llamanos al 691 34 07 32 o rellena nuestro formulario de contacto!

To:
## Llamanos al 691 34 07 32 o rellena nuestro formulario de contacto!

Reply To: How i add link description

IshYoBoy — Wed, 21 Jan 2015 14:23:34 +0000

Hey,

I guess the first example is an icon from the breadcrumbs bar. Is that right? In this case you can go to “Theme Options” -> “General Options” and change the tooltip text there.

If you are inserting link into the text then the link tool in text editor allows you to add a title.

Also you can put a title on any “Page Builder” element by editing it and going to the complete bottom of the pop-up window, choosing “Yes” for “Advanced global attributes” and setting the Tooltip text for the element.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: How i add link description

PCMalaga — Wed, 21 Jan 2015 15:31:43 +0000

Hi again, i have this code:

In the theme options i can change the tittle of the div:

Reply To: How i add link description

IshYoBoy — Wed, 21 Jan 2015 16:34:40 +0000

Hey,

I am afraid you will have to override the shortcode template, find the place where the “A” element is output and add a title attribute containing the dynamic text you need.

Here is an example how to override any shortcode you need:

Override shortcode template in a child theme

P.S. We do not recommend editing the theme or plugin files directly as all changes will be lost upon theme update.

What is a child theme and how, but mainly why to use it?

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: How i add link description

PCMalaga — Wed, 21 Jan 2015 17:53:46 +0000

First of all, thanks for the replies. But as you would find that? is crazy file by file and look how hard I look I find nothing, and less on the css that this all in one continuous block will understand only one who did. You can not be more specific?

Reply To: How i add link description

IshYoBoy — Wed, 21 Jan 2015 19:47:06 +0000

Hey,

The code for the [ish_icon] which is used in the Social bar can be found in the following file as noted in the article above:
ishyoboy-boldial-assets/ishyoboy-shortcodes/assets/backend/vc_extend/shortcodes_templates/ish_icon.php

If you skim the code inside you will find something like:

// SOCIAL ICONS BAR URL
if ( '' != $sc_atts['icon_url'] ) {
	$return .= '<a href="' . esc_attr( $sc_atts['icon_url'] ) . '"';

	// Add inline style color to <a> too
	if ( '' != $sc_atts['text_color'] ) {
		$return .= ' style="';
		$return .= 'color: ' . esc_attr( $sc_atts['text_color'] ) . '; background-color: ' . esc_attr( $sc_atts['bg_color'] . ';' );
		$return .= '"';
	}

	$return .= ' target="_blank">';
}

// SOCIAL ICONS BAR URL

if ( '' != $sc_atts['icon_url'] ) {

$return .= ' . esc_attr( $sc_atts['icon_url'] ) . '"';

// Add inline style color to too

if ( '' != $sc_atts['text_color'] ) {

$return .= ' style="';

$return .= 'color: ' . esc_attr( $sc_atts['text_color'] ) . '; background-color: ' . esc_attr( $sc_atts['bg_color'] . ';' );

$return .= '"';

}

$return .= ' target="_blank">';

}

You could update it to the following code:

// SOCIAL ICONS BAR URL
if ( '' != $sc_atts['icon_url'] ) {
	$return .= '<a href="' . esc_attr( $sc_atts['icon_url'] ) . '"';
	
	// Add title attribute based on the tooltip setting
	$return .= ( '' != $sc_atts['tooltip'] ) ? ' title="' . esc_attr( $sc_atts['tooltip'] ) . '"' : '';

	// Add inline style color to <a> too
	if ( '' != $sc_atts['text_color'] ) {
		$return .= ' style="';
		$return .= 'color: ' . esc_attr( $sc_atts['text_color'] ) . '; background-color: ' . esc_attr( $sc_atts['bg_color'] . ';' );
		$return .= '"';
	}

	$return .= ' target="_blank">';
}

// SOCIAL ICONS BAR URL

if ( '' != $sc_atts['icon_url'] ) {

$return .= ' . esc_attr( $sc_atts['icon_url'] ) . '"';

// Add title attribute based on the tooltip setting

$return .= ( '' != $sc_atts['tooltip'] ) ? ' title="' . esc_attr( $sc_atts['tooltip'] ) . '"' : '';

// Add inline style color to too

if ( '' != $sc_atts['text_color'] ) {

$return .= ' style="';

$return .= 'color: ' . esc_attr( $sc_atts['text_color'] ) . '; background-color: ' . esc_attr( $sc_atts['bg_color'] . ';' );

$return .= '"';

}

$return .= ' target="_blank">';

}

The CSS is generated using SASS this is why it is in a single line. All files used to generate it can be found in here:

Shortcodes:
ishyoboy-boldial-assets/ishyoboy-shortcodes/assets/frontend/css/sass

Theme:
boldial/assets/frontend/css/sass

All files are organised based on the topic they solve (E.g.: “_blog, _content, _portfolio, _widgets, etc.”).

You can however easily see the CSS that is applied to any element by using the “Inspect Element” property of browsers like Chrome. Check this topic which shows how to use Chrome to find the exact selector:

Inspect Element to make CSS changes using Custom CSS or in Child Theme

Hope this helps.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market