badfreek Posted September 12, 2013 Share Posted September 12, 2013 Hello, I want to add custom links with pictures in my header (next to logo) and make them multilingual. Would appreciate any hints, thanx. I'm using Presta 1.5.4. best Link to comment Share on other sites More sharing options...
vekia Posted September 12, 2013 Share Posted September 12, 2013 unfortunately {l s='STRING HERE'} function doesn't allow to use HTML language. it mean that you can do it only with {if} conditions or with module to use custom content (like contentbox / html box pro) open themes/YOUR_THEME/header.tpl file and in header section add if conditions (if language == 1 if language == 3 etc.) with code to display images and links Link to comment Share on other sites More sharing options...
badfreek Posted September 12, 2013 Author Share Posted September 12, 2013 thanx vekia - you're the man Link to comment Share on other sites More sharing options...
vekia Posted September 12, 2013 Share Posted September 12, 2013 and of course you will have to stylize these links with css styles. you can use position:absolute; left:350px; top:50px; usually these styles placing new elements right after logo Link to comment Share on other sites More sharing options...
badfreek Posted September 12, 2013 Author Share Posted September 12, 2013 (edited) of course, no problem - I used content box - it supports CSS coding for effects like hover, but it looks like it is only assigning it for the index page, on other pages I get the images from contentbox, but not the CCS coding along... link is here Edited September 12, 2013 by badfreek (see edit history) Link to comment Share on other sites More sharing options...
vekia Posted September 12, 2013 Share Posted September 12, 2013 can you show code that you added to contentbox? Link to comment Share on other sites More sharing options...
badfreek Posted September 13, 2013 Author Share Posted September 13, 2013 (edited) Sure - below... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Css3 Gallery</title> <style type="text/css"> .css3gallery img{ -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/ -o-transform:scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ } .css3gallery img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; } </style> </head> <body> <div class="css3gallery"><br /> <br /> <br /><a href="http://www.quackit.com/html/codes/html_link_code.cfm"> <img src="http://rokenrol.si/img/manlogos/5.jpg" alt="css3 gallery" title="css3 gallery" /> </a> <img src="http://rokenrol.si/img/manlogos/5.jpg" alt="css3 gallery" title="css3 gallery" /> <img src="http://rokenrol.si/img/manlogos/5.jpg" alt="css3 gallery" title="css3 gallery" /><br /> <br /> </div> Edited September 13, 2013 by badfreek (see edit history) Link to comment Share on other sites More sharing options...
badfreek Posted September 15, 2013 Author Share Posted September 15, 2013 Hey vekia, did you managed to find something out? Thanks Link to comment Share on other sites More sharing options...
vekia Posted September 21, 2013 Share Posted September 21, 2013 hello sorry for late reply i totally lost your thread and forgor about it, today i found it and.... i tried to check your website but unfortunately it is under maintenance mode Link to comment Share on other sites More sharing options...
c-louder Posted May 15, 2014 Share Posted May 15, 2014 Hello I found this thread and am happy to ask another thing that hopefully fits in here Ehm, what I want to do is: In my header.tpl is this code .... <div id="logo_wrapper"> <div id="header_logo"> <a href="{$base_dir}" title="Gemeinsam - Einsam.."> <img class="logo" src="img/_logo/logo.png" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /> </a> </div> </div> {$HOOK_TOP} </div> Via HTMLbox/ContentBox I like to add content left or right of the logo.png in the header. I installed contentbox and hooked it into the header but it is misplaced. It hovers somewhere in the left top of the page. Maybe I can move it and place it via css but is there no way to to add a new "zone" where I can add the contentbox. PS: Do I need to enter the whole html stuff (head and body html) as badfreak did? To what purpose? I thought that html may be enough and the css via global.css for example. 1 Link to comment Share on other sites More sharing options...
c-louder Posted May 19, 2014 Share Posted May 19, 2014 Ok, I had to hook htmlbox into the TopOfPages region and so I could position it right (ony right) next to the logo wrapper. Would be help ful to have an image with all presta hooks or how these boxes are called. 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