Get started with PHP-Fusion

Start a New Thread

Users Participated

  • afif
    Post made: 3
  • HobbyMan
    Post made: 3
  • welshmatt123
    Post made: 7

  1. PHP-Fusion Support Forums
  2. PHP-Fusion 7 Support
  3. Content Administration

Navigation Bar CSS Change?

This forum is for questions regarding the addition of content to your site

12 Replies 3,646 Views Last Updated on 7 years ago

welshmatt123


Junior Member

#1

Posted 7 years ago

Hi, I want to change the text colour of my navigation bar to white.

The only way I can do it at the moment is by changing the A. attributes in the CSS but that also changes all the other text links on the website.

www.wpa8ball.host22.com/dump/nav.jpg

Here is my CSS file

a {
color : #B00000;
text-decoration : none;
}

a:hover {
color : #DD6900;
text-decoration : underline;
}

a.side {
color : #000000;
text-decoration : none;
}

a:hover.side {
color : #DD6900;
text-decoration : underline;
}

a.white {
color : #ddd;
text-decoration : none;
}

a:hover.white {
color : #ddd;
text-decoration : underline;
}

body {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color: #555555;
background-color:#E5E5E5;
}

form {
margin : 0px;
}

hr {
height : 1px;
border : 1px solid #98aab1;
}

hr.side-hr {
height : 1px;
border : 1px solid #98aab1;
}

td {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color: #000000;
}

pre {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
}

.alt {
color : #000000;
}

.outer-border {
border : 2px solid #98aab1;
}

.sub-header {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #FFFFFF;
background-color : #fff;
background-image: url(images/subheader.gif);
border-top : 1px solid #98aab1;
border-bottom : 1px solid #98aab1;
padding : 5px;
}

.sub-header ul{
margin: 0;
padding: 0;
}
.sub-header ul li{ display: inline; }
.sub-header ul li.first-link .bullet{ display: none; }

.full-header {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #ddd;
background-color : #000000;
padding : 0px;
}

.footer {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #000;
background-color : #efefef;
border-top : 1px solid #98aab1;
padding : 5px;
}

.button {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
background-color : #fafafa;
color : #000;
font-size : 11px;
border-color : #000000;
}

.textbox {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #000;
background-color : #fff;
border : 1px solid #ccc;
border-color : #ccc;
}

.main-body {
font-size : 11px;
color : #000;
background-color : #efefef;
padding : 4px 4px 5px 4px;
}

.side-body {
font-size : 11px;
color : #000;
background-color : #efefef;
padding : 4px;
}

.main-bg {
color : #000;
background-color : #fff;
padding : 10px 5px 10px 5px;
}

.border {
border : 1px solid #98aab1;
}

.side-border-left {
color : #000;
background-color : #FFF;
padding : 10px 5px 10px 10px;
width: 175px;
}

.side-border-right {
color : #000;
background-color : #FFF;
padding : 10px 10px 10px 5px;
width: 175px;
}

.news-category {
border:0;
margin:3px 5px 0 0;
float:left;
}

.news-footer {
font-size : 10px;
color : #FFFFFF;
background-color : #efefef;
padding : 3px 4px 4px 4px;
background-image: url(images/subheader.gif);
}

.capmain {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
font-weight : bold;
color : #FFFFFF;
background-color : #fff;
background-image: url(images/border.gif);
padding : 3px 4px 3px 4px;
height: 25px;
vertical-align: middle;
}

.scapmain {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
font-weight : bold;
color : #FFFFFF;
background-image: url(images/border.gif);
border-bottom : 1px solid #e1e1e1;
padding : 4px;
height: 25px;
vertical-align: middle;
}

.tbl-border {
color : #000;
background-color : #e1e1e1;
}

.tbl {
font-size : 11px;
color : #000;
background-color : #fff;
padding : 4px;
}

.tbl1 {
font-size : 11px;
color : #000;
background-color : #fff;
padding : 4px;
}

.tbl2 {
font-size : 11px;
color : #000;
background-color : #efefef;
padding : 4px;
}

.forum-caption {
font-size : 11px;
font-weight : bold;
color : #006699;
background-color : #efefef;
background-image: url(images/subheader.gif);
padding : 2px 4px 4px 4px;
}

.quote {
font-size : 11px;
color : #000;
background-color : #f8f8f8;
padding : 4px;
margin : 0px 20px 0px 20px;
border : 1px solid #bbb;
}

.poll {
height : 11px;
border : 1px solid #bbb;
}

.comment-name {
font-weight : bold;
color : #006699;
padding-left: 4px;
}

