Post by smitch6 » Fri Mar 13, 2015 3:16 pm

Hi
I have added a couple of images using the new HTML Block mod on the latest version
kool module btw well done i had to pay for the mod on my old version......

Anyway how do i add the same border around that image as the rest of the site?

If you see the attached screenshot you'll see the standard pasrts of the site have a 1px border around them.
However the images on the bottom left are 2 i added using the HTML Block and they haven't got that border so it doesn't look right.

Thanks in advance
Screen Shot 2015-03-13 at 07.14.05.png

Screen Shot 2015-03-13 at 07.14.05.png (91.1 KiB) Viewed 1942 times


www.pattestersuffolk.co.uk


Active Member

Posts

Joined
Sat Sep 17, 2011 2:46 pm


Post by smitch6 » Tue Mar 17, 2015 2:42 pm

anyone got any ideas about this pls?

www.pattestersuffolk.co.uk


Active Member

Posts

Joined
Sat Sep 17, 2011 2:46 pm


Post by IP_CAM » Thu Mar 19, 2015 3:55 am

Just try to use a similar "STYLE" CSS Surrounding, as you have/use for your Favoured Items DIsplay, and test it.
---
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product-thumb transition">
YOUR HTML Block Content
</div>
</div>
---
or this way:
---
<div class="row product-layout">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product-thumb transition">
YOUR HTML Block Content
</div>
</div>
</div>
---

I don't know OC v.2.x, it's very different from older versions. ??? ???
But since you cannot destroy anything, just try such options.
Good Luck
Ernie
buibmax.ch/shop/

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

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

Post by xsteved » Sun Mar 22, 2015 8:58 am

After creating the HTML module using the WYSIWYG editor, click the code editor button (to edit the raw HTML code) and enclose your custom HTML in a div tag with a unique CSS class or ID name, like this--

Code: Select all

<div class="my-custom-html-1">
<p>This is my custom HTML! Now I want to style it with CSS to add borders, padding, etc.!</p>
</div>
Then edit the stylesheet.css file (preferably, a copy of it in your custom theme, not OpenCart's default stylesheet.css) like so--

Code: Select all

div.my-custom-html-1 {
    border: solid 1px #ddd;
    border-radius: 6px;
    padding: .8em;
}

New member

Posts

Joined
Tue Dec 24, 2013 4:47 am

Post by smitch6 » Sun Mar 22, 2015 10:41 pm

none of those suggestions have worked?

www.pattestersuffolk.co.uk


Active Member

Posts

Joined
Sat Sep 17, 2011 2:46 pm


Post by xsteved » Mon Mar 23, 2015 7:57 am

smitch6 wrote:none of those suggestions have worked?
If none of those suggestions have worked, then you may need to learn more about CSS and HTML, and be more diligent in your own troubleshooting. No one can help you as well as you can help yourself, because no one can examine your specific situation as well as you can, or know exactly what you have done (or not done), in order to correct you as you try to address the situation.

I'm confident that if I were in your position, I could make the changes you want. But I'm not in your position and can't look over your shoulder. You don't give any specific details of exactly what you have tried, so no one can respond with anything more than a guess. You don't supply enough information to do otherwise.

You can put the CSS styling instructions either inline (in the p or div tag enclosing your text and graphics) or in the CSS stylesheet that is applied to the webpage. But you'll have to use at least the text-align, padding, border and border-radius CSS properties to make your module match the OpenCart 2 category-list module.

---

New member

Posts

Joined
Tue Dec 24, 2013 4:47 am
Who is online

Users browsing this forum: No registered users and 15 guests