Customising Horizontal Navigation Help Please

[bobski101]

Hi All,

I am new to the forum and new to CMSms. I have managed to take my simple HTML template and have now integrated it into CMSms.

I am currently using the latest Version of CMSms 1.9.4.2

My first issue is that I have managed to get my navigation to display horizontally - Great! BUT the issue I have is that it looks terrible and I would like to style the text a bit more and have the active page link a different colour. I hope this makes sense. If anyone could help me with this it would be great! I have no idea which files to start editing etc..

Once again I am new to CMSms BUT i do have experience with HTML, CSS and PHP.

Many Thanks In Advance for your help

Bobski101

[M@rtijn]

A link to the website in question would help

[bobski101]

www.benhussenet.co.uk/jp


This is where I have it installed. Below is my code aswell.

<!--
/* Comment Styles */
#comments textarea {
width:331px;
height:200px;
}

/*menu styles*/
ul#menu {
font-size: 20px;
margin-top: 0;
//margin-left: 100px;
//padding-left: 50px;
//padding-top:5px;
pading-bottom: -20px;
color: #000000;
}
ul#menu li {
padding: 0px;
margin-right: 20px;
list-style: none;
display: inline;
color:#ff000000;
}
ul#menu li a {
text-decoration:none;
color:#000000;
}
ul#menu li a:hover {
text-decoration:none;
color:#ff0000;
}
/*end of menu styles*/
body {
background-color: #262626;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(http://benhussenet.co.uk/jp/images/main/bgrt.png);
background-repeat: repeat-x;
}


h1 {
font-family: "Trebuchet MS";
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}

h1 li a:hover {
text-decoration:none;
color:#ff0000;
}

.free {
font-family: "Trebuchet MS";
font-size: 14px;
font-weight: bold;
text-decoration:underline;
color: #FF0000;
}
.fineprint {
font-family: Tahoma;
font-size: 9px;
font-style:italic;
color:#FFFFFF;
}
.copyright {
font-family: Tahoma;
font-size: 9px;
font-style:italic;
color:#FFFFFF;
text-align:center;
}
a.copyright {
font-family: Tahoma;
font-size: 9px;
font-style:italic;
color:#FFFFFF;
text-align:center;
}
.intro {
font-family: Tahoma;
font-size: 13px;
color:#FFFFFF;
}
label {
font-family: Tahoma;
font-size: 13px;
color:#FFFFFF;
font-weight:bold;
}
.main {
font-family: Tahoma;
font-size: 12px;
color:#FFFFFF;
}
.songtitle {
font-family: Tahoma;
font-size: 12px;
color:#FFFFFF;
font-weight:bold;
}
.style2 {
font-family: Tahoma;
font-size: 12px;
}
-->

#nav
{
}

#nav a
{
/*---------*/
text-decoration: none;
color: white;
/*---------*/
}

#nav a:hover
{
/*---------*/
text-decoration: none;
color: white;
/*---------*/
}

#dropmenudiv
{
position: absolute;
border-bottom-width: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
line-height:18px;
z-index: 100;
margin-top: 2px;
}

#dropmenudiv a.link
{
width: 100%;
height: 22px;
display: block;
text-indent: 8px;
text-decoration: none;
font-weight: bold;
background:url("images/linklink_h.gif") no-repeat;
color: #fff;
}

#dropmenudiv a.link:hover
{
width: 100%;
height: 22px;
display: block;
text-indent: 8px;
text-decoration: none;
font-weight: bold;
background:url("images/linklink_n.gif") no-repeat;
color: #B00000;
}

#dropmenudiv a.bot
{
width: 100%;
height: 22px;
display: block;
text-indent: 8px;
text-decoration: none;
font-weight: bold;
background:url("images/linkbot_n.gif") no-repeat;
color: #fff;
}

#dropmenudiv a.bot:hover
{
width: 100%;
height: 22px;
display: block;
text-indent: 8px;
text-decoration: none;
font-weight: bold;
background:url("images/linkbot_h.gif") no-repeat;
color: #B00000;
}

#dropmenudiv a.top
{
width: 100%;
height: 22px;
display: block;
text-indent: 8px;
text-decoration: none;
font-weight: bold;
background:url("images/linktop_n.gif") no-repeat;
color: #fff;
}

#dropmenudiv a.top:hover
{
width: 100%;
height: 22px;
display: block;
text-indent: 8px;
text-decoration: none;
font-weight: bold;
background:url("images/linktop_h.gif") no-repeat;
color: #B00000;
}
.style4 {font-size: 7px}

/* comment script */

#c5t_body {
width:100%;
text-align:center;
color: #FFFFFF;
font-family: "Trebuchet MS";
}

#c5t_body a:link,
#c5t_body a:visited,
#c5t_body a:active {
text-decoration:none;
color:#FFFFFF;

}


#c5t_body a:hover {
color:#FFFFFF;
text-decoration:underline;
}
#c5t_bodycontent{
text-align:left;
font-size:100%;
line-height:140%;
}
.c5t_system {
padding:10px;
width:80%;
margin-bottom:10px;
border: 1px solid #000000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color:#333333;
}

