I originally went for the Ignite template as it was made for Hikashop but it wasn't suitable for other parts of my site so am now on Base 3.

How can I make it look like Ignite? I changed the setting in Hikashop to Bootstrap but it didn't do much at all. Overall its reasonable - but I like the look of the ignite layout for the shop. I have changed some things with CSS over-rides but it looks like some things are in the Hikashop Views. how do I get this?

Thanks

You will have to check (using Chrome developer tools for example) how we built the styling for the shop in that template). Changing styling of external extensions is not an easy job because usually such extensions have a lot of elements that needs to be styled and they usually have their own templating system which needs to be overridden in the template to fully customize it

As mihha explains Chrome Developer tools would be my tool of use for this

But it would require a large investment of time

I'm using a PC so its pressing F12 to load the toolset

If I right click and chose "Inspect element" that will allow me to select html elements (I'm selecting the element marked by first arrow).

On the right panel is the styles targeting this element but there is also the computed tab next to that marked by the second arrow - this shows what is actually applying and if you click a line it will show the exact line in the stylesheets that apply

I'm covering quite a bit here but once you play with it a bit it becomes easy to understand.

It enables you to troubleshoot styling and try styling effects out without having to go into the actual files

Cheers
Paul

If I'm looking to override styling I use a tool like notepad to paste to keep notes as once you refresh a site those styling changes/testing will be lost

As these are browser based changes only

Cheers
Paul

Thanks - never knew about the computed tab - makes things easier - will give it a go.

Good luck with the customizations

Slowly getting through it - thanks for the hints.

One thing I am stuck on is
www.ecomad.com.au/mmp_upgrade/e-shop/shop-categories/draught-seals/vent-seals/product/588-evap-cooler-vent-seal-cover-rectangle-large/category_pathway-55

The four thumbnail images below the main image pic are aligned vertically and I just can't figure it out. I thought that images aligned horizontally by default. Any ideas on how to fix this.

Try adding this to the custom css

#hikashop_small_image_div img {display: inline;}

Cheers
Paul

Have the front banner working as you can see here
www.ecomad.com.au/mmp_upgrade/index.php?option=com_content&view=featured&Itemid=102

There is a large banner and smaller banner - I can't seem to work out how to remove the gap between the images - I want it to look seamless.

I guess its CSS but can't work it out
Thanks for help

hmm tricky this

can you try

.zen-banner .col-lg-9{ padding-right:0;}
.zen-banner .col-lg-3 {padding-left:0;}

and then resize the right image so it lines up?

Cheers
Paul

Perfect that worked.

I knew how to resize the image and got that to finally work but it was a bit weird as I put the image as the same height as the main banner in the slide show but it ended up being 30px or so smaller in height - which is weird so had to adjust till I got the heights looking equal.

Its ok for for most small to medium screens but if you look at it on a small screen the main zentools slideshow and banner which are now sitting next to each other don't look that great. The new banner on the right is smaller in height, and the main slideshow has the overlay text quite large so it doesn't quite work as I expect it should unless thats what happens on a small smartphone screen anyway. Not too fussed about it at this stage until I do some more testing on various phones.

Thanks for your help Paul.

Right I think you would need a series of media queries to resolve the different issues

@media (min-width:450px) and (max-width:480px) {
#zentools360 img {height: 118px}
}

This won't work outside of these areas

@media (max-width:480px) {
#bannerwrap .allitems {top:50px}
#bannerwrap .allitems h1, #bannerwrap .allitems h2, #bannerwrap .allitems h3, #bannerwrap .allitems h4, #bannerwrap .allitems h5, #bannerwrap .allitems h6 {
font-size: 100%;}
}

Cheers
Paul

Thanks PAul - will play around with your suggestion when I get back to - moved onto other stuff for now.

You couldn't tell me how to do K2 over rides for this template - I copied the K2.css file in the base 3 template theme I am using the greenbluedark but any changes I am making are not being seen on the front-end.

You need to add the css to the custom.css file

As the last css file it will override template styling and adding to the template css will be lost on update or compile LESS to CSS

Cheers
Paul

Thats what I thought but I have no idea how to over ride a K2.

In K2 there is this Css
div.itemHeader h2.itemTitle {
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 36px;
font-weight: normal;
line-height: 110%;
padding: 10px 0px 4px;

I want to remove the font-family and font-size as the h2 then reverts to the normal template style which looks good.

How do you create an over ride in this case?

Depending on the other code you can add inherit to same styling instead of the values or add exactly the same styling but with the existing template css

Cheers

Hi Paul

Bit confused with the inherit thing - adding it to some styles and nothing is working.

An example of something I can't work out how to change.

In the template.css there is the following:0

.chzn-container {
width: 100% !important;
}

I have chronoforms installed and for some reason they use the same style name .chzn-container. The layout on the page is making the buttons and drop down selects full width of the page.

If I disable the above css code using firefox inspector (so template.css) then the layout on chronoforms is fine.

I don't really want to remove the lines in template.css as no doubt it would affect something else on the template. How can I "disable" the width important that is carrying across/

Hopefully explained myself. Page is here that I am trying to get rid of the 100% width
www.ecomad.com.au/mmp_upgrade/e-shop/product-information/evap-cooler-vent-seal-order-form

Cheers

Inherit will only work if it is able to inherit from its parent

So add instead add the existing styling from the template elements - find the styling where is it applying correctly and add the css there to

div.itemHeader h2.itemTitle {

so it matches

Cheers
Paul

Form wise its a case of increasing the specificity so to overrides the existing element

so you would look for a class or div that is a parent of the element and add that before the existing style as a new line to the custom.css file

This will then only override styling that is the same

Cheers
Paul