ianw1974 Posted April 25, 2007 Report Share Posted April 25, 2007 Calling all web experts! As anyone who knows me here, I like to take the easy route and skip designing pages/buttons, etc, because I don't have the time to learn it all. I've just applied a new template to my website, which is running joomla. All the pages are php/css, and I've got a problem with the graphical buttons at the top right hand corner. Right now, there is no url assigned, and I'd like to assign a url, but got no idea how! There's nothing in the joomla administrator, and the template makers told me it's a coding problem. I've checked the source of the page after it's loaded, and I can see where the images load/rollover, but I cannot see what I need to put to create the links by editing the associated php file. Here's the link: http://www.linuxsolutions.org the buttons at the top are Home/News/Search/Contact. Hoping someone can help, really like the template, and want to start using it. I felt the old look and feel wasn't that great. Quote Link to comment Share on other sites More sharing options...
neddie Posted April 25, 2007 Report Share Posted April 25, 2007 The "website design" part of it is easy, as you said you just look at the source and it says <a href="#" for those images. If you want it to do something when you click on those images then you need to either put the url there instead of that # or you need to define something to do for onclick events, for example: <a href="#" onclick="loadNewsPage()" where obviously you've defined the associated javascript function somewhere. But you're doing this in php so the real question is how you generate this html. Show us your php! Although if the makers of the template say it's not possible then I'm not sure how we can help - they at least have the advantage over us of knowing what template you're using! PS/ I don't like the way the links on the left hop out of the way when you try to click on them, for what it's worth. I can see they still work but it looks like they're trying not to be clicked! :P Quote Link to comment Share on other sites More sharing options...
ianw1974 Posted April 25, 2007 Author Report Share Posted April 25, 2007 Yeah, I thought that was a little weird too with them moving. Have to see if I can change that. I realised about that # just now and the menu on the left worked really well, so I just copied the url from here, and pasted where each # was. So now I got it working. Thanks for that! I'll post the index.php, and maybe we can sort out that jumpy menu too while we're at it :) <?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?> <?php echo "<?xml version=\"1.0\"?>"; ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> <?php mosShowHead(); ?> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $GLOBALS[cur_template];?>/css/template_css.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico" /> <link rel="alternate" type="application/rss+xml" title="<?php echo $mosConfig_sitename?>" href="<?php echo $mosConfig_live_site;?>/index.php?option=com_rss&feed=RSS2.0&no_html=1" /> <script type="text/javascript"> function newImage(arg) { if (document.images) { rslt = new Image(); rslt.src = arg; return rslt; } } function changeImages() { if (document.images && (preloadFlag == true)) { for (var i=0; i<changeImages.arguments.length; i+=2) { document[changeImages.arguments[i]].src = changeImages.arguments[i+1]; } } } var preloadFlag = false; function preloadImages() { if (document.images) { siteground_Layer_11_over = newImage("<?php echo $mosConfig_live_site;?>/templates/siteground32/images/siteground_Layer-11-over.jpg"); siteground_Layer_9_copy_over = newImage("<?php echo $mosConfig_live_site;?>/templates/siteground32/images/siteground_Layer-9-copy-ove.jpg"); preloadFlag = true; } } </script> </head> <body onload="preloadImages();"> <center> <table cellpadding="0" cellspacing="0" border="0" class="height"> <tr> <td class="bg_left" rowspan="2" class="height"></td> <td valign="top" align="center"> <!-- --> <table width="900" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <table width="900" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="td1"></td> </tr> </table> </td> </tr> <tr> <td> <table width="900" height="29" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="td2"></td> <td> <a href="http://linuxsolutions.org/index.php?option=com_frontpage&Itemid=1" onmouseover="changeImages('siteground_Layer_11', '<?php echo $mosConfig_live_site;?>/templates/siteground32/images/siteground_Layer-11-over.jpg'); return true;" onmouseout="changeImages('siteground_Layer_11', '<?php echo $mosConfig_live_site;?>/templates/siteground32/images/siteground_Layer-11.jpg'); return true;"> <img name="siteground_Layer_11" src="<?php echo $mosConfig_live_site;?>/templates/siteground32/images/siteground_Layer-11.jpg" width="66" height="29" border="0" alt=""></a></td> <td class="td3"></td> <td> <a href="http://linuxsolutions.org/index.php?option=com_content&task=section&id=1&Itemid=2" onmouseover="changeImages('siteground_Layer_9_copy', '<?php echo $mosConfig_live_site;?>/templates/siteground32/images/siteground_Layer-9-copy-ove.jpg'); return true;" onmouseout="changeImages('siteground_Layer_9_copy', '<?php echo $mosConfig_live_site;?>/templates/siteground32/images/siteground_Layer-9-copy.jpg'); return true;"> <img name="siteground_Layer_9_copy" src="<?php echo $mosConfig_live_site;?>/templates/siteground32/images/siteground_Layer-9-copy.jpg" width="66" height="29" border="0" alt=""></a></td> <td class="td4"></td> <td> <a href="http://linuxsolutions.org/index.php?option=com_search&Itemid=5" onmouseover="changeImages('siteground_Layer_9_copy_2', '<?php echo $mosConfig_live_site;?>/templates/siteground32/images/siteground_Layer-9-copy-2-o.jpg'); return true;" onmouseout="changeImages('siteground_Layer_9_copy_2', '<?php echo $mosConfig_live_site;?>/templates/siteground32/images/siteground_Layer-9-copy-2.jpg'); return true;"> <img name="siteground_Layer_9_copy_2" src="<?php echo $mosConfig_live_site;?>/templates/siteground32/images/siteground_Layer-9-copy-2.jpg" width="81" height="29" border="0" alt=""></a></td> <td class="td5"></td> <td> <a href="http://linuxsolutions.org/index.php?option=com_contact&Itemid=3" onmouseover="changeImages('siteground_Layer_9_copy_3', '<?php echo $mosConfig_live_site;?>/templates/siteground32/images/siteground_Layer-9-copy-3-o.jpg'); return true;" onmouseout="changeImages('siteground_Layer_9_copy_3', '<?php echo $mosConfig_live_site;?>/templates/siteground32/images/siteground_Layer-9-copy-3.jpg'); return true;"> <img name="siteground_Layer_9_copy_3" src="<?php echo $mosConfig_live_site;?>/templates/siteground32/images/siteground_Layer-9-copy-3.jpg" width="112" height="29" border="0" alt=""></a></td> <td class="td6"></td> </tr> </table> </td> </tr> <tr> <td> <table width="900" height="493" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" class="td11" style="padding:70px 0px 10px 0px;"> <?php if ( mosCountModules( 'left' ) && ($_REQUEST["task"] != "edit") && ($_REQUEST["task"] != "new" ) ) { ?> <div class="vistaleft"> <?php mosLoadModules ( 'left', -3 ); ?> <? $sg = 'banner'; include "templates.php"; ?> </div> <?php } ?> </td> <td valign="top" class="td12"></td> <td valign="top" class="td13" style="padding:70px 0px 10px 0px;"> <?php if ( mosCountModules( 'right' ) && ($_REQUEST["task"] != "edit") && ($_REQUEST["task"] != "new" ) ) { ?> <div class="vistaright"> <?php mosLoadModules ( 'right', -3 ); ?> </div> <?php } ?> </td> <td valign="top" class="td14"></td> <td valign="top" class="td15"> <div class="vistamain"> <?php if ( mosCountModules( 'top' ) && ($_REQUEST["task"] != "edit") && ($_REQUEST["task"] != "new" ) ) { ?> <div class="vistatop"> <?php mosLoadModules ( 'top', -1 );?> </div> <?php } ?> <?php mosMainBody(); ?> </div> </td> </tr> </table> </td> </tr> </table> <table align="center"> <tr> <td class="td16"></td> </tr> <tr> <td> <span class="copyright"><? $sg = ''; include "templates.php"; ?></span> </td> </tr> </table> <!-- --> </td> <td class="bg_right"valign="top"><div class="bg_right_top"></div></td> </tr> </table> <!-- --> </center> </body> </html> edit: and the CSS file, in case the jumpy menu isn't in that! html { overflow-x:hidden; } /* ********************************************************************* */ body { overflow: -moz-scrollbars-vertical; font-family:Verdana, Arial, Helvetica, sans-serif; color:#fefefe; text-align:justify; height:100%; font-size: 10px; margin:0px; padding:0px; background-image:url(../images/body_bg.jpg); background-color: #283b8e; background-repeat:repeat-x; } .bg_left { background-image: url(../images/bg_left.jpg); background-repeat: repeat-x; background-position: right top; width:50%; height:100%; } .bg_right { background-image: url(../images/bg_right.jpg); background-position: left top; background-repeat: repeat-x; width:50%; height:100%; } .bg_right_top { background-image: url(../images/bg_right_top.jpg); background-repeat: no-repeat; background-position: left top; width:100%; height:100%; } td {font-size:10px;} a:link, a:visited, h3, .contentheading,.blog_more div strong { color:#fefefe; } .bg { background-image: url(../images/bg1.gif); background-repeat: repeat-x; } /* ********************************************************************* */ ul { margin:0; padding:0; margin-left:15px; } a { text-decoration:none; font-weight:bold; } ul li a, .pagenavcounter { font-weight:bold; } ul#mainlevel-nav { margin:0px; padding:0; height:33px; } ul#mainlevel-nav li { list-style: none; display:inline; height:33px; width:119px; } ul#mainlevel-nav li a { font-size:11px; color:white; font-weight:normal; text-align:center; background:url(../images/buttontop_normal.jpg) no-repeat; line-height:33px; height:33px; width:119px; display: block; float:left; } ul#mainlevel-nav li a:hover { color:white; font-size:11px; font-weight:normal; text-align:center; background:url(../images/buttontop_over.jpg) no-repeat; line-height:33px; height:33px; width:119px; display: block; float:left; } h3 { margin-bottom:10px; } .contentheading, .blog_more div strong { font-weight:bold; } .blog_more a { font-weight:normal; color:#fefefe; } .componentheading { color:#fefefe; padding-bottom:10px; margin-bottom:20px; } .module { margin:0; padding-bottom:10px; color:#fefefe; } .moduletable td { padding-left:5px; padding-right:5px; } .small { color:#666666; } .createdate, .modifydate { color:#999999; } #mod_login_username, #mod_login_password { width:120px; background-color:#fefefe; border:1px solid #205cc2; padding:2px; color:#249e15; font-size:10px; font-weight: bold; } .inputbox { background-color:#224c9f; border:1px solid #4e61b8; padding:2px; color:#fefefe; } .contenttoc { margin:10px; border:1px solid #CCCCCC; } .contenttoc td { text-align:left; padding-left:5px; padding-right:5px; } .contenttoc th { text-align:left; background-color:#DEDEDE; padding-left:5px; padding-right:5px; } .label { text-align:left; } .mosimage { border:1px solid #CCCCCC; margin:5px; } .mosimage_caption { background-color:#DEDEDE; } .sectiontableheader { font-weight: bold; } .sectiontableentry2 label { text-align:left; } .sectiontableentry2 { background-color:#1449bb; color:#fefefe; } .sectiontableentry1 { background-color:#30880e; color:#fefefe; } .sectiontableentry1 td div a, .sectiontableentry2 td div a { font-weight:bold; border:none; } h3, .contentheading { /*font-size:140%;*/ font-size:14px; font-weight:bold; } .componentheading { /*font-size:160%;*/ font-size:14px; font-weight:bold; letter-spacing: 2px; text-transform:uppercase; } img { border:none; } .contentpane {color:#fefefe;} .contentpaneopen { color:#fefefe; } .button { color: #fefefe; font-family: Verdana, Arial, Hevlvetica, sans-serif; text-align: center; font-size: 11px; font-weight: bold; border: 1px solid #09b523; background-image: url(../images/button.jpg); background-repeat:repeat-x; heght:18px; } .back_button { color: #fefefe; font-family: Arial, Hevlvetica, sans-serif; text-align: center; font-size: 11px; font-weight: bold; border: 3px double #cccccc; background:none; width: 50px; padding: 0px 5px; line-height: 18px !important; line-height: 16px; height: 19px !important; height: 19px; margin: 1px; } .pagenav_next { color: #fefefe; font-family: Arial, Hevlvetica, sans-serif; text-align: center; font-size: 11px; font-weight: bold; border: 3px double #cccccc; background:none; width: 50px; padding: 0px 5px; line-height: 18px !important; line-height: 16px; height: 19px !important; height: 19px; margin: 1px; } .pagenav_prev { color: #fefefe; font-family: Arial, Hevlvetica, sans-serif; text-align: center; font-size: 11px; font-weight: bold; border: 3px double #cccccc; background:none; width: 50px; padding: 0px 5px; line-height: 18px !important; line-height: 16px; height: 19px !important; height: 19px; margin: 1px; } .pagenav { text-align: center; font-size: 11px; font-weight: bold; border: 3px double #cccccc; background:none; width: auto; padding: 0px 10px; line-height: 20px; margin: 1px; } .pagenavbar { margin-right: 10px; float: right; } .vistaleft, .vistaright {width:155px;} /* ********************************************************************* */ .vistamain {padding:5px; width:485px;} .vistafooter {color:white;font-size:10px;background-repeat:no-repeat;background-color:#fefefe;} .vistafooter a:link, .vistafooter a:visited {font-weight:bold;color:gray;font-size:10px;} .pagenavbar { margin-right: 10px; float: right; } @media print{ .vistaleft, .vistauser1user1, .vistaright, .vistatop, .vistauser3, .noprint {display:none;} .print {width:100%;} body, .vistamain{background:none;} } /* ********************************************************************* */ .height { height: 100%; } .td1 { background-image: url(../images/siteground_01.jpg); background-repeat: no-repeat; width: 900px; height: 78px; } .td2 { background-image: url(../images/siteground_02.jpg); background-repeat: no-repeat; width: 538px; height: 29px; } .td3 { background-image: url(../images/siteground_04.jpg); background-repeat: no-repeat; width: 11px; height: 29px; } .td4 { background-image: url(../images/siteground_04.jpg); background-repeat: no-repeat; width: 11px; height: 29px; } .td5 { background-image: url(../images/siteground_04.jpg); background-repeat: no-repeat; width: 11px; height: 29px; } .td6 { background-image: url(../images/siteground_04.jpg); background-repeat: no-repeat; width: 4px; height: 29px; } .td11 { background-image: url(../images/siteground_11.jpg); background-repeat: no-repeat; background-color:#283b8e; width: 189px; height: 493px; } .td12 { background-image: url(../images/siteground_12.jpg); background-repeat: no-repeat; background-color:#283b8e; width: 18px; height: 493px; } .td13 { background-image: url(../images/siteground_13.jpg); background-repeat: no-repeat; background-color:#283b8e; width: 190px; height: 493px; } .td14 { background-image: url(../images/siteground_14.jpg); background-repeat: repeat-y; background-color:#283b8e; width: 18px; height: 493px; } .td15 { background-image: url(../images/siteground_15.jpg); background-repeat: no-repeat; background-color:#283b8e; width: 485px; height: 493px; } .td16 { background-color:#99d54b; width: 900px; height: 20px; } .copyright { font-weight:bold; color: #99d54b; font-family: Verdana; font-size:10px; } /* LEFT --------------------------------------------------------------------------------------- */ .vistaleft a.mainlevel:link, .vistaleft a.mainlevel:visited { display: block; vertical-align: middle; font-size: 10px; text-align: left; padding-left:0px; padding-top: 5px; height: 16px; width:150px; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #14a41e; color:#fefefe; } .vistaleft a.mainlevel:hover { text-decoration: none; border-bottom-color: #14a41e; color: #fefefe; text-align: right; } .vistaleft a.sublevel:link, .vistaleft a.sublevel:visited { display: block; vertical-align: middle; font-size: 10px; text-align: left; padding-left:0px; padding-top: 5px; height: 16px; width:150px; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #14a41e; color:#fefefe; } .vistaleft a.sublevel:hover { text-decoration: none; border-bottom-color: #14a41e; color: #fefefe; text-align: right; } .vistaleft {padding:5px;} .vistaleft .module h3 { padding-left:10px; margin:20 0 5 -5; color:white; line-height:18px; height:18px; font-size:12px; width:150px; background:url(../images/title.jpg) no-repeat; background-position: top right; } /* END LEFT --------------------------------------------------------------------------------------- */ /* RIGHT --------------------------------------------------------------------------------------- */ vistaright a.mainlevel:link, .vistaright a.mainlevel:visited { display: block; vertical-align: middle; font-size: 10px; text-align: left; padding-left:0px; padding-top: 5px; height: 16px; width:150px; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #14a41e; color:#fefefe; } .vistaright a.mainlevel:hover { text-decoration: none; border-bottom-color: #14a41e; color: #fefefe; text-align: right; } .vistaright a.sublevel:link, .vistaright a.sublevel:visited { display: block; vertical-align: middle; font-size: 10px; text-align: left; padding-left:0px; padding-top: 5px; height: 16px; width:150px; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #14a41e; color:#fefefe; } .vistaright a.sublevel:hover { text-decoration: none; border-bottom-color: #14a41e; color: #fefefe; text-align: right; } .vistaright {padding:5px;} .vistaright .module h3 { padding-left:10px; margin:20 0 5 -5; color:white; line-height:18px; height:18px; font-size:12px; width:150px; background:url(../images/title.jpg) no-repeat; background-position:right; } /* END RIGHT --------------------------------------------------------------------------------------- */ /* -------------------------- */ a.sgfooter:link, a.sgfooter:visited { color : #99d54b; font-size : 11px; font-family: Arial; text-decoration:none; } a.sgfooter:hover { color : #99d54b; font-family: Arial; text-decoration:none; } .sgf { font-size: 9px; font-family: Verdana,Arial,Helvetica,sans-serif; color: #fff; text-decoration:none; } .sgf1 { font-size: 10px; font-family: Verdana,Arial,Helvetica,sans-serif; color: #fff; text-align:left; } a.sglink:link, a.sglink:visited { color : #fff; font-size : 11px; font-family: Arial; text-decoration:none; } a.sglink:hover { color : #fff; font-family: Arial; text-decoration:none; } Quote Link to comment Share on other sites More sharing options...
neddie Posted April 25, 2007 Report Share Posted April 25, 2007 .vistaleft a.mainlevel:hover { text-decoration: none; border-bottom-color: #14a41e; color: #fefefe; text-align: right; } There's your culprit - the text align is "right" when you hover. You could maybe change the highlighting (the color bit) or change the position slightly (maybe indenting with a margin-left) or some other way of making it stand out rather than aligning it to the right. Quote Link to comment Share on other sites More sharing options...
ianw1974 Posted April 25, 2007 Author Report Share Posted April 25, 2007 Nice one neddie, really appreciate it. I should take more time reading these files to find this stuff. I've just figured that a good colour might be #2b9914 which matches the green from the template itself. I've tested on my webserver here, I've not jet modified the css on my live server to make sure it's OK. I have to connect remotely, so shall check that out a bit later on and make them changes. Quote Link to comment Share on other sites More sharing options...
ianw1974 Posted April 25, 2007 Author Report Share Posted April 25, 2007 OK, that's all done now and working, thanks Just waiting on my template customisation for the company logo to be sorted out. Should have in the next couple of days :) Quote Link to comment Share on other sites More sharing options...
neddie Posted April 25, 2007 Report Share Posted April 25, 2007 Quote Link to comment Share on other sites More sharing options...
ianw1974 Posted April 25, 2007 Author Report Share Posted April 25, 2007 Darn, they did the logo quick. I'm now up and running fully Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.