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 277 times


Active Member

Posts

Joined
Wed Feb 14, 2018 1:47 am

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 253 times


Active Member

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;
}

Free converted extensions


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

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 217 times

html module.jpg

html module.jpg (103.85 KiB) Viewed 217 times


Active Member

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
Active 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 204 times

modifications.jpg

modifications.jpg (45.26 KiB) Viewed 204 times


Active Member

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
Active 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

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 189 times


Free converted extensions


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
Active 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

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
Active 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 an OpenCart V-Pro Shop!
A wide range of matching Designs can be seen here: http://www.opencart.li
For Information on URL's offered, please contact me at: jti@jacob.ch
Hundreds of Mods in 380+ Repositories for OC v.1.5.x - v.2.3.x
to be found on my Github Site: https://github.com/IP-CAM
Image


User avatar
Legendary 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
Expert Member

Posts

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

Users browsing this forum: No registered users and 16 guests