Add language flags + links to top right ? « Support Forum | Kriesi.at

Support Forum » Avisio

Add language flags + links to top right ?

9 posts from 4 voices

Started 2 years ago by cucelyum
Latest reply from Dude
This topic is resolved

Tags:

cucelyum
Member

Hi ...

I want to put language flags to the right top of the screen and link the flags to the other language web sites ...

How can I do this ?

Thanks

Posted 2 years ago #

Dude
Dude

In header.php you'll find this code:

<div id="head">

<h2 class="logo <?php echo $logoclass; ?>"><a class='ie6fix' href="<?php echo get_settings('home'); ?>/"><?php echo $logo; ?></a></h2>

			<!-- Navigation for Pages starts here -->

Relace it with:

<div id="head">

<h2 class="logo <?php echo $logoclass; ?>"><a class='ie6fix' href="<?php echo get_settings('home'); ?>/"><?php echo $logo; ?></a></h2>

<ul class="social_bookmarks">
<li class='flag_1'><a class='ie6fix' href="link-to-first-website.html" >Language 1</a></li>
<li class='flag_2'><a class='ie6fix' href="link-to-second-website.html">Language 2</a></li>
</ul>

			<!-- Navigation for Pages starts here -->

Then you need to define your "flag images" in css and adjust some things (maybe increase header height, etc.)

Example css code - write it into style1, style2 or style3 (depending on the style you're Avisio running with:

.social_bookmarks .flag_1 a{background: transparent url(../images/shared/flag_1_16.png) 0 0  no-repeat;}
.social_bookmarks .flag_2 a{background: transparent url(../images/shared/flag_2_16.png) 0 0  no-repeat;}

The Dude

Posted 2 years ago #

cucelyum
Member

Thanks dude I will try now and let you know ...

Great support

Posted 2 years ago #
cucelyum
Member

Man that worked awsome...

Thank you

Posted 2 years ago #
cucelyum
Member

http://69.89.31.122/~asrinpla/main/

Dude there is a problem with the icons that, when you rollover the flags it doesnt turn to hand cursor ... and it becomes hand cursor when you rollover 10pixels down of the flags ...

What can I do ?

Posted 2 years ago #

Dude
Dude

Try to add an z-index value - it looks like an other element is overlapping you flags. Try this code:

.social_bookmarks .flag_1 a{
background: transparent url(../images/shared/flag_1_16.png) 0 0  no-repeat;
z-index:10;
}
.social_bookmarks .flag_2 a{
background: transparent url(../images/shared/flag_2_16.png) 0 0  no-repeat;
z-index:10;
}

Posted 2 years ago #

James Morrison
Former Team Member

Hey!

Add this to the end of style.css:

#top .nav { height: auto !important; }

The navigation is overlapping the flags so they can't be clicked on.

Best regards,
James

Posted 2 years ago #
lemedia
Member

Hi,

i've used your recipe for adding 2 flags in 16x16 px and it works great.

I wondered if it would be possible to make the same with flags which are 32x32 ?
(i find the 16x16 a bit small)

thanks
john

Posted 2 years ago #
Dude
Dude

The size of the flags doesn't matter. Both solutions (z-index or !important) should work.

The Dude

Posted 2 years ago #