![]() This is why links using icon fonts and SVG images are much more practical: ![]() With PNG and JPEG image files, you need to provide two sets of images with different colors for each icon, one for regular state and one for the hover state. If you're using SVG instead of FontAwesome, you can change the color easily with the fill property. All you have to do is change their color property in your CSS file. Icon fonts are ideal to work with when you want to change the link colors easily. In this tutorial, we're using FontAwesome icons. Using hover effects to change the icon and background color is a good way to indicate they are clickable. When designing icon links we need to make it obvious they are clickable. In the earlier days of the web, only text and blue color were used to indicate links. In modern web design, we can be more creative when designing links such as using icons but we need to ensure that the usability of the links doesn't suffer. They are the elements that people interact with the most. Hyperlinks are the most fundamental building blocks of the web. * commented out the below line wich is default, icon box heading only is the link, and replaced the new code that makes the icon itself a link as well below the lomented out line $linktarget = ($linktarget = 'no') ? '' : 'target="_blank"' $display_char = isset($chars) ? $chars : $chars * string $output returns the modified html stringįunction shortcode_handler($atts, $content = "", $shortcodename = "", $meta = "")Įxtract(shortcode_atts(array('title' => 'Title', 'icon' => '1', 'position' => 'left', 'link' =>'', 'linktarget' => 'no'), $atts)) * string $shortcodename the shortcode found, when = callback name * string $content text within enclosing form of shortcode element = " ".stripslashes(wpautop(trim(html_entity_decode($params))))."" = " class_by_arguments('position' ,$params).">" $display_char = isset($chars - 1)]) ? $chars - 1)] : $chars * $params the return array usually holds an innerHtml key that holds item specific markup. * array $params this array holds the default values for $content and $args. * Less often used: $params to add data attributes, $params to modify the className * Most common usage is to define some markup in the $params which is then inserted into the drag and drop container * Editor Element - this function defines the visual appearance of an element on the AviaBuilder Canvas "std" => _("Click here to add your own text", "avia_framework" )), "desc" => _("Add some content for this IconBox",'avia_framework' ), "desc" => _("Do you want to open the link in a new window", 'avia_framework' ), "name" => _("Open in new window", 'avia_framework' ), _('Taxonomy Overview Page', 'avia_framework' )=>'taxonomy', _('Single Entry', 'avia_framework' ) =>'single', _('Set Manually', 'avia_framework' ) =>'manually', "desc" => _("Do you want to apply a link to the title?", 'avia_framework' ), "std" => _("IconBox Title",'avia_framework' )), "desc" => _("Add an IconBox title here",'avia_framework' ), "desc" => _("Should the icon be positioned at the left or at the top?", 'avia_framework' ), "name" => _("Icon Position", 'avia_framework' ), "chars" => AviaBuilder::$path.'assets/fonts/entypo-fontello-charmap.php', "desc" => _("Select an IconBox Icon bellow",'avia_framework' ), "name" => _("IconBox Icon",'avia_framework' ), * opens a modal window that allows to edit the element properties * If this function is defined in a child class the element automatically gets an edit button, that, when pressed $this->config = _('Creates a content block with icon to the left or above', 'avia_framework' ) $this->config = AviaBuilder::$path."sc-icon_box.png" $this->config = _('Content Elements', 'avia_framework' ) Website is and there are some icon boxes on the home screen.Ĭonfig = _('Icon Box', 'avia_framework' ) line 172 is where the change started, but I guess you can’t see that obviously. then because I didn’t know how to deploy the change I tried to add just the new code to functions.phpĬan you please tell me what if anything is wrong with my code in the iconbox.php file and then how/where to place it in my child themes folder. ![]() I changed the code per dudes instructions and them I placed the entire iconbox.php file in my child folder and that didn’t work. I have only modified some of the functions behaviors and css thus far. I am using a child theme and this is a bit new for me in changing this type of code. and I can’t figure out how to impliment it. I saw one solutions that made the whole box a link, which I don’t want.Īnd that is what I tried. I want to make the iconbox icons themselves link not just the heading in the box (the default behavior) Hey guys, I know this has been asked before but I am still having trouble after looking over different solutions.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |