Add icons set(s) / change colors for Circle icons

- 8 years, 11 months ago Zelig
  Participant
  
  Expired
  Hello there!
  
  We are currently developing our site at http://www.agqsl.com using Codeless Specular Theme. Our company produces and markets feed additives for livestock. We are all about efficiency in feed digestion and nutrient utilization by the animals.
  
  You may access the site bypassing the current “Coming Soon Page” using this link
  
  https://www.agqsl.com/ok0oibe7
  
  As you can see we are using the service Circle Icons to show the different Classes of Products and Technologies we offer to our customers. Energy Efficieny, Feed Efficiency, Nitrogen Efficiency, etc.
  
  We use the predefined Icons for each item. But the icons bundled with Specular don’t accommodate to our needs. Having a “cloud” to depict Mineral Efficiency, or a “Diamond” for Early Age Efficiency does not make any sense. We would like to be able to ask a designer to create a new set of HMTL Icons that match our industry (feed for livestock) so that the website looks coherent. Could you please let us know how to create them, upload them and link them to the theme so they show up in the list of available icons?
  
  Furthermore, we would like two more things related to the Circle Icons:
  
  1.- How can we make them linked when used like we do in the frontpage? As for now the text below them can be linked to other pages, but we don’t know how to make them Linkable? i.e. Redox Efficiency links to https://www.agqsl.com/efficiency/redox-efficiency/ but we don’t know how to set the same link in each circle icon
  
  2.- We color code our products. How can we override the color of the Circle Icons color? I.e. Redox Efficiency is linked with red. So that when someone links to https://www.agqsl.com/efficiency/redox-efficiency/ the Circle icons to the left, and the check marks in the page instead of blue, should be red.
  
  I fiddled around with the page’s CSS custom code at (https://www.agqsl.com/efficiency/earlyage-efficiency/ ) but I could not locate all the items that needed to be customized for the icons to be of the same color. You will notice that the icons are red but turn blue on hover.
  
  .services_large .icon_wrapper i, .services_steps .icon_wrapper i
  {
  color: #e01102;
  }
  .services_steps .icon_wrapper, .accordion.style_1 .accordion-heading.in_head .accordion-toggle:before {
  border: 1px solid #e01102;
  }
  
  .chart , .easyPieChart
  {
  color: #66CD00;
  }
  
  There must be a better way…
  
  3.- Would it be possible to set a color like in Question#2 for each Circle Icon in the front page: blue, red, yellow, etc?
  
  Thank you very much for your help and assistance.
  
  Sincerely
  
  Angel
  
  This topic was modified 8 years, 11 months ago by Zelig.
  
  This topic was modified 8 years, 11 months ago by Zelig.
  
  This topic was modified 8 years, 11 months ago by Zelig.
- 8 years, 11 months ago Mirela
  Participant
  Hello,
  
  1-Custom icons: Sorry but this is a customization that requires coding which is not included in support service. I suggest you hire a developer to achieve this for you.
  Related topic.
  
  2-To make the icons links as well, go to file vc_templates/services_medium.php and find this line:
  $output .= '<div class="icon_wrapper" style="'.$extra_st.'"><i class="'.esc_attr($icon).'" style="color:'.esc_attr($icon_color).';"></i></div>';
  
  Replace with this:
  $output .= '<div class="icon_wrapper" style="'.$extra_st.'"><a href="'.esc_url($data['link']).'"><i class="'.esc_attr($icon).'" style="color:'.esc_attr($icon_color).';"></i></a></div>';
  
  3-To make the icon’s color red on hover too, you need to add this custom css code as well:
  
  .services_large:hover .icon_wrapper, .services_steps:hover .icon_wrapper { background: #e01102 !important }
  
  Result screenshot.
  
  -Change the chart skill color in file vc_templates/chart_skill.php. FInd thi sline:
  $output .= '<div class="chart" data-percent="'.esc_attr($percent).'%" data-color="'.esc_attr($cl_redata['primary_color']).'" data-color2="'.esc_attr($color).'">';
  
  Replace this part: ‘.esc_attr($cl_redata[‘primary_color’]).’ with the color you want it to have. Example:
  $output .= '<div class="chart" data-percent="'.esc_attr($percent).'%" data-color="#f79468" data-color2="'.esc_attr($color).'">';
  
  -To set a different color for each page’s services, you should add the custom css that changes the main color to the page’s custom css box. Instead of the main custom css box located in General options, which affects the entire site.
  
  4-You can give each service circle icon a different color in “Services Circle Icon Settings“. See screenshot.
  
  Best regards!
- 8 years, 11 months ago Zelig
  Participant
  
  Expired
  Hello Mihaila
  
  I am making progress with your comments. But I still need yo walk me thru, one step at a time.
  
  1.- You wrote: “To set a different color for each page’s services, you should add the custom css that changes the main color to the page’s custom css box. Instead of the main custom css box located in General options, which affects the entire site.”
  
  Could you please let me know the exact CSS custom code to paste in a page to override the the Color set in the entire site. For example I need all items in this page to be and behave in grey as it would be should the entire site primary color would be set to grey.
  
  https://www.agqsl.com/efficiency/mineral-efficiency/
  
  2.- I understand that creating a new set of icons to add to the existing ones that come with the Theme is out of support. However, would it be possible to i) Understand how to add new IcoMoon Icons ii) Maybe direct us to a freelance developer with previous experience with this particular task.
  
  Thanks
  
  Angel
  
  This reply was modified 8 years, 11 months ago by Zelig. Reason: No answer yet!
- 8 years, 11 months ago Mirela
  Participant
  
  This reply has been marked as private.
- 8 years, 11 months ago Zelig
  Participant
  
  Expired
  
  Hello Mihaila
  
  Thank you for your answer.
  
  1.- We know the mechanics of how adding custom CSS code for an individual page. What we need is the actual code to override the Colors set for the theme https://pho.to/AbuJP. Primary, content link, body font, Headings font, and so on. Would you please care to paste the code?
  
  2.- We are about to hire a coder to extend the icons and have them available to all icon enabled Codeless Elements. Should I assume that a coder would be able to extend the available icons even to service small icon? or is it beyond any coding to make all new icons for service small icon?
  
  Thanks for your attention and prompt response.
  
  Sincerely
  
  Angel
- 8 years, 11 months ago Mirela
  Participant
  
  Hello,
  
  1-To change the color of primary, content link, headings..etc just click on the color box in the color palette and select the color you want to use. Or add the color value in hexadecimal at the color field. See screenshot: https://pho.to/Abund
  
  2-A good developer will be able to extend the available icons to service small icons too. It just requires some work but it’s not impossible.
  
  Best regards!
- 8 years, 11 months ago Zelig
  Participant
  
  Expired
  Hello again
  
  i believe you are not understanding my first question. Let me rephrase it:
  
  what CSS code do we need to put in an individual page to override the theme’s primary color, content link etc? We need the CSS code please
  
  thanks
  
  angel
- 8 years, 10 months ago Mirela
  Participant
  
  Hello,
  
  There are many different elements that use the theme’s primary color. I can’t just send you a custom css for every possible one of them. It’s time consuming and not really included in support service (this is a personal preference customization, read out support policy here).
  So if you want our help, then narrow down the request. Send us the particular page and i will help you find out the custom css for that page.
  
  Best regards!

Viewing 7 reply threads

You must be logged in to reply to this topic.

Community Forums

Add icons set(s) / change colors for Circle icons

Site Links

Useful Articles

Login