Zikula Community

• dl7und
  
  

  • Rank: Softmore
  • Registered: Aug 12, 2003
  • Last visit: Mar 08, 2010
  • Posts: 111

  Posted: Sep 18, 2006 - 11:04 PM

  I am trying to modify parts of the Apple2XTE theme. The quicklink buttons are originally images with the text included. Since I would like to make the site a bit more multilingual, I need to have blank buttons in the background with text as overlay.
  
  
  Please don't laugh when you see the code, I am not a HTML or CSS crack, and I only started to modify a small portion of the main template.
  
  
  This is how the quicklink buttons were originally done:
  

  Code

  <td valign="bottom"><a href="index.php?module=pagesetter&func=pubedit&tid=8&goback=1"
  onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('Image12','','
  <!--[$imagepath]-->/blue100_crepair.gif',1)">
  <img src="<!--[$imagepath]-->/grey100_crepair.gif" alt="Campus Repair"
  name="Image12" width="100" height="26" border="0"></a>...(three more buttons following)... </td>

  
  I wanted to replace the javascript flyover with CSS, so I did this:
  

  Code

  <td valign="bottom"><td valing="bottom" width=100 height=26>
  <div class="quick"><a href="index.php?module=pagesetter&func=pubedit&tid=8&goback=1">Support</a></div></td>...

  
  I created another cell for the first button, and inside a div. The blank button image consists of two buttons side by side (one in colour, one in grey) and will be switched through CSS:
  

  Code

  /* div for CSS flyover image swap */
  .quick a {
  display: block;
  width: 100px;
  height: 26px;
  vertical-align: middle;
  background: transparent url(../images/double.gif) no-repeat;
  COLOR: #000000; FONT-SIZE: 14px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; text-align: center; vertical-align: middle; TEXT-DECORATION: none
  }
  
  .quick a:hover {
  background-position: -100px 0;
  COLOR: #FFFFFF; FONT-SIZE: 14px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none
  }

  
  The flyover works fine, but I can only control the button text horizontally. Whatever I try, I can not get it down into the middle or to the bottom of that button/div/td. Just look at the "Support" button here.
  
  
  Is anyone out there with a suggestion what I am doing wrong or how I could fix this?
  
  
  
  edited by: dl7und, Sep 19, 2006 - 07:06 PM
  
  --
  And out of the chaos sounded a voice and spoke: "Be happy and smile, for it could have come worse."
  And I was happy and smiled - and it came worse...

  • 
  •  
• AmmoDump
  
  

  • Rank: Team Member
  • Registered: Dec 07, 2003
  • Last visit: May 09, 2010
  • Posts: 2703

  Posted: Sep 19, 2006 - 12:58 AM

  Some random thoughts:
  
  Instead of using a single CSS page, use one for each language.
  Use some PHP code to determine the language... and pass it to a different CSS file..
  
  check lang? > $lang_return > if lang1 then lang1.css, or ...lang2.css or ...lang3.css
  
  ...you get the idea
  
  seems easier then swaping... just an idea
  
  
  
  
  
  --
  David Pahl
  Zikula Support Team

  • 
  •  
• dl7und
  
  

  • Rank: Softmore
  • Registered: Aug 12, 2003
  • Last visit: Mar 08, 2010
  • Posts: 111

  Posted: Sep 19, 2006 - 05:26 PM

  Thanks, but... That's not really my problem. The graphics part is going fine and the language problem is solved through "regular" Postnuke means. The "Support" one can see on the button is only for test purposes there, until I fixed the text positioning problem (Which is my actual problem...). After that, I'll replace it with a PNML tag and everything will be just fine...
  
  So, what I really need is to find out how to get that word "Support" down a bit, ideally into the (vertical) centre of that button or maybe to its bottom/base line, but middle should be best.
  
  --
  And out of the chaos sounded a voice and spoke: "Be happy and smile, for it could have come worse."
  And I was happy and smiled - and it came worse...

  • 
  •  
•  
•  

Users on-line

• internetking

This list is based on users active over the last 60 minutes.