Post by dani888 » Sun Sep 16, 2018 3:13 pm

Hello
Can be added three images after banner
For the theme http://www.spearthemes.com/oc-light/
Or default theme opencart 3.0.2.0
I understand that it is difficult to add images to themes.
There may be an easier way to add images.
It's right to add html content modules or it's not a safe way.
The 3 images also have a hover effect.
Thank you

Attachments

three images.jpg

three images.jpg (159.21 KiB) Viewed 250 times


Active Member
Online

Posts

Joined
Wed Feb 14, 2018 1:47 am

Post by xxvirusxx » Sun Sep 16, 2018 4:19 pm


Active Member

Posts

Joined
Tue Jul 17, 2012 10:35 pm

Post by dani888 » Sun Sep 16, 2018 4:56 pm

Hello
This module is good or I need to install another module
Thank you

Attachments

html image.jpg

html image.jpg (15 KiB) Viewed 226 times


Active Member
Online

Posts

Joined
Wed Feb 14, 2018 1:47 am

Post by xxvirusxx » Sun Sep 16, 2018 5:14 pm

Yes.

And as an example/demo you can add this:

Code: Select all

<div class="beffect">
  <a href="#"><img src="you_image_location.jpg"></a>
  </div>
and on you theme css

Code: Select all

.beffect{
    position: relative;
    overflow: hidden;
}
.beffect img {
    max-width: 100%;
    transition: all 0.5s;
}
.beffect a:hover::before {
    border: 0 solid rgba(255, 255, 255, 0.7);
}
.beffect a::before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    border: 50px solid rgba(255, 255, 255, 0);
    top: 0;
    left: 0;
    transition: all 0.5s ease-in-out;
}
.beffect a:hover::after {
    transform: scale(0.5);
    opacity: 0;
    transition-delay: 0.1s;
}
.beffect a::after {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    opacity: 0.5;
    border: 30px solid #fff;
    top: 0;
    left: 0;
    transform: scale(0);
    transition: all 0.3s ease-in-out;
    transition-delay: 0s;
}

Active Member

Posts

Joined
Tue Jul 17, 2012 10:35 pm

Post by dani888 » Sun Sep 16, 2018 5:26 pm

Ok
Thank you

Active Member
Online

Posts

Joined
Wed Feb 14, 2018 1:47 am

Post by dani888 » Sun Sep 16, 2018 7:12 pm

I made the changes but maybe I did not do something right
When I insert the image it works from the module.
When I write code it does not appear exactly what I write
source image C:\xampp\htdocs\opencart\image\catalog\demo\canon_eos_5d_2.jpg
<img style="width: 408.525px; height: 375.1px;" src="http://localhost/opencart/image/catalog ... s_5d_2.jpg">
Thank you

Attachments

my site.jpg

my site.jpg (68.73 KiB) Viewed 190 times

html module.jpg

html module.jpg (103.85 KiB) Viewed 190 times


Active Member
Online

Posts

Joined
Wed Feb 14, 2018 1:47 am

Post by khnaz35 » Sun Sep 16, 2018 7:41 pm

dani888 wrote:
Sun Sep 16, 2018 7:12 pm
I made the changes but maybe I did not do something right
When I insert the image it works from the module.
When I write code it does not appear exactly what I write
source image C:\xampp\htdocs\opencart\image\catalog\demo\canon_eos_5d_2.jpg
<img style="width: 408.525px; height: 375.1px;" src="http://localhost/opencart/image/catalog ... s_5d_2.jpg">
Thank you
did you update your theme file first ?
you can add <style> </style> direct to your page as well
Last edited by khnaz35 on Sun Sep 16, 2018 7:56 pm, edited 1 time in total.

Always help others it's always come back, give and receive :)


User avatar
New member

Posts

Joined
Mon Aug 27, 2018 11:30 pm

Post by dani888 » Sun Sep 16, 2018 7:56 pm

I gave refresh

Attachments

update1.jpg

update1.jpg (39.14 KiB) Viewed 177 times

modifications.jpg

modifications.jpg (45.26 KiB) Viewed 177 times


Active Member
Online

Posts

Joined
Wed Feb 14, 2018 1:47 am

Post by khnaz35 » Sun Sep 16, 2018 7:57 pm

dani888 wrote:
Sun Sep 16, 2018 7:56 pm
I gave refresh
Does it help?

Always help others it's always come back, give and receive :)


User avatar
New member

Posts

Joined
Mon Aug 27, 2018 11:30 pm

Post by dani888 » Sun Sep 16, 2018 8:05 pm

Not the same result

Active Member
Online

Posts

Joined
Wed Feb 14, 2018 1:47 am

Post by xxvirusxx » Sun Sep 16, 2018 8:08 pm

Paste that code using code view </> , and don`t paste as text.....
After you pasted the code, press again on code view, then save

Attachments

Screenshot_2018-09-16_15-07-15.png

Screenshot_2018-09-16_15-07-15.png (32.92 KiB) Viewed 162 times


Active Member

Posts

Joined
Tue Jul 17, 2012 10:35 pm

Post by khnaz35 » Sun Sep 16, 2018 8:18 pm

xxvirusxx wrote:
Sun Sep 16, 2018 8:08 pm
Paste that code using code view </> , and don`t paste as text.....
After you pasted the code, press again on code view, then save
its look like he didn't update his CSS sheet and just trying to achieve it direct without mentioning div class

Always help others it's always come back, give and receive :)


User avatar
New member

Posts

Joined
Mon Aug 27, 2018 11:30 pm

Post by dani888 » Sun Sep 16, 2018 8:36 pm

Now it works
I added the first picture

Active Member
Online

Posts

Joined
Wed Feb 14, 2018 1:47 am

Post by khnaz35 » Sun Sep 16, 2018 8:46 pm

dani888 wrote:
Sun Sep 16, 2018 8:36 pm
Now it works
I added the first picture
Great so don't forget to mention the step here as well in case if some have same problem & Mark your post as resolved

Thanks

Always help others it's always come back, give and receive :)


User avatar
New member

Posts

Joined
Mon Aug 27, 2018 11:30 pm

Post by IP_CAM » Mon Sep 17, 2018 2:21 am

Great so don't forget to mention the step here

Well, anyone should know, that HTML Code needs to be entered in SOURCE MODE,
but sure not in WYSIWYG (What you see is what you get) Mode, to make such work. :'(
It works this way since 'MS FrontPage 95' and similar WYSIWYG HTML Editors exist,
so there is nothing really new about this... ;)
Still, I usually mention this, if I make such a Posting, just to make sure, since more
and more OC Newbies never played around with (html) Code before. ::)
Ernie

For Sale: Top URL's, including OpenCart V-Pro installed, like seen here:
http://www.bigmax.ch - http://www.ipcam.li - http://www.opencart.li
For Information + URL's offered, please contact me at: jti@jacob.ch
I am NOT available for Custom Support in existing OC Installations!
My Github Repositories: https://github.com/IP-CAM
Image


User avatar
Guru Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by paulfeakins » Mon Sep 17, 2018 5:59 pm

dani888 wrote:
Sun Sep 16, 2018 7:12 pm
I did not do something right
dani888 wrote:
Sun Sep 16, 2018 7:12 pm
C:\
Correct, you used Windows :crazy:

For quick, professional OpenCart support please email info@antropy.co.uk


User avatar
Active Member

Posts

Joined
Mon Aug 22, 2011 11:01 pm
Location - Reigate, Surrey, United Kingdom
Who is online

Users browsing this forum: dani888 and 10 guests