Webdev question

[sheila]

For the CSS gurus: How do I just change the colour of the text in the Webdev style. The original is just too dark for my old eyes so I would like to lighten just the text - everything else is fine.

Cheers
Sheila

[altofran]

Hi,

I'm not a CSS guru, but I can answer that! You may change the text color by modifying the «color» field in the following section of the style:

div,th,tr,table,font,li,ul,form,
blockquote,p,b,i,h1,h2,h3,h4,h5,font, center
{
border: 0px;
color: rgb(91, 91, 101);
font: 12px verdana, arial, sans-serif;
}

Hope this will help!

[slug]

if you really want to know.
here's a quick lesson in hexidecimal.

those "web colors" like FF2AB9 are three 2-digit numbers in hexidecimal which is base 16. in real life, most of use base 10.

hex uses digits, 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

just like 87 in base 10 is 8*10+7, in hex, FF is 15*16+15 = 255
2A = 2*16+10 = 42
B9 = 11*16+9 = 185
so #FF2AB9 is the same as rgb(255,42,185)

and rgb(91, 91, 101) is the same as #5B5B65


or if you're already familiar with the rgb hex triplet format like #FF2AB9 which you can often get from color pickers like photoshops.
just replace the
color: rgb(91,91,101)
with
color: #5B5B65 (or whatever color you want to use)

or you could adjust them by guessing, and add 23 to each number
and use rgb(114,114,124)

etc.
-slug

[sheila]

Thanks to you both but all I want to do is change the text to white. I tried what nacef suggested and it worked in the sample of the CSS (pbase.com/css?new) - (great, white text) which I updated but when I went back and applied the saved and updated CSS in Edit Gallery (which I normally do to change any CSS), it did not work. It showed just a plain gallery white gallery. No whistles and bells as Webdev is! Any ideas. I've tried every which way. Cut and pasted just changing the text as Nacef suggested but no joy in the final update.

Cheers
Sheila

[srijith]

Thanks to you both but all I want to do is change the text to white. I tried what nacef suggested and it worked in the sample of the CSS (pbase.com/css?new) - (great, white text) which I updated but when I went back and applied the saved and updated CSS in Edit Gallery (which I normally do to change any CSS), it did not work. It showed just a plain gallery white gallery. No whistles and bells as Webdev is! Any ideas. I've tried every which way. Cut and pasted just changing the text as Nacef suggested but no joy in the final update.

Cheers
Sheila

Sheila.. is there a sample gallery we can check out that you have applied your new CSS style to? I can help if you can give me an example of such a page.

[yardbird]

hey shiela, i had posted a topic about CSS colors. you can use the information there. It might help. Otherwise i wqill look into your gallery and send you the code.

[sheila]

Thanks to you both but all I want to do is change the text to white. I tried what nacef suggested and it worked in the sample of the CSS (pbase.com/css?new) - (great, white text) which I updated but when I went back and applied the saved and updated CSS in Edit Gallery (which I normally do to change any CSS), it did not work. It showed just a plain gallery white gallery. No whistles and bells as Webdev is! Any ideas. I've tried every which way. Cut and pasted just changing the text as Nacef suggested but no joy in the final update.

Cheers
Sheila

Sheila.. is there a sample gallery we can check out that you have applied your new CSS style to? I can help if you can give me an example of such a page.

Yes, for example this gallery
http://www.pbase.com/sheila/assignment
You can see from the source that its webdev1 white which is what I called the new CSS. Any ideas?

Cheers and thanks for all your help.
Sheila

[srijith]

You can see from the source that its webdev1 white which is what I called the new CSS. Any ideas?

Haa.. you were almost there I deduce from the previous posts that you wanted the text to the white, right? What you did with the colors was correct. It is just that your comment

Code: Select all

Sheila Smart's Photo Galleries at pbase.com

was not escaped. In short, th browser thought that, that line was a CSS command and it went nuts

All you have to do is change that line to

Code: Select all

/* Sheila Smart's Photo Galleries at pbase.com*/

to "comment out" the comment. I can see it fine, with white text in IE after I do that.

[sheila]

You can see from the source that its webdev1 white which is what I called the new CSS. Any ideas?

Haa.. you were almost there I deduce from the previous posts that you wanted the text to the white, right? What you did with the colors was correct. It is just that your comment

Code: Select all

Sheila Smart's Photo Galleries at pbase.com

was not escaped. In short, th browser thought that, that line was a CSS command and it went nuts

All you have to do is change that line to

Code: Select all

/* Sheila Smart's Photo Galleries at pbase.com*/

to "comment out" the comment. I can see it fine, with white text in IE after I do that.

Thank you so much - it worked. Er... which part of the CSS do I change to change the background color/colour or am I pushing a friendship!

Cheers
Sheila

[srijith]

Er... which part of the CSS do I change to change the background color/colour or am I pushing a friendship!

Depends on which background you want to change There are various parts you can change.

If you want to change the background of the portion around the image, change the "background: rgb(35, 35, 35);" at "a.td.thumbnail". If you want to change the background color of the image when you put yourmouse over it, change "background: rgb(32, 32, 32);" at "a.td.thumbnail:hover".


The basic idea is to look at the "background: rgb(x,y,z)" for the portion you want to change and edit the x,y,z.

[sheila]

Thanks. I hope this post has been of assistance to others as it has been to me.

Cheers
Sheila

[barbw]

I have another webdev template question.

I've managed to tweak the webdev template on my pages but there is one little thing that I have not been able to figure out how to change.

The webdev template does not display the camera model under the pictures. The other info shows up, just not the camera model. If I switch my pages to one of the other templates, the camera model shows up. I've tried to compare the CSS code from the other templates to the Webdev one and figure out what is missing or different, but I'm a total CSS newbie and am stumped.

I've checked other pages using the webdev template and none of the pages I've seen pages display the camera body name either.

[srijith]

The webdev template does not display the camera model under the pictures. The other info shows up, just not the camera model.

That is because in the CSS is this code

Code: Select all

i{
        display: none;
}


This code is there in your CSS. I am not sure whether it is there or not in the actual webdev CSS or you changed it. I am also not sure what the person who wrote that code is trying to hide.

Since in the HTML the camera model is put inside a <i> tag, it will not be displayed. I tried to isolate the CSS to just that portion (tried a "a" inside the "i" sequence) without sucess, so, as far as I can see, the easiest way to get around that bug is to just delete the above mentioned code. But, once you do that please try to go through all the levels of your album to see if somethging ugly is coming up (something that so far was hidden by the same "display:none").

Anyone has any idea why the display was set to none in the first places?

[barbw]

Thanks! As far as I can tell, everything seems to display just fine without that tag.

I missed seeing that display none. Kind of obvious after the fact

[slug]

i removed that i{display:none} from webdev
hadn't noticed that.
thanks for pointing that out.

would it be useful to put something like a

Code: Select all

<div class=techinfo>

around the camera and tech info on the individual image page?
any suggestions on the best way to improve css control over that part of the page?

thanks,
--slug