how do i change the font size and type of gallery titles and breadcrumb navigation?

[Claire-ity]

see attached screenshot to see exactly what i want to change.

may i also have assistance removing the icon showing that a gallery is locked? that icon bothers me.

sincerely, Claire:lust

[jfriend]

This CSS will get rid of the padlock icon. I made it so that you will still see it when logged in, but viewers will not ever see it. I did it that way so you would be able to see whether they were password protected or not when you are logged in.

.notLoggedIn .locked {display:none;}

This CSS will change the color of the breadcrumb. You can choose whatever color code you want.

#breadCrumbTrail, #breadCrumbTrail .nav, #breadCrumbTrail .title {color:#ff0000;}

[Claire-ity]

This CSS will get rid of the padlock icon. I made it so that you will still see it when logged in, but viewers will not ever see it. I did it that way so you would be able to see whether they were password protected or not when you are logged in.

.notLoggedIn .locked {display:none;}

This CSS will change the color of the breadcrumb. You can choose whatever color code you want.

#breadCrumbTrail, #breadCrumbTrail .nav, #breadCrumbTrail .title {color:#ff0000;}

so simple!
thanks a ton:bow

[Claire-ity]

so simple!
thanks a ton:bow

oh, but what about the font size of the breadcrumb navigation?
how do i change that?

and also, how do i change the font type of the breadcrumb navigation?

thanks.

[jfriend]

oh, but what about the font size of the breadcrumb navigation?
how do i change that?

and also, how do i change the font type of the breadcrumb navigation?

thanks.

#breadCrumbTrail, #breadCrumbTrail .nav, #breadCrumbTrail .title {font-size: 140%;}

[pjspics]

#breadCrumbTrail, #breadCrumbTrail .nav, #breadCrumbTrail .title {font-size: 140%;}

Hi John,

Do you know how to change the FACE type.
I am using Comic Sans MS at present for my Gallery titles and it would be good to get the whole Breadcrumb to be the same.
Many thanks

[pjspics]

Hi John,

Do you know how to change the FACE type.
I am using Comic Sans MS at present for my Gallery titles and it would be good to get the whole Breadcrumb to be the same.
Many thanks

John,

I seem to have managed it...

#breadCrumbTrail, #breadCrumbTrail .nav, #breadCrumbTrail .title {font-family: Comic Sans MS;}

[Claire-ity]

John,

I seem to have managed it...

#breadCrumbTrail, #breadCrumbTrail .nav, #breadCrumbTrail .title {font-family: Comic Sans MS;}
Is this the code to change my breadcrumb navigator COLOR?

#breadCrumbTrail, #breadCrumbTrail .nav, #breadCrumbTrail .title {font-color: #383838;}

ALSO, is it possible to change one of the words in the actual breadcrumb navigator? I'd like to change "Claire-ity" to "Home"

AND FINALLY, is there a way to nudge the whole breadcrumb nav so it aligns with the navbar and banner above it? i don't like how it juts out beyond the left edge of my banner/navbar.
Muchas G!!!:lust

[pjspics]

Is this the code to change my breadcrumb navigator COLOR?

#breadCrumbTrail, #breadCrumbTrail .nav, #breadCrumbTrail .title {font-color: #383838;}

ALSO, is it possible to change one of the words in the actual breadcrumb navigator? I'd like to change "Claire-ity" to "Home"

AND FINALLY, is there a way to nudge the whole breadcrumb nav so it aligns with the navbar and banner above it? i don't like how it juts out beyond the left edge of my banner/navbar.
Muchas G!!!:lust

Hi,

I was given this CSS to change the breadcrumb colour:

#breadCrumbTrail a.nav,
#breadCrumbTrail .title,
#breadCrumbTrail {color: #3366CC !important;}

It works ok for me.

Don't know about the positioning of the breadcrumb itself - maybe someone else can answer this one.

[jfriend]

Is this the code to change my breadcrumb navigator COLOR?

#breadCrumbTrail, #breadCrumbTrail .nav, #breadCrumbTrail .title {font-color: #383838;}

ALSO, is it possible to change one of the words in the actual breadcrumb navigator? I'd like to change "Claire-ity" to "Home"

AND FINALLY, is there a way to nudge the whole breadcrumb nav so it aligns with the navbar and banner above it? i don't like how it juts out beyond the left edge of my banner/navbar.
Muchas G!!!:lust To change the top level of your breadcrumb, paste this into your bottom javascript:

// script to replace a user's name in the breadcrumb with "Home"
YE.onContentReady("breadCrumbTrail", ReplaceTopOfBreadcrumbWithHome);

function ReplaceTopOfBreadcrumbWithHome()
{
var str = this.innerHTML.replace(/\n/g, " ");
this.innerHTML = str.replace(/\>[^\<]+<\/a>/i, ">Home</a>");
}

The breadcrumb alignment issue is more difficult. The way it is laid out now assumes you will have a background box that makes everything seem more lined up.