.shoutboxname {
font-weight : bold;
color : #006699;
background-color : #efefef;
}

.shoutbox {
color : #000;
background-color : #efefef;
}

.shoutboxdate {
font-size : 10px;
color : #555;
background-color : #efefef;
}

.small {
font-size : 10px;
font-weight : normal;
}

.small2 {
font-size : 10px;
font-weight : normal;
color : #000;
}

.side-small {
font-size : 10px;
font-weight : normal;
color : #000;
background-color : #fff;
}

.side-label {
color : #000;
background-color : #efefef;
padding : 2px 2px 3px 2px;
}

#main { width: 100%;}

#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#navigation h2 {
font-size: 10px;
color: #FFFFFF;
background-color: #efefef;
margin: 0;
padding: 2px 2px 3px 2px;
}

#navigation a {
display: block;
color: #FFFFFF;
padding: 2px;
text-decoration : none;
}
#navigation a:hover {
color: #ffffff;
background-color: #006699;
}

* html #navigation ul li{
height: 1%;
}

.pagenav { height: 20px; }

.pagenav span {
color: #ccc;
background-color: #f0f0f0;
border: 1px solid #e1e1e1;
padding: 2px 4px;
margin: 2px;
}

.pagenav a {
color: #FFFFFF;
background-color: #fff;
border: 1px solid #e1e1e1;
padding: 2px 4px;
margin: 2px;
text-decoration: none;
}

.pagenav a:hover {
color: #ccc;
background-color: #444;
text-decoration: none;
}

.center, *[align="center"] {margin: 0 auto;}

.admin-message {
border: 1px solid #666;
padding: 8px;
margin-bottom: 8px;
}

