Increase font size for beadcrumb

wshades · October 18, 2010

I realize it is probably something many of you know but I am still a beginner.

Looking to simply increase the size the the 'breadcrumb' appearance on each page.

If the answer is already discussed, I apologize not finding it.

October 18, 2010

In catalog/stylesheet.css look for this

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

Edit the font-size part

wshades · October 18, 2010

Thanks for the reply. I did as you asked but no results.

Here is the latest I have on stylesheet.css

I went from size 10 to 16

===============================================================

/*

$Id: stylesheet.css,v 1.56 2003/06/30 20:04:02 hpdl Exp $

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

Released under the GNU General Public License

*/

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }

.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #ffb3b5; font-weight: bold; }

.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }

.productsNotifications { background: #f2fff7; }

.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

BODY {

background: #ffffff;

color: #000000;

margin: 0px;

}

A {

color: #000000;

text-decoration: none;

}

A:hover {

color: #AABBDD;

text-decoration: underline;

}

FORM {

display: inline;

}

TR.header {

background: #ffffff;

}

TR.headerNavigation {

background: #bbc3d3;

}

TD.headerNavigation {

font-family: Verdana, Arial, sans-serif;

font-size: 16px;

background: #bbc3d3;

color: #ffffff;

font-weight : bold;

}

A.headerNavigation {

color: #FECF36;

}

A.headerNavigation:hover {

color: #ffffff;

}

TR.headerError {

background: #ff0000;

}

TD.headerError {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 12px;

background: #ff0000;

color: #ffffff;

font-weight : bold;

text-align : center;

}

TR.headerInfo {

background: #00ff00;

}

TD.headerInfo {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 16px;

background: #00ff00;

color: #ffffff;

font-weight: bold;

text-align: center;

}

TR.footer {

background: #bbc3d3;

}

TD.footer {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

background: #bbc3d3;

color: #ffffff;

font-weight: bold;

}

.infoBox {

background: #FBC701;

}

.infoBoxContents {

background: #595c61;

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

}

.infoBoxNotice {

background: #FF8E90;

}

.infoBoxNoticeContents {

background: #FFE6E6;

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

}

TD.infoBoxHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

font-weight: bold;

background: #bbc3d3;

color: #ffffff;

}

TD.infoBox, SPAN.infoBox {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {

background: #595c61;

}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {

background: #595c61;

}

TABLE.productListing {

border: 1px;

border-style: solid;

border-color: #b6b7cb;

border-spacing: 20px;

}

.productListing-heading {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

background: #FBC701;

color: #FFFFFF;

font-weight: bold;

}

TD.productListing-data {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

}

A.pageResults {

color: #0000FF;

}

A.pageResults:hover {

color: #0000FF;

background: #FFFF33;

}

TD.pageHeading, DIV.pageHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 20px;

font-weight: bold;

color: #FBC701;

}

TR.subBar {

background: #f4f7fd;

}

TD.subBar {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

color: #000000;

}

TD.main, P.main {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

line-height: 1.5;

}

TD.smallText, SPAN.smallText, P.smallText {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

text-align:left

color:#d59f55;

}

.yellowText {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

font-weight: bold;

text-transform: none;

color: #d59f55;

}

TD.accountCategory {

font-family: Verdana, Arial, sans-serif;

font-size: 13px;

color: #aabbdd;

}

TD.fieldKey {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

font-weight: bold;

}

TD.fieldValue {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

}

TD.tableHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

font-weight: bold;

}

SPAN.newItemInCart {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

color: #ff0000;

}

CHECKBOX, INPUT, RADIO, SELECT {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

}

TEXTAREA {

width: 100%;

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

}

SPAN.greetUser {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

color: #f0a480;

font-weight: bold;

}

TABLE.formArea {

background: #f1f9fe;

border-color: #7b9ebd;

border-style: solid;

border-width: 1px;

}

TD.formAreaTitle {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 12px;

font-weight: bold;

}

SPAN.markProductOutOfStock {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 12px;

color: #c76170;

font-weight: bold;

}

