Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6

Thread: Help with theme

  1. #1
    Junior Member
    Join Date
    Oct 2017
    Posts
    3
    Member #
    57567

    Help with theme

    Hello everybody
    My name is Kris. Recently I purchased a theme for my opencart and I need to change something in it. Most of the time I have no problems doing it but this time I have no idea how this is done. The creator of theme said he can do it for me but he will do it himself and I want to learn how can I do it so in the future I can replace the icons there and find out which one looks better. Anyway here is my problem. If you look at the image below you can see headphones and bunch of icons around them. What I have found is the icons are a single image file in the folder. So how they make them look separate on the web? How do I change them to something else? If you need more files or info let me know. He said he used Layered PSD, PHP Files, CSS Files, JS Files, PSD to create the theme.
    Can you point me to a tutorial or something that I can learn how that is done? If you hoover over the icons they change to blue color. I uploaded the screenshot of the web and next to it you can see the long png image with the icons.
    headphones.jpg
    icon.jpg

  2.  

  3. #2
    Junior Member SoftLink's Avatar
    Join Date
    Sep 2017
    Location
    Central Florida
    Posts
    24
    Member #
    57480
    Can you tell us what theme it is so we can analyze the code? Can you show us the code?
    You can't use a psd file on a Web page so they've gotta be doing something in php or javascript or . . .
    You'll have to track the icons' sources in the code to learn what's going on.

    If we can see the code we can help you a lot better.

  4. #3
    Junior Member
    Join Date
    Oct 2017
    Posts
    3
    Member #
    57567
    Here is the code I hope
    PHP Code:
    <div class="homeslider_cms">
    <
    div class="container">
    <
    div class="box-heading">Headphones</div>
    <
    div class="inner-block-top">
    <
    div class="content-text">
    <
    div class="features left">
    <
    div class="first">
    <
    div class="image headcms_img1"></div>
    <
    div class="heading">
    <
    spanWoven Cables </span>
    </
    div>
    <
    div class="text">There are many variations of passages of ofeven slightly believable.</div>
    </
    div>
    <
    div class="second">
    <
    div class="image headcms_img2"></div>
    <
    div class="heading">
    <
    span16hr Battery Life </span>
    </
    div>
    <
    div class="text">There are many variations of passages of ofeven slightly believable.</div>
    </
    div>
    <
    div class="third">
    <
    div class="image headcms_img3"></div>
    <
    div class="heading">
    <
    spanUSB Charging Cable </span>
    </
    div>
    <
    div class="text">There are many variations of passages of ofeven slightly believable.</div>
    </
    div>
    </
    div>
    <
    div class="features center inner-block-bottom">
    <
    div class="homepage-slider-inner products block_content">
    <
    div class="products product-carousel" id="slider-carousel">
    <
    div class="slider-item">
    <
    a href="#"><img src="image/catalog/head-phone1.png" alt=""></a>
    </
    div>
    <
    div class="slider-item">
    <
    a href="#"><img src="image/catalog/head-phone2.png" alt=""></a>
    </
    div>
    </
    div>
    <
    div class="customNavigation"><class="btn prev"></a><class="btn next"></a></div>
    </
    div>
    <
    div class="slider_default_width" style="display: none; visibility: hidden;">&nbsp;</div>
    </
    div>
    <
    div class="features right">
    <
    div class="first">
    <
    div class="image headcms_img1"></div>
    <
    div class="heading">
    <
    spanBluetooth 4.1 </span>
    </
    div>
    <
    div class="text">There are many variations of passages of ofeven slightly believable.</div>
    </
    div>
    <
    div class="second">
    <
    div class="image headcms_img2"></div>
    <
    div class="heading">
    <
    spanhigh quality audio </span>
    </
    div>
    <
    div class="text">There are many variations of passages of ofeven slightly believable.</div>
    </
    div>
    <
    div class="third">
    <
    div class="image headcms_img3"></div>
    <
    div class="heading">
    <
    spanMicrophone </span>
    </
    div>
    <
    div class="text">There are many variations of passages of ofeven slightly believable.</div>
    </
    div>
    </
    div>
    </
    div>
    </
    div>
    </
    div>
    </
    div

  5. #4
    Junior Member SoftLink's Avatar
    Join Date
    Sep 2017
    Location
    Central Florida
    Posts
    24
    Member #
    57480
    He's using 2 classes for each icon: image headcms_img1
    It looks like he's writing the css and html code from php.
    The classes look to be product specific so I don't think they're hard coded into a css file.

    My guess is that he's using css background-image: for the image files and changing it in a css :hover to change the background image when the user mouses over the image.

    He's probably creating the css classes from database entries made for the products.
    You could try to track down where in the template/module he's doing that.
    If you're not real familiar with template code that could be a daunting task.

    I'd look for the image files within the template folders. If you can find them then you can just create your own icons and save them into the same folder with the same names. You'd be overwriting the original ones. I'd back those up into a zip file before doing that.

  6. #5
    Junior Member
    Join Date
    Oct 2017
    Posts
    3
    Member #
    57567
    The problem is the icons are all in one file. It looks like he just uses the one file to place all icons there. But I don't know how. To replace the icons I will have to edit image file and erase them all and put new ones there. Then eyeball it so they appear in exact same spot as his

  7. #6
    Junior Member SoftLink's Avatar
    Join Date
    Sep 2017
    Location
    Central Florida
    Posts
    24
    Member #
    57480
    I don't think you're right. To do that he would literally have to programmatically write the image file itself.
    That would be the hard way to do this.

    Why do you think he's only using one file?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:11 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com