.bbcode { border: 1px solid #ccc; }

.tablebreak { margin-bottom: 8px; }

Posts: 20

Joined: 05/06/2009

afif


Member

#2

Posted 7 years ago

this is a simple CSS.
u just need to put a class for your navigation bar.
then use a.urnavbarclass to change..

post your header code then i can help u.

Posts: 183

Joined: 12/03/2007

welshmatt123


Junior Member

#3

Posted 7 years ago

I only have a theme.php file..

<?php

/*
SubFusion v1.0 theme for PHP-Fusion v7.00+
Author: http://www.phpfusion.ro/
Conversion to v7 by: Kenneth Boldt (http://php-fusion.boldt.me/)
Released under the Affero GPLv3
*/

if (!defined("IN_FUSION"Wink) { die("Access Denied"Wink; }

// theme settings
define("THEME_BULLET", "<img src='".THEME."images/bullet.gif' alt='' style='border:0' />"Wink;
require_once INCLUDES."theme_functions_include.php";

function render_page($license=false) {

global $theme_width,$settings;

echo "
<table align='center' cellspacing='0' cellpadding='0' class='outer-border' id='main'>
<tr>
<td>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='full-header'>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td>".showbanners()."</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='sub-header'>".showsublinks(" <span class='bullet'>&middot;</span> ", "white"Wink."</td>
<td align='right' class='sub-header'>".showsubdate()."</td>
</tr>
</table>\n";

echo "
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>\n";
if (LEFT) { echo "<td class='side-border-left' valign='top'>".LEFT."</td>"; }
echo "<td class='main-bg' valign='top'>".U_CENTER.CONTENT.L_CENTER."</td>";
if (RIGHT) { echo "<td class='side-border-right' valign='top'>".RIGHT."</td>"; }
echo "
</tr>
</table>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td align='center' class='footer'>".stripslashes($settings['footer'])."<br />\n";
echo "SubFusion theme originally by <a href='http://www.phpfusion.ro/' target='_blank'>kneeko</a>. Converted to PHP-Fusion v7 by <a href='http://www.php-fusion.nu/' target='_blank'>Kenneth</a>.<br /><br />\n";
if (!$license) { echo showcopyright()."<br /><br />"; } echo showcounter()."<br /><br />
</td>
</tr>
</table>
</td>
</tr>
</table>\n";

}

function render_news($subject, $news, $info) {

echo "<table cellpadding='0' cellspacing='0' width='100%' class='border tablebreak'>
<tr>
<td class='capmain'>$subject</td>
</tr>
<tr>
<td class='main-body'>$news</td>
</tr>
<tr>
<td align='center' class='news-footer'>\n";
echo newsposter($info," &middot;"Wink.newsopts($info,"&middot;"Wink.itemoptions("N",$info['news_id']);
echo "</td>
</tr>
</table>\n";

}

function render_article($subject, $article, $info) {

echo "<table width='100%' cellpadding='0' cellspacing='0' class='border'>
<tr>
<td class='capmain'>$subject</td>
</tr>
<tr>
<td class='main-body'>
".($info['article_breaks'] == "y" ? nl2br($article) : $article)."
</td>
</tr>
<tr>
<td align='center' class='news-footer'>\n";
echo articleposter($info," &middot;"Wink.articleopts($info,"&middot;"Wink.itemoptions("A",$info['article_id']);
echo "</td>
</tr>
</table>\n";

}

function opentable($title) {

echo "<table cellpadding='0' cellspacing='0' width='100%' class='border tablebreak'>
<tr>
<td class='capmain'>$title</td>
</tr>
<tr>
<td class='main-body'>\n";

}

function closetable() {

echo "</td>
</tr>
</table>\n";

}

function openside($title, $collapse = false, $state = "on"Wink {

global $panel_collapse; $panel_collapse = $collapse;
$boxname = str_replace(" ", "", $title);

echo "
<table cellpadding='0' cellspacing='0' width='100%' class='border tablebreak'>
<tr>
<td class='scapmain'>$title</td>
".($collapse ? "<td class='scapmain' align='right'>".panelbutton($state, $boxname)."</td>" : ""Wink."
</tr>
<tr>
<td colspan='2' class='side-body'>";
if ($collapse == true) { echo panelstate($state, $boxname); }
}

function closeside() {

global $panel_collapse;

if ($panel_collapse == true) { echo "</div>\n"; }

echo "</td>
</tr>
</table>\n";

}

?>

Posts: 20

Joined: 05/06/2009

afif


Member

#4

Posted 7 years ago

lol. navigation bar code is IN the theme.php.
<?php

/*
SubFusion v1.0 theme for PHP-Fusion v7.00+
Author: http://www.phpfusion.ro/
Conversion to v7 by: Kenneth Boldt (http://php-fusion.boldt.me/)
Released under the Affero GPLv3
*/

if (!defined("IN_FUSION")) { die("Access Denied"); }

// theme settings
define("THEME_BULLET", "<img src='".THEME."images/bullet.gif' alt='' style='border:0' />");
require_once INCLUDES."theme_functions_include.php";

function render_page($license=false) {

global $theme_width,$settings;

echo "
<table align='center' cellspacing='0' cellpadding='0' class='outer-border' id='main'>
<tr>
<td>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='full-header'>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td>".showbanners()."</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='sub-header'>".showsublinks(" <span class='bullet'>&middot;</span> ", "white")."</td>
<td align='right' class='sub-header'>".showsubdate()."</td>
</tr>
</table>\n";

echo "
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>\n";
if (LEFT) { echo "<td class='side-border-left' valign='top'>".LEFT."</td>"; }
echo "<td class='main-bg' valign='top'>".U_CENTER.CONTENT.L_CENTER."</td>";
if (RIGHT) { echo "<td class='side-border-right' valign='top'>".RIGHT."</td>"; }
echo "
</tr>
</table>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td align='center' class='footer'>".stripslashes($settings['footer'])."<br />\n";
echo "SubFusion theme originally by <a href='http://www.phpfusion.ro/' target='_blank'>kneeko</a>. Converted to PHP-Fusion v7 by <a href='http://www.php-fusion.nu/' target='_blank'>Kenneth</a>.<br /><br />\n";
if (!$license) { echo showcopyright()."<br /><br />"; } echo showcounter()."<br /><br />
</td>
</tr>
</table>
</td>
</tr>
</table>\n";

}

function render_news($subject, $news, $info) {

echo "<table cellpadding='0' cellspacing='0' width='100%' class='border tablebreak'>
<tr>
<td class='capmain'>$subject</td>
</tr>
<tr>
<td class='main-body'>$news</td>
</tr>
<tr>
<td align='center' class='news-footer'>\n";
echo newsposter($info," &middot;").newsopts($info,"&middot;").itemoptions("N",$info['news_id']);
echo "</td>
</tr>
</table>\n";

}

function render_article($subject, $article, $info) {

echo "<table width='100%' cellpadding='0' cellspacing='0' class='border'>
<tr>
<td class='capmain'>$subject</td>
</tr>
<tr>
<td class='main-body'>
".($info['article_breaks'] == "y" ? nl2br($article) : $article)."
</td>
</tr>
<tr>
<td align='center' class='news-footer'>\n";
echo articleposter($info," &middot;").articleopts($info,"&middot;").itemoptions("A",$info['article_id']);
echo "</td>
</tr>
</table>\n";

}

function opentable($title) {

echo "<table cellpadding='0' cellspacing='0' width='100%' class='border tablebreak'>
<tr>
<td class='capmain'>$title</td>
</tr>
<tr>
<td class='main-body'>\n";

}

function closetable() {

echo "</td>
</tr>
</table>\n";

}

function openside($title, $collapse = false, $state = "on") {

global $panel_collapse; $panel_collapse = $collapse;
$boxname = str_replace(" ", "", $title);

echo "
<table cellpadding='0' cellspacing='0' width='100%' class='border tablebreak'>
<tr>
<td class='scapmain'>$title</td>
".($collapse ? "<td class='scapmain' align='right'>".panelbutton($state, $boxname)."</td>" : "")."
</tr>
<tr>
<td colspan='2' class='side-body'>";
if ($collapse == true) { echo panelstate($state, $boxname); }
}

function closeside() {

global $panel_collapse;

if ($panel_collapse == true) { echo "</div>\n"; }

echo "</td>
</tr>
</table>\n";

}

?>


u've already specified a class for ur navigation bar.
next put this in your css styles.css.

Code Gist: Download source  

a.full-header {
   color:#FFFFFF;
   text-decoration:none;
}

a:hover.full-header {
   color:#666666;
   text-decoration:underline overline;
}


i hope it works tho.
Edited by afif on 15-06-2009 15:05

Posts: 183

Joined: 12/03/2007

welshmatt123


Junior Member

#5

Posted 7 years ago

It didnt work.

The time and date on the right of the navigation bar are white and are linked the to sub header part of the CSS. Would it be anything to do with that?

Posts: 20

Joined: 05/06/2009

afif


Member

#6

Posted 7 years ago

sorry mate. i make a mistake. i highlighted the wrong class.
it should be the sub-header, not the full-header.
sub-header is the class for the links, not full-header..T_T

it should be like this:

Code Gist: Download source  

a.sub-header {
   color:#FFFFFF;
   text-decoration:none;
}

a:hover.sub-header {
   color:#666666;
   text-decoration:underline overline;
}


and the white coloured date is not related to that. although both are from the same classes(sub-header), the tag is different.
Edited by afif on 15-06-2009 19:56

Posts: 183

Joined: 12/03/2007

welshmatt123


Junior Member

#7

Posted 7 years ago

Still the same mate. Only changes when I change the;

a {
color : #B00000;
text-decoration : none;
}

Part of the CSS along with the rest of the site links.

Posts: 20

Joined: 05/06/2009

HobbyMan


Fusioneer

#8

Posted 7 years ago

Remove or change the background image in the sub-header class...

Code Gist: Download source  

background-image: url(images/subheader.gif);


I'm guessing it's black.

Posts: 1488

Joined: 24/03/2007

welshmatt123


Junior Member

#9

Posted 7 years ago

I want it black. I just want the text over it to be White.

Posts: 20

Joined: 05/06/2009

HobbyMan


Fusioneer

#10

Posted 7 years ago

My bad :o


Try this...

theme.php

Code Gist: Download source  

echo "<td class='sub-header'><div id='menu'>".showsublinks(" ")."</div></td>\n";


styles.css add in...

Code Gist: Download source  

#menu {
    width: 100%;
   float: left;
}

#menu ul {
   margin: 0;
   padding-top: 0px;
   list-style: none;
}

#menu li {
   display: inline;
}

#menu a {
   display: block;
   float: left;
   height: 21px;
   margin-left: 2px;
   padding: 2px;
   text-decoration: none;
   text-align: center;
   color: #FFFFFF;
}

#menu a:hover {
    color: #666666;
}

#menu .active a {
   color:#666666;
    text-decoration:underline overline;
}


Posts: 1488

Joined: 24/03/2007

welshmatt123


Junior Member

#11

Posted 7 years ago

Works! Thanks Very much Smile

Posts: 20

Joined: 05/06/2009

welshmatt123


Junior Member

#12

Posted 7 years ago

One more quick question..

How do I get the bullet points back on the nav bar.

I have

<table align='center' cellspacing='0' cellpadding='0' class='outer-border' id='main'>
<tr>
<td>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='full-header'>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td>".showbanners()."</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='sub-header'><div id='menu'>".showsublinks(" "Wink."</div></td>
<td align='right' class='sub-header'>".showsubdate()."</td>
</tr>
</table>\n";

Posts: 20

Joined: 05/06/2009

HobbyMan


Fusioneer

#13

Posted 7 years ago

Not too sure about that one, try the themes site http://themes.php...ion.co.uk/

Posts: 1488

Joined: 24/03/2007

Jump to Forum:
10 users are online
1 member and 9 guests

nikola1949