How to use my own custom images for buttons in Menu?

JoomTalk · #1 04-23-2008, 12:51 PM

I am creating my first Joomla web site, using my own template that I created in Photoshop and Dreamweaver, then adapting it to work with Joomla (v1.0.5).

I have hit a wall in figuring out how to use my custom rollover menu buttons in Joomla. They work well in the Non-Joomlaized CSS site, but I haven't yet discovered how to convert the CSS/Joomla coding to get them to work in my Joomla template.

CAn anyone help me here? I'm banging my head on the wall, and the wall ain't budging, just getting a headache!

Here is what the site should look like (link to a non-Joomlized html site):

HTML Code:

http://circledigital.com/AngelinaRef/AngelinaRef.html

Here is what it is presently looking like in Joomla without my custom rollover buttons:

HTML Code:

http://circledigital.com/AngelinaYoga2/

Here is the template_css.css coding:

Code:

body {
background-color: #529cc4;
background-image: url(../images/BkGrndImg.jpg);
background-repeat: repeat-x;
margin: 0 auto;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666; }

#container {
width: 765px;
margin: 0 auto;
background-color: #ffffff;
overflow:hidden;
 }

#header {
width: 765px;
height: 170px;
background-image: url(../images/Banner.jpg);
margin: 0 auto;
 }

#menu {
margin-left: 559px;
width: 206px;
height: 300px; }

     a.BtnHome {
          display: block;
          width: 206px;
           height: 33px;
          background: url(../images/Btn_Home.jpg) no-repeat 0em 0em;
           text-decoration: none;
           }
      a:hover.BtnHome {

          background-position: 0 -33px;
           } 

     a.BtnClass {
          display: block;
          width: 206px;
           height: 28px;
          background: url(../images/Btn_Classes.jpg) no-repeat 0em 0em;
           text-decoration: none;
           }
      a:hover.BtnClass {

          background-position: 0 -28px;
           }   

     a.BtnCal {
          display: block;
          width: 206px;
           height: 27px;
          background: url(../images/Btn_Cal.jpg) no-repeat 0em 0em;
           text-decoration: none;
           }
      a:hover.BtnCal {

          background-position: 0 -27px;
           }  
     a.BtnBio {
          display: block;
          width: 206px;
           height: 27px;
          background: url(../images/Btn_Bio.jpg) no-repeat 0em 0em;
           text-decoration: none;
           }
      a:hover.BtnBio{

          background-position: 0 -27px;
           }    
 a.BtnContact {
          display: block;
          width: 206px;
           height: 27px;
          background: url(../images/Btn_Contact.jpg) no-repeat 0em 0em;
           text-decoration: none;
           }
      a:hover.BtnContact{

          background-position: 0 -27px;
           }   
a.BtnFoot {
          display: block;
          width: 206px;
           height: 54px;
          background: url(../images/Btn_Foot.jpg) no-repeat 0em 0em;
           text-decoration: none;
           }

#content {
text-align: left;
width: 500px; 
margin: 0 auto;
float: left;
padding-right: 10px;
padding-left: 30px;
}

#footer {
clear:both;
width: 765px;
margin: 0 auto;
color: #ebebeb;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;
text-align: center;
padding: 10px; }.TitleFont {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #9dbc3d;
	font-size: 16px;
	font-weight: bold;
}
.MainTxt {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
}

***********************************

Here is the index.php coding:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php $iso = split( '=', _ISO ); echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $GLOBALS[mosConfig_live_site]; ?>/templates/<?php echo $GLOBALS[cur_template]; ?>/css/template_css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"></div>

<div id="container">
<div id="content">
<?php mosMainBody(); ?>
<?php mosLoadModules ( 'user1', -2 ); ?>
</div>
<div id="menu">
<?php mosLoadModules ( 'right', -2 ); ?>
</div>
</div>

<div id="footer">Site Map / Home / Classes / Bio / Calander / Contact<br />
Site Design By Circle Digital</div>
</body>
</html>

keliix06 · #2 04-27-2008, 03:12 AM

First thing's first, upgrade from 1.0.5. It's terribly insecure.

To complete the menu, I would move the person doing yoga out of the images and have her on her own div with a higher z-index. Then, have the text of the buttons real text so they are spiderable. Then, on the hover change the left padding and add the background image in.