how to change links in page

[monstru]

who can help me to move some links/blocks in page
to explain to me like to someone that does not know very much about programming
picture attached about what i need :

move permanent links below search section
move welcome /authentification below cart content

thank you in advance

[e-motostore]

You have to identify each element in the html source and then go to your themes directory for file global.css and modify the css to obtain the behaviour you want.

To identify use firefox (+ firebug plugin) or google chrome.

And right click inspect element to display the source code of the page (see my example) with header_links.
then go in the css and modify the css.

You see ?

[monstru]

i've manage to identify the elements, but i do not see how or what to edit to obtain the move of the elements to the positions that i want

[e-motostore]

You want them vertically aligned ?

You can try this first :

ul#header_links
{
display:block;
}

#header #header_user
{display:block;}


#header #search_block_top{display :block;}

in the css.
Display block is used to let the following element go on the next line.
Then, if it works, try align : right to put everything on the right.

[monstru]

i've added your code in the global.css from /themes/prestashop/css (since i use default theme)
but no change
http://accesorii-console.com/ as you can see

/* top links */
ul#header_links
{
display:block;
}

#header #header_user
{display:block;}


#header #search_block_top{display :block;} 
}
#header_links li {
   float: left;
   width: 66px
}
#header_links a {
   display: block;
   height: 15px;
   color: #595a5e;
   padding-top: 19px;
   text-align: center;
   text-decoration: none;
   background-repeat: no-repeat;
   background-position: top center;
   background-color: transparent
}
#header_links #header_link_sitemap a { background-image: url('../img/icon/sitemap.gif') }
#header_links #header_link_contact a { background-image: url('../img/icon/contact.gif') }
#header_links #header_link_bookmark a { background-image: url('../img/icon/star.gif') }

/* block top search */
#header_right #search_block_top {
   float: right;
   background: #e5e6e7 url('../img/block_search_bg.jpg') no-repeat top right;
   margin-bottom: 11px;
   width: 336px;
   height: 28px
}
#header_right #search_block_top p { padding: 0.4em 0 0.4em 1em }
#header_right #search_block_top label, #header_right #search_block_top input { float: left }
#header_right #search_block_top label {
   background: transparent url('../img/icon/search.gif') no-repeat 0 2px;
   float: left;
   width: 19px;
   height: 18px;
   display: block
}
#header_right #search_block_top input#search_query { width: 12em }

/* block left column "Quick search" */
#search_block_left input { margin: 2px 0 0 0 }
#search_block_left #search_query { width: 11em }
#search_button { display: inline }

/* block top user information */
#header_right #header_user {
   float: right;
   width: 535px;
   text-align: right;
   margin-right: 6px
}
#header_user p { color: #595a5e }
#header_user span { font-weight: bold }
#header_user ul { margin-top: 0.3em }
#header_user li {
   float: right;
   line-height: 2em;
   margin-left: 0.5em;
   white-space: nowrap
}
#header_user #shopping_cart, #header_user #your_account { font-size: 0.9em }
#header_user li#your_account { margin-left: 0 }
#header_user #shopping_cart a, #header_user #your_account a {
   background-repeat: no-repeat;
   background-position: top left;
   padding: 2px 0 4px 26px;
   height: 20px;
   text-decoration: none
}
#header_user #shopping_cart a { background-image: url('../img/icon/cart.gif') }
#header_user #your_account a { background-image: url('../img/icon/my-account.gif') }

this is how i've modified the css

[e-motostore]

From my point of view, it has changed, everything is vertically aligned.
You should however encapsulate head_link ul into a div and put the div in display block and remove display block on the header_links

Because the search and the other are in div, and vertically aligned as you want.

[monstru]

i do not want them to align them
i want to have

search

below the 3 icons:
contact-us/sitemap/bookmark

after
welcome / authenticate

and last
my cart

like this
not in one line

[e-motostore]

Yes, ok.
When i say aligned, i wanted to say vertically.
So if you put each block in a div that is display : block, it will do what you want.
Put header_links in div with display block.

i think it should work

[monstru]

can you help me with the sintax for this?

[e-motostore]

You should have this to have header_link after the search block

Contactati-ne
 Harta magazin
  
       [removed]writeBookmarkLink('http://accesorii-console.com/', 'Accesorii Console', 'Bookmark');[removed] 

 

So put

before

and this

after the closing

in the css add this

div#header_links_div{
display:block;
}

And it should work.

Then for authenticate, do the same

...    

and again display block in the css for the new id header_nav_div

Normally, you should have then search, links, shopping cart and Bine ai venit,

[e-motostore]

maybe remove this in the css

ul#header_links
{
display:block;
}

it can cause your different links to display vertically. I am not sure of that, try it.