kongsuse Posted March 3, 2014 Share Posted March 3, 2014 Hi Forum, Is it possble to change topmenu and footer "bar" out with a image of your own design? br Michael Link to comment Share on other sites More sharing options...
vekia Posted March 3, 2014 Share Posted March 3, 2014 everything is possible in this case you have to modify css styles for top menu (superfish-modified.css) and for footer (in global.css from your theme) Link to comment Share on other sites More sharing options...
kongsuse Posted March 3, 2014 Author Share Posted March 3, 2014 Thanks My image is in: Theme/img/footersplat.png Is it under: theme/css/global.css /* ************************************************************************************************ FOOTER************************************************************************************************ */#footer { color:#fff; background:#333} .blockcategories_footer, #footer .myaccount , #block_various_links_footer, #social_block, #block_contact_infos { float:left; width:175px } .blockcategories_footer {margin-left:0}#footer .title_block { padding-bottom: 10px; text-transform:uppercase}#footer .title_block ,#footer .title_block a { font-weight:normal; font-size:14px; color:#fff}#footer a {color:#fff}#footer a:hover {text-decoration:underline}#footer ul {list-style-type:none}#footer li {padding:7px 0}#footer li a {color:#fff} #footer .myaccount {padding: 15px 10px}#footer .myaccount .title_block, #footer .myaccount h4 { padding:0 0 10px 0; background:none; text-shadow:none}#footer .myaccount .favoriteproducts img,#footer .myaccount .lnk_wishlist img {display:none} Link to comment Share on other sites More sharing options...
kongsuse Posted March 3, 2014 Author Share Posted March 3, 2014 (edited) Where do i place the url to picture - and what url will it be. really appreciate your help and time. Edited March 3, 2014 by kongsuse (see edit history) Link to comment Share on other sites More sharing options...
vekia Posted March 3, 2014 Share Posted March 3, 2014 but what you want to change, where you want to use this picture? Link to comment Share on other sites More sharing options...
kongsuse Posted March 3, 2014 Author Share Posted March 3, 2014 Sorry - let just talk on this topic. I was reading in another to about change Footer "the grey bar/box" out with an image of my own. So how to make the grey box gone - and replace it with a img. of my own? Link to comment Share on other sites More sharing options...
vekia Posted March 3, 2014 Share Posted March 3, 2014 let's clarify, you want to change background of whole footer, or just a little part of it (reassurance module) ? Link to comment Share on other sites More sharing options...
kongsuse Posted March 4, 2014 Author Share Posted March 4, 2014 The whole footer please Link to comment Share on other sites More sharing options...
vekia Posted March 4, 2014 Share Posted March 4, 2014 strange, because code that i suggested to use should work. any chance to see it live (your website) ? if so please share url Link to comment Share on other sites More sharing options...
walliamwords Posted March 5, 2014 Share Posted March 5, 2014 (edited) Hello, Thsi forum is really amazing and informative for me. Thanks for nice sharing. http://www.thegreatonlineshoppingfestival.com/ Online Shopping Edited March 5, 2014 by walliamwords (see edit history) Link to comment Share on other sites More sharing options...
kongsuse Posted March 5, 2014 Author Share Posted March 5, 2014 Hi Vekia, My site is - www.getsomeart.dk The only thing i've done is. modify Theme/css/global.css - under *Struture* - added under #Footer: background: url(../img/Footerspalt.png) - And i checked the name of img. file. (the img. file is in the folder called img - in my theme folder) /* ************************************************************************************************ struture************************************************************************************************ */#page {} #header {z-index:10} #columns {z-index:1} #left_column {} #center_column {} #right_column {} #columns { background: #FFF; display: block; clear: both; overflow: hidden; } #footer { background: url(../img/Footerspalt.png) } Should this make the "Grey Box" disappear - and still have the footer content? just with my img. as background? Link to comment Share on other sites More sharing options...
vekia Posted March 5, 2014 Share Posted March 5, 2014 your CSS files are minified into one, this is probably why you dont see changes. go to adv. paramters > performance tab and disable CCC for css files after that, your footer background: Link to comment Share on other sites More sharing options...
kongsuse Posted March 5, 2014 Author Share Posted March 5, 2014 (edited) Jesus - that look nice. But i've done what you said, and still no changes.. i have change the "CCC for CSS files" To Keep original Css. Should it happen instant? is the img url just - url(../img/Footerspalt.png) or should i change the (.. <-- part) /img/Footerspalt.png) Sorry, really can't figure it out Edited March 5, 2014 by kongsuse (see edit history) Link to comment Share on other sites More sharing options...
vekia Posted March 5, 2014 Share Posted March 5, 2014 now open global.css file near line 589 you've got #footer { color: #fff; background: #333; } you ahve to change this background param Link to comment Share on other sites More sharing options...
kongsuse Posted March 5, 2014 Author Share Posted March 5, 2014 #footer { color: #fff; background: url(../img/Footerspalt.png); } ? Link to comment Share on other sites More sharing options...
vekia Posted March 5, 2014 Share Posted March 5, 2014 exactly Link to comment Share on other sites More sharing options...
kongsuse Posted March 5, 2014 Author Share Posted March 5, 2014 Thanks! Thank you so much. After clearing cache - it works! Vekia you the best! Link to comment Share on other sites More sharing options...
vekia Posted March 5, 2014 Share Posted March 5, 2014 you're very welcome what about other parts of your topic title? (headr, topmenu) ? Link to comment Share on other sites More sharing options...
kongsuse Posted March 5, 2014 Author Share Posted March 5, 2014 Hmm After i change the img to a new picture - it is just showing qustion marks. it png file as before - but a bit larger (250 kb) . . Damn can't find anything about it anywhere.. Link to comment Share on other sites More sharing options...
vekia Posted March 5, 2014 Share Posted March 5, 2014 you changed url to your website? im trying to open it but i see totally other website now Link to comment Share on other sites More sharing options...
kongsuse Posted March 6, 2014 Author Share Posted March 6, 2014 Nope, its still www.getsomeart.dk Link to comment Share on other sites More sharing options...
kongsuse Posted March 6, 2014 Author Share Posted March 6, 2014 Hey now it works ? strange... maybe it just take time for prestashop to upload the img. or something. Can see i have i change the size of the footer img. what i the size of the footer - 980 * 250 ? Link to comment Share on other sites More sharing options...
vekia Posted March 6, 2014 Share Posted March 6, 2014 980px width 209px height 1 Link to comment Share on other sites More sharing options...
kongsuse Posted March 6, 2014 Author Share Posted March 6, 2014 Okay thanks a lot! The next project will be how to change "the center column" out with an img. file of my own. (its just white color now) And what size in px. does the center column have? is the way to do this the same as the footer project. **Struture** #Column #background ..url/img.png in the global.css. near line 43. ? Link to comment Share on other sites More sharing options...
kongsuse Posted March 6, 2014 Author Share Posted March 6, 2014 And find the way to change the header out with a piture too.. Link to comment Share on other sites More sharing options...
vekia Posted March 6, 2014 Share Posted March 6, 2014 center column is a bit complicated case because it has got different width depending on viewed page, for example it's different for homepage, and different for checkout process Link to comment Share on other sites More sharing options...
kongsuse Posted March 6, 2014 Author Share Posted March 6, 2014 Allright, maybe that can wait a bit. But the "header" where my Logo and cart is. can the background of this be changed out with an piture? Is this the same way as with the footer? Link to comment Share on other sites More sharing options...
vekia Posted March 6, 2014 Share Posted March 6, 2014 yes, you can do it in the same way as you did for footer for example i used this: #header{ color: #fff; background: url(../img/footer1.png); } effect: 1 Link to comment Share on other sites More sharing options...
kongsuse Posted March 6, 2014 Author Share Posted March 6, 2014 (edited) Great thanks... Now to the topmenu - how to make it transparent? many many thanks for your help vekia! Edited March 6, 2014 by kongsuse (see edit history) Link to comment Share on other sites More sharing options...
vekia Posted March 6, 2014 Share Posted March 6, 2014 you can use opacity css tag: .sf-menu{ opacity:0.5; } Link to comment Share on other sites More sharing options...
kongsuse Posted March 11, 2014 Author Share Posted March 11, 2014 Just put that code in the Modules/topmenublock/superfish_modified.css ? Dosent work it seems. Link to comment Share on other sites More sharing options...
vekia Posted March 12, 2014 Share Posted March 12, 2014 it works increase value and after changes, press ctrl+f5 in your front office Link to comment Share on other sites More sharing options...
kongsuse Posted March 13, 2014 Author Share Posted March 13, 2014 Thanks again ! And its a great tool - to press f12, and play with your website that way! . Now i have change the size of menubar and the background color - in the superfish_modified.css. How can i remove the logo? Link to comment Share on other sites More sharing options...
vekia Posted March 13, 2014 Share Posted March 13, 2014 you can do it with css styles (logo will be invisible but it still will appear in the code) #header_logo {display:none;} or in header.tpl remove code (you will remove logo at all) <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"> <img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/> </a> Link to comment Share on other sites More sharing options...
Recommended Posts