Get the blockes too center?

[tenzher]

I have been trying to build my own theme and right now im trying to get all the modules/blocks to center so i can get two white strips, one on etch side of the blocks, anyone who can help where i should look? cant find the code, see this url http://212.16.186.162/index.php

[PascalVG]

Hi thenzer,

Not all modules are prepared to be in the center. Their layout is made so it fit's in the left or right block. The center block is much wider of course, giving strange effects when putting it there, so IF the module maker prepared for a center spot, it created a special layout for it as well.

 

They have one or more of these functions prepared:

in the /modules/<module name>/<module name>.php file, these functions can be defined:

 

public function hookLeftColumn($params)

{

...

}

 

public function hookRightColumn($params)

{

return $this->hookLeftColumn($params); // many times just a copy from left side, so they just call this function

}

 

public function hookHeader($params)

{

...

}

 

For example /modules/blocklink/blocklink.php

 

If the module is NOT prepared for center stage, the

public function hookHeader($params)

 

is not defined. Yo have to do this yourself then. See other modules for examples.

 

When you have confirmed (Or added yourself) that the hookHeader function is there,

you can go to modules->Positions and either

- use Live Edit or

- hook the module in the Header hook (transplant a module on modules->positions page, upper left button)

 

Hope this helps,

pascal

Edited August 24, 2013 by PascalVG (see edit history)

[tenzher]

Hi thenzer,

Not all modules are prepared to be in the center. Their layout is made so it fit's in the left or right block. The center block is much wider of course, giving strange effects when putting it there, so IF the module maker prepared for a center spot, it created a special layout for it as well.

 

They have one or more of these functions prepared:

in the /modules/<module name>/<module name>.php file, these functions can be defined:

 

public function hookLeftColumn($params)

{

...

}

 

public function hookRightColumn($params)

{

return $this->hookLeftColumn($params); // many times just a copy from left side, so they just call this function

}

 

public function hookHeader($params)

{

...

}

 

For example /modules/blocklink/blocklink.php

 

If the module is NOT prepared for center stage, the

public function hookHeader($params)

 

is not defined. Yo have to do this yourself then. See other modules for examples.

 

When you have confirmed (Or added yourself) that the hookHeader function is there,

you can go to modules->Positions and either

- use Live Edit or

- hook the module in the Header hook (transplant a module on modules->positions page, upper left button)

 

Hope this helps,

pascal

 

Hi again, i think i described the problem wrong, the thing is i dont want to put all modules in the center, I want to move all blocks(including topp menu and footer) like 10 px to the right, so it looks like it is in the center and so i can get two white lines on the sides of the page

[vekia]

to the #page add padding (for example: padding:10px;), and change width of the left / center / right blocks div (the same width as width of #page container)

[tenzher]

to the #page add padding (for example: padding:10px;), and change width of the left / center / right blocks div (the same width as width of #page container)

 

I cant seen to get it to work, whore in the #page, should i put the padding commande?

"#page {background: #fff url('../img/white.png') top center no-repeat}

#header {z-index:10}

#columns {z-index:1}

#left_column {}

#center_column {}

#right_column {}

#footer {}

"

[PascalVG]

Ah, indeed another question. Follow Vekia's suggestion (Change in themes/<your theme folder>/css/global.css and find #page

 

/* ************************************************************************************************

struture

************************************************************************************************ */

#page { add here}

[PascalVG]

Maybe better here: themes/<your theme folder>/css/global.css, line 55

 

body {

font: normal 11px/14px Arial, Verdana, sans-serif;

color: #222;

background: #fff url('../img/Tapet1.jpg') repeat fixed;

padding-left: 10px; <--add this

}

[PascalVG]

Other thing on your page: The beautiful pictures on the sides are big (almost 1MB). Try to make these smaller, as they take forever to load. Always good advise to keep your pictures as small as possible (without losing quality too much, that is)

 

My 2 cents,

pascal

[tenzher]

Maybe better here: themes/<your theme folder>/css/global.css, line 55

 

body {

font: normal 11px/14px Arial, Verdana, sans-serif;

color: #222;

background: #fff url('../img/Tapet1.jpg') repeat fixed;

padding-left: 10px; <--add this

}

 

Tried adding this to the code but nothing happends :-(

[vekia]

i tried the same, and here is the effect:

 

 

 

i added:

1. padding:10px; to #page div
   
2. width:1000px; to #header
   
3. width:1000px; to .sf-menu (superfish-modified.css)
   

[PascalVG]

Tenzher,

actually should work. Did you clear your browser cache and did you:

go to Advanced parameters->Performance, and turn (temporarily!!) OFF cache and turn ON recompile templates if the files have been updated?

 

Then reload page.

 

pascal

[PascalVG]

Vekia, is 1000 not too wide, as I see a small scroll bar appearing...

[vekia]

you've got horizontal scroll? or what?

btw. i checked his page and there is no padding code that we suggested,

can you check it too?

[PascalVG]

you've got horizontal scroll? or what?

 

Sorry, getting crazy again.... only vertical. Ignore please...

[PascalVG]

To be honest (In Chrome) when adding no padding it looks like it's in the middle already. Also try this: Grab the right side of your browser and drag it to the left, so that the browser gets smaller. As you can see the contents of your shop adjusts itself wit the size. If you make it so small that it exactly hits the right side of your shop body (right side of right column) then both left and right are gone exactly. But when you add padding-left: 40px, there's some piece left on the left.

 

So it seems to be in the middle already without adjustments...

 

Just my thoughts,

pascal

[tenzher]

i tried the same, and here is the effect:

 

 

 

i added:

1. padding:10px; to #page div
   
2. width:1000px; to #header
   
3. width:1000px; to .sf-menu (superfish-modified.css)
   

 

that made the trick :-) but now i got a new problem, the right coloum is to close to the center, i want it to line upp with the top menu on the right side, it only really shows when you are logged in. any idees?

[vekia]

in this case you should define new width for columns, by default, theme has got 980px width value, you've got 1000px;

 

so, change the width of the columns, just add somewhere additional 20 px

[PascalVG]

tenzher,

Probably like this:

backup file themes/<your theme folder/css.global.css

 

edit the file and search for #center_column (With Ctrl-F)

Whenever you find this text and inside the { } is a code

width: 757px;

then change to

width: 782px;

 

save and check. (check all the 'My account' links as well!)

 

pascal