Welcome, Guest
Username: Password: Remember me
Use this Category for your support questions about Joomla Virtuemart Template - DarkMart (SKU# FLEX-00011)

TOPIC: Position Problems with Custom HTML modules

Position Problems with Custom HTML modules 10 years 10 months ago #4484

Greetings.

Using the DarkMart template for my Joomla + VirtueMart web site, I'm trying to add web site seals and a SSL logo in either the bottom-a or bottom-b positions of the template. I would expect it to similar to the Flexible DarkMart demo shop which has 3 columns of lists and 1 SSL logo in the bottom-b position. Only difference is I am using three columns instead of four.

When I place my HTML code, they all align left under each other. I do not have any custom DIVs or CSS in the Custom HTML modules that would be forcing the alignment left. For a simpler test, I created three Custom HTML modules:
<p>This is a test</p>

But all of them just align left one after the other.

I could not identify any special CSS formatting in the demo site example in that area, except for the credit card and SSL logo block, "float: right".

How do get the custom HTML blocks to layout properly?

I've been trying to debug using Firebug and Inspect Element with Firefox but not having much luck figuring out what's going on here.

This is also still in a test environment and not on a live site yet, so using localhost and SSL on the shop.
Attachments:
Last Edit: 10 years 10 months ago by BlackBore Chokes Support. Reason: Specified still using development environment for testing
The topic has been locked.

Position Problems with Custom HTML modules 10 years 10 months ago #4488

Hmmm .. really don't know without seeing your site

in our demo we just use 5 custom html modules .

nothing fancy . no Module Class Suffix or anything

e.g

<ul class="bottom_links">
<li>Shopping</li>
<li><a href="#">Store Locator</a></li>
<li><a href="#">Gift Card</a></li>
<li><a href="#">Catalog</a></li>
<li><a href="#">My Account</a></li>
</ul>

threw some <p>This is a test</p> in the modules - rendered fine...

have to see this live to know what the problem is.. wht is Firebug showing the widths as?

if you try 5 modules do they line up?

Cheers
Attachments:
The topic has been locked.

Position Problems with Custom HTML modules 10 years 10 months ago #4492

I duplicated all the "Bottom-B (1-5)" and "Bottom-A (Left, Right)" Custom HTML modules like the demo site. I thought maybe these were being used as spacers or something to force the layout like the demo site. I even added a vertical side menu to try and take up space. Unfortunately none of this had any effect. All of the Custom HTML modules get placed in new rows one after another on the left side of the page under "sidebar-b" even though I have NOTHING assigned to that position.

I'm noticing something else strange. The 'maininner' div block (filled with content from enabling "Show Store Description" in VirtueMart) is flush to the left instead of against the VM Categories vertical menu assigned to 'sidebar-a'. It should be against the 'sidebar-a' position content like the demo, but instead it is above it. Maybe this is causing the other parts of the page to be messed up? I went over the DarkMart installation instructions again and verified I had all the VirtueMart settings correct. The only thing I'm doing differently with the VirtueMart configuration is I have unchecked, "Use external google jQuery library" because it defaults to non-ssl and causes warnings of insecure communication when using Internet Explorer. I enabled it back but it made no difference in the page rendering.

I'm not ready to make the site live for wide visibility, especially when I'm having this problem with the DarkMart template.

I've attached two screen shots (one with and without tp=1 of my VM store), html page source, and a zip of the 3 css files that I've made modifications to from the DarkMart template. There are only minor formatting changes to the style sheets to accommodate my page logo or explicitly making the 'maininner' div background color obtuse to emphasize the page sections during debugging. The "Show Store Description" is turned off so it the web page is shorter for debugging.

I hope this is enough to figure out what may be happening.
Last Edit: 10 years 10 months ago by BlackBore Chokes Support. Reason: grammer fix
The topic has been locked.

Position Problems with Custom HTML modules 10 years 10 months ago #4498

Hi,

without the live site it is very hard to help you .. can't you just stick it in a subfolder with an obscure name so I can see it?

I can't know what css is operating on the elements even with your attached files - have you had a look in Firebug to see what specifically operates on the elements?

somewhere each of the 5 is being given a 100% width - or the enclosing div is to narrow..

heres one box with the enclosing section

<section class="grid-block" id="bottom-b"> should have no sizes etc

width20 class should be

.width20 {
width: 20%;
}


 
<section id="bottom-b" class="grid-block">
<div class="grid-box width20 grid-h">
<div class="module mod-box  deepest">
 
 
<ul class="bottom_links">
<li>This is a Test 1</li>
<li><a href="#">Store Locator</a></li>
<li><a href="#">Gift Card</a></li>
<li><a href="#">Catalog</a></li>
<li><a href="#">My Account</a></li>
</ul>
 
</div>
</div>
 

but a quick look in firebug and it should be clear what is wrong..

Cheers
The topic has been locked.

[SOLVED]Position Problems with Custom HTML modules 10 years 10 months ago #4529

My issue is resolved - indirectly by starting over.

When I first started I created a copy called "bb-flexible_darkmart" and assigned as the default template in my site. I intended on customizing the colors, logo, some icons, etc. so I did not want to overwrite changes to the original in the event I messed something up. It's certainly "possible" I inadvertently made a change which broke the layout and caused the problems I was having. Further, I had deleted the original template "flexible_darkmart" from my site. So perhaps there is code that still refers to this template and not my copied one called "bb-flexible_darkmart".

I copied the flexible_darkmart template from the QuickStart demo site into my site and made it default.

With my existing content now everything is displaying the same as the demo site!

In the future I will be more careful when making custom changes. I'll also study the tips in the Using Firebug for Customization or Troubleshooting topic before shooting myself in the foot again!
The topic has been locked.

[SOLVED]Position Problems with Custom HTML modules 10 years 10 months ago #4532

Excellent - well done! Firebug is the standard tool for web development - it really pays to learn all that it offers.
Re:bbericdm wrote:

So perhaps there is code that still refers to this template and not my copied one called "bb-flexible_darkmart".
!

Yes, if that css was available it would be affecting your display - css can be put in any css file as long as it's called by the site somewhere

Case closed.
The topic has been locked.
Time to create page: 0.087 seconds

MaterialMart

for Virtuemart 3

Google's Material Design has finally arrived to Virtuemart

Virtumart Template - MaterialMart Virtumart Template - CleanMart Virtumart Template - CleanMart Virtumart Template - CleanMart

Fully responsive!

Buy Now   |   Live Demo