SPAN.productSpecialPrice {

font-family: Verdana, Arial, sans-serif;

color: #ff0000;

}

SPAN.errorText {

font-family: Verdana, Arial, sans-serif;

color: #ff0000;

}

SPAN.prod_desc {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 14px;

font-style: normal;

line-height: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

color: #FFFFFF;

text-decoration: none;

}

.moduleRow { }

.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: hand; }

.moduleRowSelected { background-color: #E9F4FC; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }

.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

/* message box */

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }

.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }

.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

/* input requirement */

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

input1 {

height: 16px;

width: 110px;

}

.search {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

font-style: normal;

line-height: normal;

font-weight: bold;

font-variant: normal;

text-transform: none;

color: #FFFFFF;

text-decoration: none;

padding-left: 2px;

}

a.search {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

font-style: normal;

line-height: normal;

font-weight: bold;

font-variant: normal;

text-transform: none;

color: #FFFFFF;

text-decoration: none;

}

a.search:hover {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

font-style: normal;

line-height: normal;

font-weight: bold;

font-variant: normal;

text-transform: none;

color: #FDB302;

text-decoration: underline;

}

.subject {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-style: normal;

line-height: normal;

font-weight: bold;

font-variant: normal;

text-transform: none;

color: #FDCE35;

text-decoration: none;

padding-left: 10px;

}

.menutext {

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

color: #C3C5C7;

text-decoration: none;

padding-left: 10px;

}

a.menutext {

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

color: #C3C5C7;

text-decoration: none;

padding: 0px;

}

a.menutext:hover {

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

color: #FFFFFF;

text-decoration: none;

}

.proname {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: bold;

font-variant: normal;

text-transform: none;

color: #FEC303;

padding-top: 5px;

}

.protext {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

color: #B1B0AB;

text-decoration: none;

}

.price {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-style: normal;

line-height: normal;

font-weight: bold;

font-variant: normal;

text-transform: none;

color: #FFFFFF;

text-decoration: none;

}

.booktext {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

color: #9EA6AE;

text-decoration: none;

}

.bottext1 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

color: #000000;

text-decoration: none;

}

a.bottext1 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

color: #000000;

text-decoration: none;

}

a.bottext1:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

color: #FFFFFF;

text-decoration: none;

}

.copyright {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

color: #D1D2D4;

text-decoration: none;

}

a.bottext {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

color: #9EA6AE;

text-decoration: none;

}

a.bottext:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

color: #FFFFFF;

text-decoration: none;

}

.toptext {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: bold;

font-variant: normal;

text-transform: none;

color: #CD6200;

text-decoration: none;

padding-left: 8px;

}

.toptext1 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

color: #000000;

text-decoration: none;

padding-left: 8px;

}

.discounttext {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: bold;

font-variant: normal;

text-transform: none;

color: #FFFFFF;

text-decoration: none;

}

.home {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: bold;

font-variant: normal;

text-transform: none;

color: #FECF36;

text-decoration: none;

}

a.home {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: bold;

font-variant: normal;

text-transform: none;

color: #FECF36;

text-decoration: none;

}

a.home:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: bold;

font-variant: normal;

text-transform: none;

color: #FFFFFF;

text-decoration: none;

}

.sparrow {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: bold;

font-variant: normal;

text-transform: none;

color: #FEC400;

text-decoration: none;

}

.sptext {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

color: #AAB0B5;

text-decoration: none;

padding-right: 35px;

text-align: justify;

}

.inner2price {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: normal;

line-height: normal;

font-weight: bold;

font-variant: normal;

text-transform: none;

color: #FFFFFF;

text-decoration: none;

}

♥mdtaylorlrim · October 18, 2010

If you are using a template you will have to look at the source of your shop and see what class the breadcrumb is in, as changed by your template.

wshades · October 18, 2010

If you are using a template you will have to look at the source of your shop and see what class the breadcrumb is in, as changed by your template.

This is over my head but it appears that the class the breadcrumb is in is 'breadcrumb.php' see below.;

