Issues with Vessel Template

Hi,

Thanks for the screenshots, they made it easy to find each one. I went through your site (the New Stuff category and a product page). Here is each point:

1) Text overlapping on the product listings (name sitting over the price)

This was a template bug and it is fixed in the current version of Vessel. It is already rendering correctly on your site now: the product name and price sit side by side with no overlap. If you still see the old overlapping version on any page, it is a cached stylesheet, not the live one. Go to System, Clear Cache in the Joomla admin, then hard-refresh the page (Ctrl+F5). That will clear it.

2) Content bleeding out of the left sidebar

The cause is the Google reCAPTCHA box in your contact form. reCAPTCHA renders at a fixed width (about 302px) and the sidebar column is 260px wide, so the widget spills over the edge. It is not a styling problem as such, the widget cannot be made narrower than its own fixed size. The clean fix is to place that contact form in a full-width area rather than the narrow sidebar, for example the main-top or main-bottom position (directly above or below the page content), or a footer position. It will have room to breathe there. I am also adding a safeguard to the next Vessel update so sidebar content stays clipped to the column instead of overflowing.

3) Main photo looking small with empty space under it, and the thumbnails

The main product image sits in a tall, portrait-shaped frame. Your fabric photos are landscape (wider than tall), so they fill the top of the frame and leave the patterned empty area underneath. Two things:

- To make the small thumbnail strip bigger: Joomla admin, System, Site Template Styles, open the Vessel style, then the Layout tab. Set the thumbnail size option to a larger value (up to 160px). There is also a thumbnail position option there.
- The empty area under the main image on landscape photos is something I am improving in the next Vessel update so the photo fills the frame cleanly. No action needed from you on that one.

4) Finding the template positions

Joomla has a built-in preview for this:
- Go to System, Site Template Styles, click Options (top right), set Preview Module Positions to Enabled, and Save.
- Then open any front-end page and add ?tp=1 to the address, for example:
mohairbearmakingsupplies.co.uk/?tp=1
Every position is then drawn on the page with its name.

The positions available in Vessel are: announcement, topbar, logo, menu, header-icons, search, banner, breadcrumbs, sidebar-left, sidebar-right, main-top, main-bottom, bottom-a, bottom-b, footer-brand, footer-a, footer-b, footer-c, footer-d, footer-bottom. The home-... positions only appear on the front page.

Hi,

Thanks for the detail and screenshots. Here is each point.

Fixed in the latest Vessel version (1.0.9):

- Badges: they were collapsing and not showing on the listings. They display again in the corner of the product image.
- Search results: the product photos were broken (the theme was looking in the wrong image folder). They show again.
- The large image on the product page: landscape photos were leaving an empty area underneath. The image now fits its frame at its own shape, so any image ratio displays correctly.
- Sidebar bleed: sidebar content is now kept inside its column, so a wide element like the reCAPTCHA box can no longer spill across the page.

To get these, download the latest Vessel (1.0.9) from your account on hikashop.com and install the zip over your current one (System, then Install, then Extensions). Your settings and your own CSS are kept.

Product title below the price. This is a small styling preference, so it is best kept as your own CSS. Add this to media/templates/site/vessel/css/user.css, which is preserved when you update:

.hikashop_listing_img_title > .hikashop_product_name,
.hikashop_listing_img_title > .hikashop_product_price_full,
.hikashop_listing_img_title > .hikashop_product_price_main {
	grid-column: 1 / -1 !important;
	grid-row: auto !important;
	text-align: left !important;
}

.hikashop_product_image img,
.hikashop_product_image_subdiv img {
	object-fit: contain !important;
}

Hi,

Glad the update sorted the rest.

The "cut in half" is down to the frame shape. The template frames listing images as a tall portrait, and your fabric photos are landscape, so they either get cropped to fill it, or (with the object-fit rule I sent) sit with empty space above and below. The clean fix is to make the frame landscape so it matches your photos and fills edge to edge with no cropping and no gaps.

In media/templates/site/vessel/css/user.css, remove the object-fit: contain rule I gave you earlier, and use this instead:

.hikashop_product_image,
.hikashop_product_image_subdiv {
	aspect-ratio: 4 / 3 !important;
}
.hikashop_product_image img,
.hikashop_product_image_subdiv img {
	object-fit: cover !important;
}