SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75! 
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Changing Icons in a Cherry Framework

3 years 10 months ago - 3 years 10 months ago #122574 by Tristan
Changing Icons in a Cherry Framework was created by Tristan
Hey Nick,

Wordpress puzzles me. It is very different to Joomla in some ways.

How do I change icons in a cherry framework? I have found this site:

www.templatemonster.com/help/wordpress-h...682030257.1454689221

But that does not satisfy me. I am sure OSTraining has some information about this issue, too.

It is about this site: www.canigen-testumgebung.de . How can I change the icons on this site (Have a look below "On Straight up Razors)?

The information I have says me, I shoud upload my own icons in the folder /themeXXXX/images. But in this folder there are no icons the template uses.

Kind regards

Frank

Please Log in to join the conversation.

3 years 10 months ago #122581 by Tristan
Replied by Tristan on topic Changing Icons in a Cherry Framework
So I know the icons have something to do with the service_box. Here is the code from the service-box.php out if the directory themeXXXXX/includes/shortcuts:

<?php
/**
* Service Box
*
*/
if (!function_exists('service_box_shortcode')) {

function service_box_shortcode( $atts, $content = null, $shortcodename = '' ) {
extract(shortcode_atts(
array(
'title' => '',
'subtitle' => '',
'icon' => '',
'text' => '',
'btn_text' => '',
'btn_link' => '',
'btn_size' => '',
'target' => '',
'custom_class' => ''
), $atts));

$output = '<div class="service-box '.$custom_class.'">';

if($icon != 'no'){
switch ($icon) {

case 'icon1':
$output .= '<figure class="icon"><i class="icon-laptop"></i></figure>';
break;

case 'icon2':
$output .= '<figure class="icon"><i class="icon-thumbs-up-alt"></i></figure>';
break;

case 'icon3':
$output .= '<figure class="icon"><i class="icon-download-alt"></i></figure>';
break;

case 'icon4':
$output .= '<figure class="icon"><i class="icon-gears"></i></figure>';
break;

case 'icon5':
$output .= '<figure class="icon"><i class="icon-shield"></i></figure>';
break;

case 'icon6':
$output .= '<figure class="icon"><i class="icon-file-text"></i></figure>';
break;

case 'icon7':
$output .= '<figure class="icon"><i class="icon-umbrella"></i></figure>';
break;

case 'icon8':
$output .= '<figure class="icon"><i class="icon-coffee"></i></figure>';
break;

case 'icon9':
$output .= '<figure class="icon"><i class="icon-star"></i></figure>';
break;

case 'icon10':
$output .= '<figure class="icon"><i class="icon-user"></i></figure>';
break;

default:
$icon_url = CHERRY_PLUGIN_URL . 'includes/images/' . strtolower($icon) . '.png' ;
if( defined ('CHILD_DIR') ) {
if(file_exists(CHILD_DIR.'/images/'.strtolower($icon).'.png')){
$icon_url = CHILD_URL.'/images/'.strtolower($icon).'.png';
}
}
$output .= '<figure class="icon"><img src="'.$icon_url.'" alt="" /></figure>';
break;
}

}

$output .= '<div class="service-box_body">';

if($icon == 'no'){
$output .= '<div class="circle-box"></div><div class="desc-in">';
}
if ($title!="") {
$output .= '<h2 class="title">';
if ($btn_link!="" && $btn_text == '') {
$output .= '<a href="'.$btn_link.'" title="'.$btn_text.'" target="'.$target.'">';
}
$output .= $title;
if ($btn_link!="" && $btn_text == '') {
$output .= '</a>';
}
$output .= '</h2>';
}
if ($subtitle!="") {
$output .= '<h5 class="sub-title">';
$output .= $subtitle;
$output .= '</h5>';
}
if ($text!="") {
$output .= '<div class="clear"></div><div class="service-box_txt">';
$output .= $text;
$output .= '</div>';
}

if ($btn_link!="" && $btn_text != '') {
$output .= '<div class="btn-align"><a href="'.$btn_link.'" title="'.$btn_text.'" class="btn btn-inverse btn-'.$btn_size.' btn-primary " target="'.$target.'">';
$output .= $btn_text;
$output .= '</a></div>';
}
if($icon == 'no'){
$output .= '</div>';
}
$output .= '</div>';
$output .= '</div><!-- /Service Box -->';

$output = apply_filters( 'cherry_plugin_shortcode_output', $output, $atts, $shortcodename );

return $output;
}
add_shortcode('service_box', 'service_box_shortcode');

}?>

Please Log in to join the conversation.

3 years 10 months ago #122582 by Tristan
Replied by Tristan on topic Changing Icons in a Cherry Framework
This is my "my_service_box.js" from the cherry-plugin folder:

frameworkShortcodeAtts={
attributes:[
{
label:"Title",
id:"title",
help:"Enter text for box title."
},
{
label:"Subtitle",
id:"subtitle",
help:"Enter text for box subtitle."
},
{
label:"Icon",
id:"icon",
controlType:"select-control",
selectValues:,
defaultValue: 'icon1',
defaultText: 'icon1',
help:"Select the icon image for box."
},
{
label:"Icon Link",
id:"icon_link",
help:"Enter the link for icon. (e.g. demolink.org )"
},
{
label:"Text",
id:"text",
controlType:"textarea-control",
help:"Enter text for box."
},
{
label:"Button Text",
id:"btn_text",
help:"Enter the text for button."
},
{
label:"Button Link",
id:"btn_link",
help:"Enter the link for button. (e.g. demolink.org )"
},
{
label:"Button Size",
id:"btn_size",
controlType:"select-control",
selectValues:,
defaultValue: 'normal',
defaultText: 'normal',
help:"Choose button size."
},
{
label:"Target",
id:"target",
controlType:"select-control",
selectValues:,
defaultValue: '_self',
defaultText: '_self',
help:"The target attribute specifies a window or a frame where the linked document is loaded."
},
{
label:"Custom class",
id:"custom_class",
help:"Use this field if you want to use a custom class."
}
],
defaultContent:"",
shortcode:"service_box"
};

Please Log in to join the conversation.

3 years 10 months ago #122584 by Tristan
Replied by Tristan on topic Changing Icons in a Cherry Framework
And this is "my_script.js" out of the js-folder from my theme:

$(document).ready(function() {

$(window).resize(
function(){
$('.full-width').width($(window).width());
$('.full-width').css({width: $(window).width(), "position": "relative", "margin-left": ($(window).width()/-2), left: "50%"});
}
).trigger('resize');

if( !$("html").hasClass("ie8") && !$("html").hasClass("ie9")) {
$(function(){
/*$('.circlestat').circliful();*/
});
}

var i = 1;
$('.circle-container').each(function(){
$(this).addClass('item-'+i);
i ++;
});

var all_circles = $('.circle-container path:nth-of-type(2)');
var number_of_circles = all_circles.length;
var colors =

for (var i = 0; i < number_of_circles; i++) {
$(all_circles).each(function(){
$(this).attr('stroke', colors);
});
}
})



frameworkShortcodeAtts={
attributes:[
{
label:"Title",
id:"title",
help:"Enter text for box title."
},
{
label:"Subtitle",
id:"subtitle",
help:"Enter text for box subtitle."
},
{
label:"Icon",
id:"icon",
controlType:"select-control",
selectValues:,
defaultValue: 'icon1',
defaultText: 'icon1',
help:"Select the icon image for box."
},
{
label:"Icon Link",
id:"icon_link",
help:"Enter the link for icon. (e.g. demolink.org )"
},
{
label:"Text",
id:"text",
controlType:"textarea-control",
help:"Enter text for box."
},
{
label:"Button Text",
id:"btn_text",
help:"Enter the text for button."
},
{
label:"Button Link",
id:"btn_link",
help:"Enter the link for button. (e.g. demolink.org )"
},
{
label:"Button Size",
id:"btn_size",
controlType:"select-control",
selectValues:,
defaultValue: 'normal',
defaultText: 'normal',
help:"Choose button size."
},
{
label:"Target",
id:"target",
controlType:"select-control",
selectValues:,
defaultValue: '_self',
defaultText: '_self',
help:"The target attribute specifies a window or a frame where the linked document is loaded."
},
{
label:"Custom class",
id:"custom_class",
help:"Use this field if you want to use a custom class."
}
],
defaultContent:"",
shortcode:"service_box"
};

Please Log in to join the conversation.

3 years 10 months ago #122585 by steve
Replied by steve on topic Changing Icons in a Cherry Framework
Solved via live chat.

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!