masmaz Posted December 28, 2011 Share Posted December 28, 2011 Hi, I'm using the original template http://www.doctormobile.eu/prestashop/ I would like to move or extend the black bar on top top header but changing the code. css, I can not move, can you help me? look this code in global.css /* global layout */ #page { width: 980px; margin: 0 auto 2px auto; text-align: left } #header_logo { float: left; width: 264px; display: block } img.logo { float: left; margin-top: 0em; font-size: 2em; font-weight: bold } #header_right { float: left; margin-bottom: 15px; width: 73%; text-align: right thanks for your cooperations MAX Link to comment Share on other sites More sharing options...
Snade Posted December 28, 2011 Share Posted December 28, 2011 Hi, I'l try to explain you the steps you should take to make it the propper way. Hope you can handle it. First, make your logo only the text "Doctor mobile tecnological solutions" (you got error its TecHnological) a transperant png file, so the logo is not the whole header, but just the logo(as it should be) Then make the header background image, at least 1600 px wide, with gradient ending in pure black(or other color) at both sides. You need that in order to cover all screen resolutions up to 1600 px with your graphic header background. The ending in black is to make another, black background under the main one, so resolutions above 1600px to have the whole screen filled too. Now make a 1px wide black(or the color you use) line, with the height of the header background. This will be your black background for filling widescreens. Add this line as background to the <body> #body { background: url("../img/line.png") repeat-x scroll left top transparent; } then make a <div id="headerbg"> under the <body> (open it in header.tpl, close it in footer.tpl) and add your header background img to it #headerbg { background: url("../img/headerbg.png") no-repeat scroll center top transparent; } Now you should have a single color repeating line that fill all the screens, a header background image on top of it(centered in the middle of the screen no matter what size it is, and with gradient ending in the color of the line background), and a transperant logo with the name and slogan of your shop. Sorry if it doesnt sound streight forward, but if I have to explain every step in detail, it will take me longer than actually making it... Is this what youre asking for ? Link to comment Share on other sites More sharing options...
masmaz Posted December 28, 2011 Author Share Posted December 28, 2011 Hello for your help .... You're very kind but I did not understand some things ... I added the background image in <body> file global.css, but the result was this .... body { background: url("../img/header_top.png") repeat-x scroll left top transparent; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align: center I did not understand what should I add in 2 file .tpl, and why!!...... regards Massimo Link to comment Share on other sites More sharing options...
masmaz Posted December 28, 2011 Author Share Posted December 28, 2011 mmm... ok maybe I did :-) Link to comment Share on other sites More sharing options...
masmaz Posted December 28, 2011 Author Share Posted December 28, 2011 In your opinion, is the ability to move the form currency and languages, below left? Link to comment Share on other sites More sharing options...
Snade Posted December 29, 2011 Share Posted December 29, 2011 Hello again I see you are half-way there! good job ! Now I have attached a screenshot on how your site looks on my laptop screen. As you can see the header doesnt fit, because you have made it 1500, I told you 1600. Also, this is my laptop, so there are bigger screens and you need to cover them too. One option is to make rediculasly big header image, 1900px wide, but I suggest you to stick with the solution to repeat a line under you header image. I have attached the line to see what I'm talikng about. If you choose that option, you'll need to attach the line to the <body> div, then open another div right under it and place you background header image there. The div should be open in header.tpl and closed in footer.tpl header.tpl <body> <div id="headerbg"> footer.tpl </div> </body> So you will have repeating line, that fit all screens, and your header background image, on top of it. Do you understand now ? About the currency, and language selection. To move them below, first move them in the backoffice, go to modules->positions, and move them below the other modules in hook top of pages. Then probably they wont fit perfectly where you want, and you'll need to align them by editing the css. 1 Link to comment Share on other sites More sharing options...
masmaz Posted December 29, 2011 Author Share Posted December 29, 2011 Thanks Snadi ... the background set the 1600px, but eventually, I do as thou hast given About the language and currency i move the lower right without moving the modules below ... but only from file .css Unfortunately, both the language and the currency does not work for me .. that depends on mychange? Link to comment Share on other sites More sharing options...
.png.022b5452a8f28f552bc9430097a16da2.png)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now