-------------------------------------------------

<?php

/*

$Id: breadcrumb.php,v 1.3 2003/02/11 00:04:50 hpdl Exp $

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

Released under the GNU General Public License

*/

class breadcrumb {

var $_trail;

function breadcrumb() {

$this->reset();

}

function reset() {

$this->_trail = array();

}

function add($title, $link = '') {

$this->_trail[] = array('title' => $title, 'link' => $link);

}

function trail($separator = ' - ') {

$trail_string = '';

for ($i=0, $n=sizeof($this->_trail); $i<$n; $i++) {

if (isset($this->_trail[$i]['link']) && tep_not_null($this->_trail[$i]['link'])) {

$trail_string .= '<a href="' . $this->_trail[$i]['link'] . '" class="headerNavigation">' . $this->_trail[$i]['title'] . '</a>';

} else {

$trail_string .= $this->_trail[$i]['title'];

}

if (($i+1) < $n) $trail_string .= $separator;

}

return $trail_string;

}

?>

October 18, 2010

First thing to do is after you have replaced your stylesheet, refresh your page.

What Mark is saying is while on your web page view the html source code to see what is controling the breadcrumb. In a stock osc look for this section

<table border="0" width="100%" cellspacing="0" cellpadding="1">
 <tr class="headerNavigation">
   <td class="headerNavigation">  <?php echo $breadcrumb->trail(' » '); ?></td>

wshades · October 18, 2010

First thing to do is after you have replaced your stylesheet, refresh your page.

What Mark is saying is while on your web page view the html source code to see what is controling the breadcrumb. In a stock osc look for this section
<table border="0" width="100%" cellspacing="0" cellpadding="1">
 <tr class="headerNavigation">
   <td class="headerNavigation">  <?php echo $breadcrumb->trail(' » '); ?></td>

wshades · October 18, 2010

Looking at the source code of the page I see what appears to be what you are speaking of...

<tr>

<tr>

<td height="41" background="images/header_03.jpg" class="home" colspan="2"> <a href="http://casa-bella.com/showroom/template/home.php" class="headerNavigation">HOME</a> » <a href="http://casa-bella.com/showroom/template/home.php?cPath=45" class="headerNavigation">Marble & Onyx Inventory</a></td>

</tr>

<tr>

As for refreshing the page once uploaded... I am new but not THAT new! LOL..

October 18, 2010

As for refreshing the page once uploaded... I am new but not THAT new! LOL..

You would be surprised how many people do not understand that.

Try changing the font size in this section of your stylesheet

.home {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #FECF36;
text-decoration: none;
}
a.home {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #FECF36;
text-decoration: none;
}
a.home:hover {


font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #FFFFFF;
text-decoration: none;
}

wshades · October 18, 2010

That got it!

Even when I refreshed! LOL

Thx

forummaker · November 1, 2010

I wanted to make the size of my breadcrumb font smaller... the font seemed a little big... and long too.

But I was more worried about the size then the length.

Here's what I did..

just another option for anyone that may want another way to do it.

- catalog/includes/classes/breadrumb.php

locate:

$trail_string .= '<a href="' . $this->_trail[$i]['link'] . '" class="headerNavigation">' . $this->_trail[$i]['title'] . '</a>';

change to:

$trail_string .= '<a href="' . $this->_trail[$i]['link'] . '" class="headerNavigation"><font size="1">' . $this->_trail[$i]['title'] . '</font></a>';

It worked for me. Hope it helps some else too.

Also...

I've searched to find information about the importance between breadcrumbs and google seo...

and there doesn't seem to be a concrete answer on the subject.

Question:

- Do breadcrumbs help google and other search engines index your site and help with SEO with keywords and such?

If they aren't important for SEO.. then I would prefer to remove them as they are taking up real estate on the top of each of my product page.

Thanks for any input.

Increase font size for beadcrumb

Recommended Posts

wshades

Guest

wshades

♥mdtaylorlrim

wshades

Guest

wshades

wshades

Guest

wshades

forummaker

Archived

Browse

Activity