Jump to content

Website design problem [solved]


Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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! :thumbs:

 

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;
}

Link to comment
Share on other sites

.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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

OK, that's all done now and working, thanks :thumbs:

 

Just waiting on my template customisation for the company logo to be sorted out. Should have in the next couple of days :)

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...