[solved] Changing currency block position

[leowls]

Hi all,

 

I would like to move the currency position to where the blue rectangle is according to the screenshot. I have tried moving the currency block's position in the back office but failed. could anyone render some help? Thanks.

 

[yaniv14]

its hard to help without a link to your site.

basically its css modification, in some modules you might be lucky just to position them next to each other, but its also depends on those modules style (css)

 

also you can always use an absolute position, but I don't recommend unless you don't have any other option.

[vekia]

exactly as yaniv said url is necessary to say what exactly you have to do.

In most cases with "transplantation" process, the main thing is to change css and html code of the element you want to transplant

[leowls]

hi vekia and yaniv

 

I dont have a website yet. I'm designing my theme based on the default theme. So everything I have currently is the default theme design and layout. I want to modify the default theme bit by bit. I have removed the quick search bar from the header as you can see. I wish to move the currency block to the said position in the photo.

 

I have tried modifying the blockcurrencies.css but to no avail. Thanks.

[Mikas]

Hi leowls,

 

Do the following changes:

 

themes/(themename)/css/modules/blockcurrencies/blockcurrencies.css in line 2 find #header_right #currencies_block_top and change the following lines until the } mark with:

 

background: none repeat scroll 0 0 #000000;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
   float: right;
   height: 15px;
   margin: 48px 113px 0 0;
   padding: 2px 6px;

 

themes/(themename)/css/modules/blockuserinfo/blockuserinfo.css - line 3 (#header_right #header_user)- change code in the same way you did before:

 

clear: both;
   float: right;
   margin-top: -30px;
   width: 647px;

 

and finally the same file, line 10 (#header_user #header_nav) change to:

 

float: right;
   list-style-type: none;
   margin-right: -55px;

 

That should do it!

[yaniv14]

I can only help you with absolute positioning.

If you want it like that you need to edit 'blockcurrencies.css' which located in your modules/blockcurrencies and look for:

 

 

 

#header_right #currencies_block_top {

float:right;

height: 15px;

margin: 0 6px 0 0;

padding: 2px 6px;

-moz-border-radius-bottomright: 3px;

-moz-border-radius-bottomleft: 3px;

-webkit-border-radius-bottomright: 3px;

-webkit-border-radius-bottomleft: 3px;

border-bottom-right-radius: 3px;

border-bottom-left-radius: 3px;

background: none repeat scroll 0 0 #000;

}

 

and change to:

 

 

 

#header_right #currencies_block_top {

float:right;

height: 15px;

margin: 0 6px 0 0;

padding: 2px 6px;

-moz-border-radius-bottomright: 3px;

-moz-border-radius-bottomleft: 3px;

-webkit-border-radius-bottomright: 3px;

-webkit-border-radius-bottomleft: 3px;

border-bottom-right-radius: 3px;

border-bottom-left-radius: 3px;

background: none repeat scroll 0 0 #000;

position: absolute;

top: 20px;

right: 200px;

}

 

and see if it works

[leowls]

Hi Mikas,

 

I have tried your method however there is some alignment issue. Nevertheless, thank you for your great help!

 

Hi Yaniv,

 

Your method works! Thanks! Appreciate it.

[vekia]

i marked this topic as solved, im convinced that it will be helpfull for other forum members :-) thanks all!

[shoulders]

the absolute positioning method was very helpful in creating a custom header layout without having to create loads of custom hooks.

 

p.s. i made all the changes using the css and tpl overide system.

 

thanks