By doomed on

This is a question related to the Pixelgreen Drupal theme - http://alldrupalthemes.com/pixelgreen.html .

I'm using the i18n module which gives a block for language selection. The problem is that this block doesnt look very nice on Pixelgreen so i'm looking for help on how to fix this.

Here are some screenshots:

Language block on Garland (looks good):
http://img237.imageshack.us/my.php?image=garlandgoodlanguageblocph9.jpg

Language block on Pixelgreen (looks very bad):
http://img257.imageshack.us/my.php?image=pixelgreenweirdlanguagewy8.jpg

Regards.

⋅ Categories: Drupal 5.x

Comments

jurriaanroelofs’s picture

jurriaanroelofs commented

Hi, the problem is that the stylesheet is trying to theme the list as a menu. If you provided a link I could have given you some code but if you know a little CSS, you have to style the unordered list in your block, something like;

.block-somelanguageblock ul li {
padding:1px;
margin:0;
}

-------------------------------
peach from All Drupal Themes

-------------------------------
http://www.sooperthemes.com/#-Drupal-Themes

doomed’s picture

doomed commented

Hi!

I have this site running locally so i can't put a link but here's the pertaining code (copied from a Firefox output):


    <div class="block block-i18n" id="block-i18n-0">
    
    <h2>Languages</h2>
    
        <div class="content">
            <div class="item-list">
                <ul>
                    <li><span class="i18n-link"><a class="active" href="/myimobiliaria/en"><img width="16" height="12" alt="English" class="i18n-icon" src="/myimobiliaria/sites/all/modules/i18n/flags/en.png"/></a> <a class="active" href="/myimobiliaria/en">English</a></span></li>
                    
                    <li><span class="i18n-link"><a href="/myimobiliaria/pt"><img width="16" height="12" alt="Portuguese" class="i18n-icon" src="/myimobiliaria/sites/all/modules/i18n/flags/pt.png"/></a> <a href="/myimobiliaria/pt">Português</a></span></li>
                </ul>
            </div>
        </div>

    </div>

What change do you suggest? And where (core style or pixelgreen theme style) ?

jurriaanroelofs’s picture

jurriaanroelofs commented

.block-i18n .item-list ul li {
padding:1px;
margin:0;
}

Try this, I haven't tested it though.

-------------------------------
peach from All Drupal Themes

-------------------------------
http://www.sooperthemes.com/#-Drupal-Themes

doomed’s picture

doomed commented

This doesnt do anything :(

doomed’s picture

doomed commented

Here's output code taken when using the Garland theme:


<div class="clear-block block block-i18n" id="block-i18n-0">

<h2>Languages</h2>

  <div class="content">
      <div class="item-list">
          <ul>
              <li><span class="i18n-link"><a href="/myimobiliaria/en/admin"><img width="16" height="12" alt="English" class="i18n-icon" src="/myimobiliaria/sites/all/modules/i18n/flags/en.png"/></a> <a href="/myimobiliaria/en/admin">English</a></span></li>
              
              <li><span class="i18n-link"><a class="active" href="/myimobiliaria/pt/admin"><img width="16" height="12" alt="Portuguese" class="i18n-icon" src="/myimobiliaria/sites/all/modules/i18n/flags/pt.png"/></a> <a class="active" href="/myimobiliaria/pt/admin">Português</a></span></li>
          </ul>
      </div>
  </div>
    
</div>

And btw, my problem remains because i dont know what to change. So any help is appreciated.

doomed’s picture

doomed commented

Well, i'm almost there.

By removing image borders and changing "display: block" to "display: inherit" on the theme's style.css, it looks better now:

/*ADT*/#sidebar ul {padding:0;}
/***ADT***/
#sidebar ul a {
display:block; <<<<---------------- HERE
font-weight:normal;
color: #333;
padding:2px 0 3px 15px;
line-height: 1.6em;
border-bottom: 1px dashed #D4D4D4;
text-decoration:none;
}

Two problems remain though, check screenshot:
http://img503.imageshack.us/my.php?image=2links1rowqz1.png

1) the flag and the word are two different links, so the little tab on the left gets duplicated
2) the underline below navigation links dont apply correctly to the Language block.