I'm working on upgrading my site (www.double-b-books.com) from version 2 to version 3 of cs cart. Getting the logo centered in v.2 in a 100% width template was a struggle - so I thought in a fixed width template using grids it would be loads easier.
I created a full width grid in the header section and put 3 grids inside it - a 4 grid with “My Account”, an 8 grid with “Logo” and a 4 grid with “Cart contents”. I imagined that this would give me something similar to what I have in my version 2 store but what I get is a mess .
I haven't even looked at css and the design end of cs cart for a about a year so its a relearning process but any help would be gratefully received.
[attachment=6522:mess.png]
You'll want to create a full width 16 grid.
Another grid 8 width and select content-alignment left for the 'My Account' and 8 width and right-alignment for the cart info.
Another 16 grid width inside the parent grid, below the two 8 width grids, put your logo in there. And create a CSS class to align the content in the middle. The CSS class will need the width and the margin set to auto, ie. middle, something which includes this. Now on the 'logo' grid, specify the CSS class as 'my-logo'.
. my-logo {
width: 900px;
margin: 0 auto;
}
You might need to add !important to the margin so “0 auto !important” and if it still won't play ball, be naughty and use “text-align: center;”
Thanks for your help - grids set up the way you say and the addition of “text-align : center” gets it done. When I revert to 3 grids in a row - a 4 8 4 grid layout then it won't center - I wanted to use that layout because it reduces the height of the header area.
I'll have to play some more with the css but in my head this seems like poor design in the grid system - surely something like this is what a grid system should make incredibly straight forward. In fact there are a few things that seem slightly odd in how things are set up but maybe that's just because I'm completely unfamiliar with v.3