.c5t_debug {
padding:10px;
margin-bottom:10px;
border: 1px solid #000000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color:#333333;
}


.c5t_comment_form_background {
padding:8px;
background-color:#333333;
width:80%;
margin-top:30px;
border: 1px solid #000000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.c5t_comment_form_table {
width:80%;
padding:5px;
background-color:#333333;
}

.c5t_comment_form_field input,
.c5t_comment_form_field select,
.c5t_comment_form_field textarea {
width:325px;
background-color:#666666;
font-size:1em;
border: 1px solid #000000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
c5t_comment_form_field input,
c5t_comment_form_field select,
c5t_comment_form_field textarea {
width:325px;
background-color:#666666;
font-size:1em;
border: 1px solid #000000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.c5t_comment_form_label {
vertical-align:top;
width:150px;
}

.c5t_comment_list {
margin-bottom:10px;
}



.c5t_comment_item_background {
padding:8px;
background-color:#333333;
width:350px;
margin-top:30px;
margin-bottom:10px;
border: 1px solid #000000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.c5t_comment_item {
padding:5px;
background-color:#333333;
overflow:auto;
}

.c5t_comment_item_details {
font-size:70%;
}

.c5t_comment_item_text {
margin-top:10px;
margin-bottom:10px;
}



.c5t_comment_form_submit input {
margin-top:20px;
color:#FFFFFF;
background-color:#222222;
border: 1px solid #000000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.c5t_headline {
font-size:110%;
}

.c5t_comment_item_title {
margin:0 0 10px 0;
font-weight:bold;
}


.c5t_error_message {
color:#FF0000;
}

.c5t_error_message_item {
padding-bottom:10px;
}



.c5t_installation_form {
margin-bottom:30px;
}

.c5t_installation_form legend {
font-weight:bold;
}

.c5t_installation_form_label {
font-weight:bold;
width:160px;
}

.c5t_frontend_pagination {
margin:15px 0 15px 0;
}

.c5t_frontend_pagination a {
border: 1px solid #000000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:3px 10px;
text-decoration:none;
font-size:90%;
font-weight:bold;
color:#000000;
}

.c5t_frontend_pagination span {
border: 1px solid #000000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:3px 10px;
text-decoration:none;
font-size:90%;
font-weight:bold;
}

.c5t_frontend_pagination form {
display:inline;
}
.c5t_frontend_pagination input {
cursor:pointer;
border: 1px solid #000000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:2px 10px;
text-decoration:none;
font-size:90%;
font-weight:bold;
color:ffffff;
background-color:#FFFFFF;
}


.c5t_link_button {
margin:15px 0 35px 0;
}

.c5t_link_button a {
border: 1px solid #000000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:3px 10px;
text-decoration:none;
font-size:90%;
font-weight:bold;
}

.c5t_link_button a:hover {
border: 1px solid #000000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;s
padding:3px 10px;
text-decoration:none;
font-size:90%;
font-weight:bold;
color:#6898FF;
background-color:#F4F9FF;
}

input[type="submit"] {
border: 1px solid #000000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-size:90%;
text-decoration:none;
padding:2px 4px;
}

input[type="submit"]:hover {
border:1px inset #000000;
}

.c5t_link_submit_button a:link,
.c5t_link_submit_button a:visited {
border: 1px solid #000000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color:#333333;
font-size:90%;
text-decoration:none;
padding:3px 5px;
}

.c5t_link_submit_button a:hover,
.c5t_link_submit_button a:active {
border:1px inset #000000;
}




#c5t_language_selector {
font-size:70%;
line-height:140%;
text-align:right;
margin-bottom:25px;
}

#c5t_language_selector a {
margin-left:5px;
}

/* AUDIO PLAYER */

div.jp-single-player,
div.jp-playlist-player {

/* Edit the font-size to counteract inherited font sizing.
* Eg. 1.25em = 1 / 0.8em
*/

font-size:12PX;

font-family:Trebuchet MS;
line-height:1.6;
color: #666;
width:100%
}
div.jp-interface {
position: relative;
background-color:#eee;
width:100%;
height:80px;
border:1px solid #009be3;
}
div.jp-single-player div.jp-interface {
border-bottom:none;
}
div.jp-playlist-player div.jp-interface {
}