The challenge in your galleries with the traditional style is that the left edge of the images is different depending upon whether the left image is a horizontal or vertical image. In your categories, if they all consistently have the four across formatting with horizontal thumbs (like your Porfolio category (http://www.claire-ity.com/Portfolio) does), then you can use this CSS:

#category #breadCrumbTrail {margin-left:35px;}
#category #breadcrumb {padding:0; margin:20px 0 0 0;}

[Claire-ity]

To change the top level of your breadcrumb, paste this into your bottom javascript:

// script to replace a user's name in the breadcrumb with "Home"
YE.onContentReady("breadCrumbTrail", ReplaceTopOfBreadcrumbWithHome);

function ReplaceTopOfBreadcrumbWithHome()
{
var str = this.innerHTML.replace(/\n/g, " ");
this.innerHTML = str.replace(/\>[^\<]+<\/a>/i, ">Home</a>");
}
The breadcrumb alignment issue is more difficult. The way it is laid out now assumes you will have a background box that makes everything seem more lined up.

The challenge in your galleries with the traditional style is that the left edge of the images is different depending upon whether the left image is a horizontal or vertical image. In your categories, if they all consistently have the four across formatting with horizontal thumbs (like your Porfolio category (http://www.claire-ity.com/Portfolio) does), then you can use this CSS:

#category #breadCrumbTrail {margin-left:35px;}
#category #breadcrumb {padding:0; margin:20px 0 0 0;}

well, the combined help of all has set me up right!
thanks.

but i still haven't figured out what controls COLOR/size/FONT for these sort of breadcrumbs:
Home (http://claire-ity.smugmug.com/) > CUSTOMER GALLERIES (http://claire-ity.smugmug.com/CUSTOMER%20GALLERIES) > Kim Linden

I'd like to make CUSTOMER GALLERIES to Customer Galleries, but was not successful doing this via the "Change CATEGORY name" in the control panel. please advise.

Muchas Thankys:lust

[jfriend]

well, the combined help of all has set me up right!
thanks.

but i still haven't figured out what controls COLOR/size/FONT for these sort of breadcrumbs:
Home (http://claire-ity.smugmug.com/) > CUSTOMER GALLERIES (http://claire-ity.smugmug.com/CUSTOMER%20GALLERIES) > Kim Linden

I'd like to make CUSTOMER GALLERIES to Customer Galleries, but was not successful doing this via the "Change CATEGORY name" in the control panel. please advise.

Muchas Thankys:lust Two posts up (#9) is the CSS for controlling color of breadcrumbs. You can add font-family or font-size rules to that same CSS if you want.

Try renaming CUSTOMER GALLERIES to something else like "Customer GalleriesXX", then change that to "Customer Galleries". Sometimes there is an issue when renaming if all you are changing is the case.

[Claire-ity]

Two posts up (#9) is the CSS for controlling color of breadcrumbs. You can add font-family or font-size rules to that same CSS if you want.

Try renaming CUSTOMER GALLERIES to something else like "Customer GalleriesXX", then change that to "Customer Galleries". Sometimes there is an issue when renaming if all you are changing is the case.

the code in post #9 only affected the breadcrumb navigator on my Portfolio page, not on the pages leading off of it. is there another element that affects these "inner" pages?

also, what code controls FONT/COLOR/SIZE of this gallery page's breadcrumb?
Gallery pages: 1 :lust

[jfriend]

the code in post #9 only affected the breadcrumb navigator on my Portfolio page, not on the pages leading off of it. is there another element that affects these "inner" pages?

also, what code controls FONT/COLOR/SIZE of this gallery page's breadcrumb?
Gallery pages: 1 :lust

You have this code already in your CSS with a very nice and descriptive comment right above it. It seems to work for me. Change the color value and everything changes.

/*This will change the font COLOR of my breadcrumb navigation*/
#breadCrumbTrail a.nav,
#breadCrumbTrail .title,
#breadCrumbTrail {color: #707070 !important;}

If you want to change the color, then just change that color value.

To modify the font or size, please delete the two previous rules in your CSS that are also attempting to modify the font and size and change what you have above to this (with whatever color code you want):

/*This will change the font COLOR of my breadcrumb navigation*/
#breadCrumbTrail a.nav,
#breadCrumbTrail .title,
#breadCrumbTrail {
color: #707070 !important;
font-size: 150% !important;
font-family: Segoe Script !important;
}

You just add additional attributes to the CSS rule.

[Claire-ity]

You have this code already in your CSS with a very nice and descriptive comment right above it. It seems to work for me. Change the color value and everything changes.

/*This will change the font COLOR of my breadcrumb navigation*/
#breadCrumbTrail a.nav,
#breadCrumbTrail .title,
#breadCrumbTrail {color: #707070 !important;}

If you want to change the color, then just change that color value.

To modify the font or size, please delete the two previous rules in your CSS that are also attempting to modify the font and size and change what you have above to this (with whatever color code you want):

/*This will change the font COLOR of my breadcrumb navigation*/
#breadCrumbTrail a.nav,
#breadCrumbTrail .title,
#breadCrumbTrail {
color: #707070 !important;
font-size: 150% !important;
font-family: Segoe Script !important;
}

You just add additional attributes to the CSS rule.

thanks!
i wasn't sure whether SEGOE SCRIPT was a font type example or part of the code i should keep to allow it to function. please advise on that.

here is how i have the code you gave me, since i use Helvetica/Arial:
/*This will change the font COLOR/SIZE & FACE of my breadcrumb navigation*/
#breadCrumbTrail a.nav,
#breadCrumbTrail .title,
#breadCrumbTrail {
color: #707070 !important;
font-size: 110% !important;
font-family: Segoe Script,Arial,Helvetica !important;
}
:lust:bow

[jfriend]

thanks!
i wasn't sure whether SEGOE SCRIPT was a font type example or part of the code i should keep to allow it to function. please advise on that.

here is how i have the code you gave me, since i use Helvetica/Arial:
/*This will change the font COLOR/SIZE & FACE of my breadcrumb navigation*/
#breadCrumbTrail a.nav,
#breadCrumbTrail .title,
#breadCrumbTrail {
color: #707070 !important;
font-size: 110% !important;
font-family: Segoe Script,Arial,Helvetica !important;
}
:lust:bow Segoe Script was just an example font. You can remove it if you don't want it.