Can you change theme colors?

[Markjay]

Is it possible to change the colors of the smugmug supplied themes?

Like, change a background color or the color of the gallery boxes or color of the box borders etc?

Is it easy to do?

Thank you

[Andy]

Yes. You simply have to ask what you want to do.

[Markjay]

Ok, let's change the background color for the Sand theme to this for starters:

Let's call the three green colors of this theme as follows for reference:

dark green
light green
pale green



here's the color I'd like to change the dark green background of the page to: CDB99C (http://www.colorcombos.com/CDB99C-hex-color)

here's the color I'd like to change light green to:FFFFFF (http://www.colorcombos.com/FFFFFF-hex-color)

here's the color I'd like to change pale green to: 3399CC (http://www.colorcombos.com/3399CC-hex-color)

Then I'll need to change the text colors as well: just give me the code to do all three area text and I'll insert my own numbers after experimenting.....

and THANK you!



Yes. You simply have to ask what you want to do.

[Markjay]

I'm sorry, Andy... did I wait too long to reply? I'll check back here tomorrow for the answer / code and, thank you very much for offering to help.



Ok, let's change the background color for the Sand theme to this for starters:

Let's call the three green colors of this theme as follows for reference:

dark green
light green
pale green



here's the color I'd like to change the dark green background of the page to: CDB99C (http://www.colorcombos.com/CDB99C-hex-color)

here's the color I'd like to change light green to:FFFFFF (http://www.colorcombos.com/FFFFFF-hex-color)

here's the color I'd like to change pale green to: 3399CC (http://www.colorcombos.com/3399CC-hex-color)

Then I'll need to change the text colors as well: just give me the code to do all three area text and I'll insert my own numbers after experimenting.....

and THANK you!

[Andy]

I'm sorry, Andy... did I wait too long to reply? I'll check back here tomorrow for the answer / code and, thank you very much for offering to help.
I'm actually confused by so many threads you started. Can you keep your questions to a single thread - it'll make things soooo much easier.

The very best way to play around with this sort of thing is to use FF and FF Web Dev. We even show you how:
http://dgrin.smugmug.com/gallery/1354921

When you have it, holler back to us, and we'll walk you through how to change things.

Some of the items in that theme aren't colors, but rather background images.

[Markjay]

I like the design of the Sand theme but, the text style is kind of hard to read... can I change the font style on this theme?

As for the colors of the theme, I just want to see if there is a way to change the box that holds the photos to just white.... it's more neutural as a background behind the images and doesn't give the images the illusion of tint as some background colors can do.

Can you help with this... please?



I'm actually confused by so many threads you started. Can you keep your questions to a single thread - it'll make things soooo much easier.

The very best way to play around with this sort of thing is to use FF and FF Web Dev. We even show you how:
http://dgrin.smugmug.com/gallery/1354921

When you have it, holler back to us, and we'll walk you through how to change things.

Some of the items in that theme aren't colors, but rather background images.

[Andy]

I like the design of the Sand theme but, the text style is kind of hard to read... can I change the font style on this theme?
Yes. Body {font-family: "XXXXXXXXX";} would be your User CSS. Go here:
http://typetester.maratz.com for font choices. Be aware that fonts are system and browser dependent, so choose one that will work across platforms.
[quote]
As for the colors of the theme, I just want to see if there is a way to change the box that holds the photos to just white.... it's more neutural as a background behind the images and doesn't give the images the illusion of tint as some background colors can do.

Can you help with this... please?
Yes but you should really learn this yourself. It's the easiest of easy things. Get Firefox and the webdev tool, then you pop in the colors you want and see it instantly.

To make it easy for those that want to help you, make a gallery that has Sand as the theme, and link to it here so that the helpers can help.

[Markjay]

Any or ?

Fooling around with that Sand theme was.... nuts! I discarded that theme for the Smugmug Dashes theme and changed the background color to my liking.

I have only two or three more "color issues" to deal with and time is SOOO short so, I'll have to put the webdev tool on the backburner... although I did in fact install it! Will have to find "learning time later".

Here are the three things I need to change colors on....

1. there's a nav element I must have missed in my coding that is still green..
in the gallery

2. I want to change the homepage gallery holding box to the same color as my header brown: 806A5D. Right now, it is appearing as black.

Last: I'll need to change the font colors but, I can do that one on my own, I've pretty much figured that much out at this time.

Thank you very much for your help to date... if there were 30 hours in a day, I'd probably have time to learn the CSS more thoroughly on my own :-(

Have a great day, I'll check back here later after I get through my PILE of work! :-)



Yes. Body {font-family: "XXXXXXXXX";} would be your User CSS. Go here:
http://typetester.maratz.com for font choices. Be aware that fonts are system and browser dependent, so choose one that will work across platforms.[quote]

Yes but you should really learn this yourself. It's the easiest of easy things. Get Firefox and the webdev tool, then you pop in the colors you want and see it instantly.

To make it easy for those that want to help you, make a gallery that has Sand as the theme, and link to it here so that the helpers can help.

[Markjay]

Any or ?

Fooling around with that Sand theme was.... nuts! I discarded that theme for the Smugmug Dashes theme and changed the background color to my liking.

360photostock.smugmug.com is the website being worked on

I have only two or three more "color issues" to deal with and time is SOOO short so, I'll have to put the webdev tool on the backburner... although I did in fact install it! Will have to find "learning time later".

Here are the three things I need to change colors on....

1. there's a nav element I must have missed in my coding that is still green..
in the gallery

2. I want to change the homepage gallery holding box to the same color as my header brown: 806A5D. Right now, it is appearing as black.

Last: I'll need to change the font colors but, I can do that one on my own, I've pretty much figured that much out at this time.

Thank you very much for your help to date... if there were 30 hours in a day, I'd probably have time to learn the CSS more thoroughly on my own :-(

Have a great day, I'll check back here later after I get through my PILE of work! :-)



Yes. Body {font-family: "XXXXXXXXX";} would be your User CSS. Go here:
http://typetester.maratz.com for font choices. Be aware that fonts are system and browser dependent, so choose one that will work across platforms.[quote]

Yes but you should really learn this yourself. It's the easiest of easy things. Get Firefox and the webdev tool, then you pop in the colors you want and see it instantly.

To make it easy for those that want to help you, make a gallery that has Sand as the theme, and link to it here so that the helpers can help.

[Andy]

Here are the three things I need to change colors on....

1. there's a nav element I must have missed in my coding that is still green..
in the gallery

2. I want to change the homepage gallery holding box to the same color as my header brown: 806A5D. Right now, it is appearing as black.

Last: I'll need to change the font colors but, I can do that one on my own, I've pretty much figured that much out at this time.

Thank you very much for your help to date... if there were 30 hours in a day, I'd probably have time to learn the CSS more thoroughly on my own :-(

Have a great day, I'll check back here later after I get through my PILE of work! :-)

Again, for those that want to help you, direct links to the pages that deal with each of these questions, thank you.

[Markjay]

I listed the website link but, I guess you are going to ask me for exact links to everything:

See below links after the numbered statements:

I have only two or three more "color issues" to deal with and time is SOOO short so, I'll have to put the webdev tool on the backburner... although I did in fact install it! Will have to find "learning time later".

Here are the three things I need to change colors on....

1. there's a nav element I must have missed in my coding that is still green..
in the gallery: where it says page 1 (that's where it's still green) http://360photostock.smugmug.com/gallery/4119700#240366479

2. I want to change the homepage gallery holding box to the same color as my header brown: 806A5D. Right now, it is appearing as black.
http://360photostock.smugmug.com/


Does that help now? You now have a link to both the pages where I want to make the changes. Again, you had the web link in the previous post :D

[Andy]

I listed the website link but, I guess you are going to ask me for exact links to everything

Yes. Allen volunteers his help, as do many other folks here who want to help you. It's best to make it as easy as possible for those who want to help, to be able to go exactly where you want them to go.

[Andy]

1. there's a nav element I must have missed in my coding that is still green..
in the gallery: where it says page 1 (that's where it's still green) http://360photostock.smugmug.com/gallery/4119700#240366479


Try using this pagepicker code, and modify the colors as needed.

/* page picker */
.pageNav, a.pageOn .nav {
color: #c2c2c2;
font-weight: bold;
}

.pageNav .nav {
font-weight: normal;
}

.pickerContent a.page {
color: #c2c2c2;
font-weight: normal;
}

.pickerContent a.page:hover {
background-color: #c2c2c2;
color: #000;
}

.pickerContent a.pageOn, .pickerContent a.pageOn:hover {
background-color: #c2c2c2;
color: #000;
}

[Andy]

Why are you building a non-stretched theme? I'm curious why you'd want to limit your site to such small photos, and small gallery - what if your buyers have a big screen - let 'em see it big. You have watermarks on your images. Streeeeeeeeeeeeeeetch

[Andy]

2. I want to change the homepage gallery holding box to the same color as my header brown: 806A5D. Right now, it is appearing as black.



sure add this to your CSS:

.box {background-color: #806a5d !important;}

Again, you had the web link in the previous post :D
so, if I do 50 questions/helps a day, and if by providing a link saves me 30seconds per question/help, that's nearly a half hour a day. Does that make my request more sensible now :)

[Markjay]

Thanks as always, Andy. Surely, you never have to justify your request to have more information supplied to assist you in helping those who need it.
I was just thinking that since the page link was there, things were rather easy from there but.... I completely understand AND: I complied :-)

I'm just the little guy here trying to get my webpages up to snuff and, looking good! You guys / gals really ARE the best!!

Now: I better get off this page before I fire myself for juggling my priorities.
he he

sure add this to your CSS:

.box {background-color: #806a5d !important;}


so, if I do 50 questions/helps a day, and if by providing a link saves me 30seconds per question/help, that's nearly a half hour a day. Does that make my request more sensible now :)

[Markjay]

Ok, things are starting to look a little better..... slowly but surely, Andy.

http://360photostock.smugmug.com have not set up the CNAME yet either!
(but I already know how to do that one :-)

I"m now working on the page and gallery font colors to make them "work" with the colors that are set at this moment.
My only question to you here is......

BEFORE I got and impliment this code listed below, do I need to remove the code in my CSS that's associated with these elements? And, to keep me out of trouble for sure, would you be kind enough to tell me exactly which code to remove, if that's the case?

Thanks,
Mark

Try using this pagepicker code, and modify the colors as needed.

/* page picker */
.pageNav, a.pageOn .nav {
color: #c2c2c2;
font-weight: bold;
}

.pageNav .nav {
font-weight: normal;
}

.pickerContent a.page {
color: #c2c2c2;
font-weight: normal;
}

.pickerContent a.page:hover {
background-color: #c2c2c2;
color: #000;
}

.pickerContent a.pageOn, .pickerContent a.pageOn:hover {
background-color: #c2c2c2;
color: #000;
}

[Markjay]

I think my request got lost in the shuffle a bit so, I hope you don't mind my bumping and, there's the specific gallery I want to work on the text colors and such on.....

http://360photostock.smugmug.com/gallery/4119700#240391625

I wan to
1. change the SIZE of the fonts
2. get rid of the GREEN photo navigation object "1" as in page 1 of...
that's the only element I missed the first time :-) as you can see, all others are currently white.

3. address my concerns mentioned in the below post (from yesterday)

Last: If Andy's reading this, I had "stretch" turned on since the moment I found out about it... but I had the smugmug "small" style selected. Now I have smugmug standard style selected.



Ok, things are starting to look a little better..... slowly but surely, Andy.
http://360photostock.smugmug.com have not set up the CNAME yet either!
(but I already know how to do that one :-)

I"m now working on the page and gallery font colors to make them "work" with the colors that are set at this moment.
My only question to you here is......

BEFORE I got and impliment this code listed below, do I need to remove the code in my CSS that's associated with these elements? And, to keep me out of trouble for sure, would you be kind enough to tell me exactly which code to remove, if that's the case?

Thanks,
Mark

[Allen]

...
2. get rid of the GREEN photo navigation object "1" as in page 1 of...
that's the only element I missed the first time :-) as you can see, all others are currently white..
Here's your green.

.pageOn.title {color: red;}

Where are you making these changes? In your user CSS or theme?
If you copied the theme into your own please state at the top of the new
theme that it is a modified version. All I see for that gallery is:
/* v1 -IE7 stretchy */

[Markjay]

The changes are being made in my CSS box. And, will the stretchy work BOTH in FF & IE?

Here's your green.

.pageOn.title {color: red;}

Where are you making these changes? In your user CSS or theme?
If you copied the theme into your own please state at the top of the new
theme that it is a modified version. All I see for that gallery is:
/* v1 -IE7 stretchy */

[Markjay]

How do I change the color ONLY in between the horizontal dashes in the "dashes theme" to a different color..... or can I?

I want to make that area a bit more of a separator, visually.

Thank you

[Allen]

How do I change the color ONLY in between the horizontal dashes in the "dashes theme" to a different color..... or can I?

I want to make that area a bit more of a separator, visually.

Thank you
This area?

#albumNav_top {background: red;}

or just for your test gallery.

.gallery_4119700 #albumNav_top {background: red;}

[Markjay]

Ok, trying to keep my posts togther regarding this site......

I created a contact page and, an html only page. However, I goofed somewhere along the line. Can you help, it's getting ugly! :-)

Here's the link to the html only gallery with contact page.
http://360photostock.smugmug.com/gallery/4145492

As you can see, the html is viewable IN the page... no good.

What did I do wrong?

Thank you in advance!

Markjay


This area?

#albumNav_top {background: red;}

or just for your test gallery.

.gallery_4119700 #albumNav_top {background: red;}

[Allen]

Ok, trying to keep my posts togther regarding this site......

I created a contact page and, an html only page. However, I goofed somewhere along the line. Can you help, it's getting ugly! :-)

Here's the link to the html only gallery with contact page.
http://360photostock.smugmug.com/gallery/4145492

As you can see, the html is viewable IN the page... no good.

What did I do wrong?

Thank you in advance!

Markjay
Man, that looks ugly.:D

Are you trying to insert a form? Looks like a lot of CSS to me.

<html>
<form.....
...
...
</form>
</html>

[Markjay]

I now can not remove the offending code from my gallery description box!
There's script in that code it doesn't like

Now what? :-(

I'm sure you'll make me smile again..... soon :-)





Man, that looks ugly.:D

Are you trying to insert a form? Looks like a lot of CSS to me.

<html>
<form.....
...
...
</form>
</html>

[Allen]

I now can not remove the offending code from my gallery description box!
There's script in that code it doesn't like

Now what? :-(

I'm sure you'll make me smile again..... soon :-)
Go to "customize gallery" under "gallery tools" and edit it there.

[Markjay]

Good try..... here's a screen shot of that that looks like. You can see some of the contact page elements showing up ON the customize gallery page! Notice: submit, clear, etc.

you know Al, we went through this VERY thing before with my other smugmug site and for the life of me, I can not find the solution you came up with..... but, you did! You might be better at searching those things than I am or, you can just work from here?

http://360photostock.smugmug.com/photos/241978507-M.jpg

Go to "customize gallery" under "gallery tools" and edit it there.

[Allen]

Good try..... here's a screen shot of that that looks like. You can see some of the contact page elements showing up ON the customize gallery page! Notice: submit, clear, etc.

you know Al, we went through this VERY thing before with my other smugmug site and for the life of me, I can not find the solution you came up with..... but, you did! You might be better at searching those things than I am or, you can just work from here?


:scratch Huh? Just click in that description box, select all, and hit delete. Am I
missing something?:D

[Markjay]

Al, I'm not THAT thick :-)

I keep deleting it and for some strange reason my "save button" bottom right of my customize window will not save that state...... and the code remains.
I'm going to send you a private message with my login and see if YOU can do it yourself... just try to delete the code and save the customized settnigs.

I'll wait and see what happens by reply here or PM.

Sorry to make this complicated..... it shouldn't be, normally!

Markjay

:scratch Huh? Just click in that description box, select all, and hit delete. Am I
missing something?:D

[Allen]

Al, I'm not THAT thick :-)

I keep deleting it and for some strange reason my "save button" bottom right of my customize window will not save that state...... and the code remains.
I'm going to send you a private message with my login and see if YOU can do it yourself... just try to delete the code and save the customized settnigs.

I'll wait and see what happens by reply here or PM.

Sorry to make this complicated..... it shouldn't be, normally!

Markjay
Drivin' me crazy here, can't save caption. Just heard Smug down so that's the reason.

[Allen]

Al, I'm not THAT thick :-)

I keep deleting it and for some strange reason my "save button" bottom right of my customize window will not save that state...... and the code remains.
I'm going to send you a private message with my login and see if YOU can do it yourself... just try to delete the code and save the customized settnigs.

I'll wait and see what happens by reply here or PM.

Sorry to make this complicated..... it shouldn't be, normally!

Markjay
Tricky one. But I found the edit button way at the bottom of the page. Once in I deleted and hit save so you should be able to edit again and add your stuff. Post it on Dgrin first so we can see what's going in. Just make sure it's between html tags.

<html>
stuff here
</html>

[Markjay]

Contact page: done

Now: galleries

Right now, my thumbnails appear too far up the page / close to the gallery nav bar. What code can I use to shift them down to where they equal the top edge of my photo on the right? Equal to the top edge of the photo that is.

http://360photostock.smugmug.com/gallery/4119700#240367091

Also note: the webpage header does NOT appear on my other computer in my home..... can you see it on your PC and, is it showing up BOTH on the home page and galleries page? If not, what can I do to correct that?


Thank you,
Markjay

Tricky one. But I found the edit button way at the bottom of the page. Once in I deleted and hit save so you should be able to edit again and add your stuff. Post it on Dgrin first so we can see what's going in. Just make sure it's between html tags.

<html>
stuff here
</html>

[Markjay]

Please my apologies for my impatience today in trying to bump this up .....
I only have a certain designated amount of time to do these customizations today and... that's running out! :-(

Most important right now is moving the thumnails down in the gallery to the top edge of the photo it represents on the right side of th gallery.

Thank you much!

Markjay


Contact page: done

Now: galleries

Right now, my thumbnails appear too far up the page / close to the gallery nav bar. What code can I use to shift them down to where they equal the top edge of my photo on the right? Equal to the top edge of the photo that is.

http://360photostock.smugmug.com/gallery/4119700#240367091

Also note: the webpage header does NOT appear on my other computer in my home..... can you see it on your PC and, is it showing up BOTH on the home page and galleries page? If not, what can I do to correct that?


Thank you,
Markjay

[Allen]

Please my apologies for my impatience today in trying to bump this up .....
I only have a certain designated amount of time to do these customizations today and... that's running out! :-(

Most important right now is moving the thumnails down in the gallery to the top edge of the photo it represents on the right side of th gallery.

Thank you much!

Markjay
First time I've seen the caption at the top. This will do it for that size caption but any more lines, the right side will lower and thumbs stay at the present level.

#thumbnails {margin-top: 45px;}

And you have some with three lines and some with none so it's not going to
be consistent. Might suggest moving caption to the bottom so page flows
better.

/* Moves caption to bottom and centers caption */
#caption_top {display: none;}
#caption_bottom {display: block;}
#caption_bottom {text-align: center;}

/* lowers all from page nav */
#photos {margin-top: 15px !important;}

/* centers main image */
#ajaxPhotoBox {text-align: center;}