div.jp-interface ul.jp-controls {
list-style-type:none;
padding:0;
margin: 0;
}
div.jp-interface ul.jp-controls li {
position: absolute;
}
div.jp-interface ul.jp-controls a {
position: absolute;
overflow:hidden;
text-indent:-9999px;
}
a.jp-play,
a.jp-pause {
top:20px;
width:40px;
height:40px;
}
div.jp-single-player a.jp-play,
div.jp-single-player a.jp-pause {
left:40px;
}
div.jp-playlist-player a.jp-play,
div.jp-playlist-player a.jp-pause {
left:48px;
}
a.jp-play {
background: url("/images/jplayer.blue.monday.jpg") 0 0 no-repeat;
}
a.jp-play:hover {
background: url("/images/jplayer.blue.monday.jpg") -41px 0 no-repeat;
}
a.jp-pause {
background: url("/images/jplayer.blue.monday.jpg") 0 -42px no-repeat;
display: none;
}
a.jp-pause:hover {
background: url("/images/jplayer.blue.monday.jpg") -41px -42px no-repeat;
}
a.jp-stop {
top:26px;
background: url("/images/jplayer.blue.monday.jpg") 0 -83px no-repeat;
width:28px;
height:28px;
}
div.jp-single-player a.jp-stop {
left:90px;
}
div.jp-playlist-player a.jp-stop {
left:126px;
}
a.jp-stop:hover {
background: url("/images/jplayer.blue.monday.jpg") -29px -83px no-repeat;
}
a.jp-previous {
left:20px;
top:26px;
background: url("/images/jplayer.blue.monday.jpg") 0 -112px no-repeat;
width:28px;
height:28px;
}
a.jp-previous:hover {
background: url("/images/jplayer.blue.monday.jpg") -29px -112px no-repeat;
}
a.jp-next {
left:88px;
top:26px;
background: url("/images/jplayer.blue.monday.jpg") 0 -141px no-repeat;
width:28px;
height:28px;
}
a.jp-next:hover {
background: url("/images/jplayer.blue.monday.jpg") -29px -141px no-repeat;
}
div.jp-progress {
position: absolute;
overflow:hidden;
top:32px;
background-color: #ddd;
width:122px;
height:15px;
}
div.jp-single-player div.jp-progress {
left:130px;
}
div.jp-playlist-player div.jp-progress {
left:164px;
}
div.jp-load-bar {
background: url("/images/jplayer.blue.monday.jpg") 0 -202px repeat-x;
width:0px;
height:15px;
cursor: pointer;
}
div.jp-play-bar {
background: url("/images/jplayer.blue.monday.jpg") 0 -218px repeat-x ;
width:0px;
height:15px;
}
a.jp-volume-min {
top:32px;
background: url("/images/jplayer.blue.monday.jpg") 0 -170px no-repeat;
width:18px;
height:15px;
}
div.jp-single-player a.jp-volume-min {
left:274px;
}
div.jp-playlist-player a.jp-volume-min {
left:296px;
}
a.jp-volume-min:hover {
background: url("/images/jplayer.blue.monday.jpg") -19px -170px no-repeat;
}
a.jp-volume-max {
top:32px;
background: url("/images/jplayer.blue.monday.jpg") 0 -186px no-repeat;
width:18px;
height:15px;
}
div.jp-single-player a.jp-volume-max {
left:346px;
}
div.jp-playlist-player a.jp-volume-max {
left:368px;
}
a.jp-volume-max:hover {
background: url("/images/jplayer.blue.monday.jpg") -19px -186px no-repeat;
}

div.jp-volume-bar {
position: absolute;
overflow:hidden;
top:37px;
background: url("/images/jplayer.blue.monday.jpg") 0 -250px repeat-x;
width:46px;
height:5px;
cursor: pointer;
}
div.jp-single-player div.jp-volume-bar {
left:292px;
}
div.jp-playlist-player div.jp-volume-bar {
left:314px;
}
div.jp-volume-bar-value {
background: url("/images/jplayer.blue.monday.jpg") 0 -256px repeat-x;
width:0px;
height:5px;
}
div.jp-play-time,
div.jp-total-time {
position: absolute;
top:49px;
width:122px;
font-size:.64em;
font-style:oblique;
}
div.jp-total-time {
text-align: right;
}
div.jp-single-player div.jp-play-time,
div.jp-single-player div.jp-total-time {
left:130px;
}
div.jp-playlist-player div.jp-play-time,
div.jp-playlist-player div.jp-total-time {
left:164px;
}
div.jp-playlist {
width:418px;
}
div.jp-playlist ul{
list-style-type:none;
margin:0;
padding:0 20px;
background-color:#ccc;
border:1px solid #009be3;
border-top:none;
width:100%;
font-size:.72em;
}
div.jp-single-player div.jp-playlist li {
padding:5px 0 5px 20px;
font-weight:bold;
}
div.jp-playlist-player div.jp-playlist li {
padding:5px 0 4px 20px;
border-bottom:1px solid #eee;
}
div.jp-playlist-player div.jp-playlist li.jplayer_playlist_item_last {
padding:5px 0 5px 20px;
border-bottom:none;
}
div.jp-playlist-player div.jp-playlist li.jplayer_playlist_current {
list-style-type:square;
list-style-position:inside;
padding-left:8px;
}
div.jp-playlist-player div.jp-playlist a {
color: #666;
text-decoration: none;
}
div.jp-playlist-player div.jp-playlist a:hover {
color:#0d88c1;
}
div.jp-playlist-player div.jp-playlist a.jplayer_playlist_current {
color:#0d88c1;
}