How Can I Move The Block Containers On My Store?

Store Builder Questions
1

Hi,



I am able to add blocks, containers etc but I’m struggling to understand how to move containers around the page (ver. 4).



I am able to move the blocks within a container but I need to move the container itself around the grid:



CS-Cart Documentation — CS-Cart 4.16.x documentation

CS-Cart Documentation — CS-Cart 4.16.x documentation



I know I can do that by hacking CSS but is there a way this can be done from the back end?



Your help is appreciated.



Thanks

2

Well



there is no way moving the grids orcontainers. You must mean grids.



You must always plan ahead for you design.



but even when you want to change things radically you ALWAYS first export the positions via XML and then start to add grids and changing the sizes and/or their classes and content.



I know its a headache, but the only other way I see is tempering the xml position file I mentioned earlier, but realy I dont know which is worst!

3

Hi dvsgr



I've been experimenting a bit as to how to move these elements.



Option 1 - editing CSS

I'm trying to reduce the height of a container so I added the height to the CSS (in bold is the addition):



.span16 {

width: 945px;

height: 50px

}



The problem of course with this is that it affects everything so all the relevant elements now have a height of 50 which messes up the page. So I need a way to only affect just one element.



OPTION 2 - hacking html

This is in the screenshot attached.

This achieves exactly what I want but my question is: how can I achieve the same result by altering the CSS file and not the html?



Do I need to define IDs in the CSS so that it only applies to one element?

Thanks.

Capture.jpg

4

It's the contents of the containers that you should be looking at to see where the height is coming from rather than the containers themselves.

5

Exactly



those are dyanmic set containers. Meaning their height depends from the content.



So I think if you wont hack the files themselves you wont get the result you want.



I wouldnt do that, cause you never know whee is it going to get wrong…



Better try all this by css.

6

Guys, thanks so much - it's making sense now.

7

Hi, I am now able to move elements with no problems.



One follow up question:



What happens if the content elements themselves have the same name?



For example I have two blocks with the same element names, UL.dropdown-multicolumns.clearfix.

I need to move one but not the other.



How can this be done?



Thanks.

8

Add a custom value in the blocks “User-defined CSS class” field. Style your new custom CSS as appropriate.

9

Thanks - that's starting to make sense now.



So this is what I did.


  1. Defined the class in styles.css (within My_changes):


.right {
right: 47px
}




2. Cleared the cache



3. Edited the block in question and in User-defined CSS-class tried all the following:



.right

right

.right {right: 47px}

class=”right”



None of which worked.



I guess I'm missing the obvious?



Thanks

PS: I'm not using any wrappers; should I be?

10

The wrapper just adds a pre-defined

where xyz is the wrapper name (eg.
). This allows the tag and the blocks content body node to inherit some CSS styles as defined by the “.mainbox_general” CSS class and child selectors, for example .mainbox_general > li.



In the pre-defined field, you should use something like “custom-block-name” and in your CSS, you should use, for example:-


.custom-block-name {
border: 5px solid #ff0000;
}




“custom-block-name” must be unique, otherwise you would need to use a more defined CSS selector.

11

Thanks for your help - that worked.



One more question: the reason I was not using wrappers was because I did not want the block names to appear (mainbox-title).



Now that I'm using the wrapper, is there any way to hide the title?

Can it be done through CSS or do I have to hack a tpl file?



Thanks.



EDIT: I think display: none achieves this

12

That CSS does do that, but it is considered bad practise for a variety of reasons.



You don't need to use a wrapper, it's simply there as a pre-defined style.



You should, however, still include one

tag on each page, which the 'mainbox' wrapper provides. It's no good for SEO to have multiple instances of

on one page, so choose wisely!

13

Hi and thanks for your reply - understood.



What then would be the “recommended” way to add the

tag?

14

For blocks with no wrapper set, either inside the content, i.e. use HTML/Smarty HTML blocks and add the

's into the code editor…or hack the tpl to include an if statement, which you can then use the “user-defined custom CSS” field on the block to enter 'h1'…'h2'…'h3'…which will then render

Block Name

on the page, again, providing you do not have a wrapper set. Or apply the same theory on the wrapper templates.