Forum Support

Shape 5
March 29, 2024, 07:00:11 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Services Page  (Read 1202 times)
danab
Jr. Member
**
Offline Offline

Posts: 49



« on: June 02, 2018, 01:15:24 AM »

Good day,

I am using the services page that came with the website site shaper. I like the feel and flow of it. However i want to change some of the things. (note, i am not a coder so i know changing the things in code might be a struggle for me but help you can assist, also my site is being developed offline first)

I have attached a screen shot of the (bubbles) circles on the page. One is an airplane the other a globe some are people etc. What i want to do is instead of displaying a blue circle with a random element (at least by reading the code it seems like its using an element):

"<div class="icon_non_hover"><span class="ion-earth icon_element"></span></div>""

So instead of displaying the blue circle with the element or image i want to replace that with an image that has exactly the same size as the circle and should also be a circle (i can create this using photoshop), but i have no idea on how to edit the code to use my image rather than the element.

Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: June 04, 2018, 07:12:09 AM »

Hello,

That code is designed to use ion icons by changing out the class name "ion-earth" from one found here:

https://ionicons.com/

If you want to modify those areas and replace them with pictures that would require custom programming. We do not provide modification services as part of our support. Our support is for the core code.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
danab
Jr. Member
**
Offline Offline

Posts: 49



« Reply #2 on: June 05, 2018, 12:04:43 AM »

Thanks Mike
Logged
danab
Jr. Member
**
Offline Offline

Posts: 49



« Reply #3 on: June 05, 2018, 04:02:23 AM »

Hi Mike,

I am having trouble with adding icons using ionicons.com.

The original code will look something like this:

"<div class="icon_non_hover"><span class="ion-aperture icon_element"></span></div>"

I replaced the above mentioned code with:

"<ion-icon name="settings"></ion-icon>"

Which results in the icon to disappear and the code <ion-icon name="settings"></ion-icon> is written in the blue bubble icon.

I have also tried editing the code as follow:

"<div class="icon_non_hover"><span class="ion-settings icon_element"></span></div>"

Which doesnt change the icon it self it just remains the same. I have tried clearing my cache without any luck

This is the code i got from the website: "<ion-icon name="settings"></ion-icon>"

Can you assist me with how the code should look like? Like is said this website is on localhost but connected to the internet so i cant give you access yet. Unless you want to log into my computer remotely?

Kind regards,
Daniel Booysen
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #4 on: June 05, 2018, 07:14:28 AM »

Hello,

Please post the code back to the original code found here:

http://www.shape5.com/demo/hexa_corp/index.php/pages/our-services

I am not sure why you made this change:

"<div class="icon_non_hover"><span class="ion-aperture icon_element"></span></div>"

I replaced the above mentioned code with:

"<ion-icon name="settings"></ion-icon>"

That's not proper html. The only part you should be changing is the class name "ion-aperture" to match whatever icon you want to use. So in this case your code would look like this:

<div class="icon_non_hover"><span class="ion-settings icon_element"></span></div>
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.