19 replies to this topic

[dpuk44]

Im a newbeeeeee to all this ecommerce and am trying to change the height and other attributes of the navigation bar. Iv researched and people sugest to do the following:

TD.headerNavigation {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #bbc3d3;
color: #ffffff;
font-weight : bold;
height: 50px;
}

and to hit ctrl and refresh...BUT nothing is changing. Here is my header.php code. I havnt changed it but I cant see reference to TD.headerNavigation:


<?php
/*
$Id$
osCommerce, Open Source E-Commerce Solutions
http://www.oscommerce.com
Copyright © 2010 osCommerce
Released under the GNU General Public License
*/
if ($messageStack->size('header') > 0) {
echo '<div class="grid_24">' . $messageStack->output('header') . '</div>';
}
?>
<div id="header" class="grid_24">
<div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div>
<div id="headerShortcuts">
<?php
echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .
tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));
if (tep_session_is_registered('customer_id')) {
echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
}
?>
</div>
<script type="text/javascript">
$("#headerShortcuts").buttonset();
</script>
</div>
<div class="grid_24 ui-widget infoBoxContainer">
<div class="ui-widget-header infoBoxHeading"><?php echo '&nbsp;&nbsp;' . $breadcrumb->trail(' &raquo; '); ?></div>
</div>
<?php
if (isset($HTTP_GET_VARS['error_message']) && tep_not_null($HTTP_GET_VARS['error_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr class="headerError">
<td class="headerError"><?php echo htmlspecialchars(stripslashes(urldecode($HTTP_GET_VARS['error_message']))); ?></td>
</tr>
</table>
<?php
}
if (isset($HTTP_GET_VARS['info_message']) && tep_not_null($HTTP_GET_VARS['info_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr class="headerInfo">
<td class="headerInfo"><?php echo htmlspecialchars(stripslashes(urldecode($HTTP_GET_VARS['info_message']))); ?></td>
</tr>
</table>
<?php
}
?>


Can anyone suggest why this isnt changing?

Thanks

[dpuk44]

Can anyone help me on this issue?

[14steve14]

The infobox headers in 2.3.1 are controlled by a stylesheet found in your ext/jquery/ui/redmond/jquery-ui-1.8.6.css i think. I know that the header images are called from that file so it may be possible to alter the height there.

[dpuk44]

OK so I ammended the class

.ui-widget-header { border: 1px solid #4297d7; background: #5c9ccc url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold;}

and messed about with the .infoBoxHeading class also but changing either of these changes all the headings not the navigation bar. U'd think the nav would be its own div!

[NodsDorf]

What are you referring to as the navigation bar.. the 3 buttons?

[dpuk44]

Sorry no i mean where it says:

Top>>Catalog

I am building a shop for a friend who sales supplements. I wanted to have like a horizontal navigation bar.

[NodsDorf]

@dpuk44
Gotcha, I call that the breadcrumb trail. :0

Either way,
The code for it is located in catalog/includes/header.php
Find

<div class="grid_24 ui-widget infoBoxContainer">
  <div class="ui-widget-header infoBoxHeading"><?php echo '&nbsp;&nbsp;' . $breadcrumb->trail(' &raquo; '); ?></div>
</div>

This is a ui-widget that gets it styling from the UI Theme

Hope that helps

[fulluvscents]

Your best bet is to ADD a class to your stylesheet and apply it to the navbar.

If you change the css for the classes that the navbar already uses, then it will also apply to any OTHER elements that use those same classes. So, unless you want the changes to apply site wide, then add a new class.

[James Schofield]

dpuk44, on 10 February 2012, 16:18, said:

Sorry no i mean where it says:

Top>>Catalog

I am building a shop for a friend who sales supplements. I wanted to have like a horizontal navigation bar.

I am trying to do this exact thing, I have googled and found many many forums, posts, articles that said you need to edit the stylesheet.css in here..

TR.header {
background: #ffffff;
}
TR.headerNavigation {
background: #bbc3d3;
}
TD.headerNavigation {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #bbc3d3;
color: #ffffff;
font-weight : bold;
}

Now I can add a line for height, I can change font size, but any modification to the colour codes seems to have no effect??? The answers I have seen in this thread might work, or be fine, might be a work-around.. but does not answer the basic question as to why modification of this part of the css file yelds no results.

James

[14steve14]

James Schofield, on 12 February 2012, 13:50, said:

I am trying to do this exact thing, I have googled and found many many forums, posts, articles that said you need to edit the stylesheet.css in here..

TR.header {
background: #ffffff;
}
TR.headerNavigation {
background: #bbc3d3;
}
TD.headerNavigation {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #bbc3d3;
color: #ffffff;
font-weight : bold;
}

Now I can add a line for height, I can change font size, but any modification to the colour codes seems to have no effect??? The answers I have seen in this thread might work, or be fine, might be a work-around.. but does not answer the basic question as to why modification of this part of the css file yelds no results.

James

Are the posta you are reading refering to 2.3.1. This version id different.If you want to change just the navbar, you will have to add a new css class for that section.

[James Schofield]

14steve14, on 12 February 2012, 14:57, said:

Are the posta you are reading refering to 2.3.1. This version id different.If you want to change just the navbar, you will have to add a new css class for that section.

Yes I am refering to 2.3.1 - I have read nothing in the documentation about requiring a new class, and why am I am to make other changes which do take effect.. yet for a colour change I need to make a new class?

I am not savy enough in css to know where I make this new class - am I changing stylesheet.css or another file? if so how do I add this?

James

[14steve14]

Because if i am not mistaken any changes you make will affect other areas, like all the infoboxes headers.

[multimixer]

How to target the breadcrumb area in css for individual styling

Add somewhere into file calalog/stylesheet.css

#header+div .ui-widget-header{background:none;background:#f00;}

This will work for a default headar file. No need to edit any other file, no need to edit the core ui css file, no need to add new classes and changes will apply only to the breadcrumb

You can alter also any other styling that is added by class ui-widget-header, such as border etc

Edited by multimixer, 13 February 2012, 08:43.

[multimixer]

Had some time and did an illustrated example and a collection of rules to use here

Edited by multimixer, 13 February 2012, 10:47.

[dpuk44]

hey thats a massive help. I understand how to do that with no problems. yeah as I was changing the current class all other boxes were changing, but this way works great. thanks again and happy coding to all

[dpuk44]

multimixer if I was to apply similar results but to the leftcolumn div would it be a case of

#columnLeft+div .infoBoxHeading {
background: red;
}

[multimixer]

@dpuk44 no, in this case you say

#columnLeft  div.ui-widget-header{background:none;background:#f00}

You can check here about some other stuff to do with your boxes, it's not about the heading color, but easy to figure out the logic

I would also recommend to take a look to here to get an overview about css selectors

[dpuk44]

Thankyou

[whitewolfspirits]

I have tried over and over to change the color of the navigation bar. I copied and pasted the css you showed, and changed the colors, but it is still blue. Any help would be appreciated.

[multimixer]

@whitewolfspirits

This css work for a default header.php file, it could be that yours is different