Hi there,
I have purchased a site switcher and would like to add the code below the search box.
Can you show me how to add this feature? Do you need to see the files?
Thanks,
Dee
How can I add switcher below the search box?
10 posts from 2 voices- Started 2 years ago by creativeluv
- Latest reply from Dude
- This topic is not a support question
-
creativeluv
MemberThis is the CSS file:
.switcher ul.dropdown {
width: 252px;
min-height: 100px;
padding: 16px 0px 14px;
display: block;background: #232323;
border: 1px solid #565044;-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;position: relative;
margin-left: -9999px;
margin-top: -72px;
}.switcher ul.dropdown li {
display: inline-block;
width: 220px;
height: 50px;padding: 12px 16px 4px 16px;
}.switcher ul.dropdown li:hover {
background: #20201f;
border: 1px solid #565044;
border-width: 1px 0px;
height: 48px;
margin: -1px 0px 1px;
}.switcher ul.dropdown li a{
display: inline-block;
width: 220px;
height: 50px;
}.switcher a.switchbutton {
display: inline-block;
text-indent: -9999px;
width: 13px;
height: 21px;position: relative;
top: -15px;
left: 1px;background: url('../i/switcher.png') no-repeat 0px 0px transparent;
}.switcher a.switchbutton:hover {
background-position: -13px 0px;
}.switcher a.switchbutton:active + ul.dropdown, ul.dropdown:hover {
margin-left: -17px;
}and this is the HTML code:
<span class="switcher"> <a href="#" title="ThemeForest"><img src="i/themeforest.png" alt="themeforest" /></a> <a href="#">switchbutton</a> <ul class="dropdown"> <li><a href="#" title="ThemeForest"><img src="i/themeforest.png" alt="themeforest" /></a></li> <li><a href="#" title="CodeCanyon"><img src="i/codecanyon.png" alt="codecanyon" /></a></li> <li><a href="#" title="3dOcean"><img src="i/3docean.png" alt="3docean" /></a></li> <li><a href="#" title="ActiveDen"><img src="i/activeden.png" alt="activeden" /></a></li> </span>It is something like what Themeforest did with their logo on the left. But I would like to add this feature below the search box..I think it would be much better right?
Thanks a lot!
Posted 2 years ago # -
Hey,
open up header.php and insert the html code you posted above (doesn't seem to be 100% correct though - i.e. the closing ul tag is missing) after following code:
<!-- end social_bookmarks-->Then open up custom.css (located in the folder "css") and paste in the css code you posted above. At least add following code to custom.css (after the code you posted above):
.switcher{ position: absolute right: 20px; top: 70px; }The site switcher seems to be a pure css solution - I like it because it's unobtrusive. Adjust the top and the right value as you like. If you increase the top value the site switcher will move towards the bottom, if you increase the right value it will move towards the logo on the left.
Posted 2 years ago # -
creativeluv
MemberThanks a lot for the guide. It's working actually but when I roll over to the switcher and try to click on one of the link, the drop-down switcher disappeared.
By the way, I found out the tabs and toggles are not working and they were aligned vertically instead. I tried it on another test subdomain and still the same. Perhaps you guys can check on it?
Thanks!
Posted 2 years ago # -
Can you create me an admin account and send me the login details to: kriesi2000-dude@yahoo.com - if I find a quick solution I'll fix it.
Posted 2 years ago #
Reply
You must log in to post.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
