Changing font size and color for Gallery Name Description

[Desert Rider]

Just returning to CPG. Currently using 1.4.26 and theme is Rainy Day. I would like to change the font and colors for both the Gallery Name and the Gallery Description. As you can see from my link the Gallery Description text is unreadable because the font color is close to the BG gif color. I've searched the forums for info on how to do this but didn't find exact information. I did find a post about editing the CSS style sheet. I downloaded that and opened it in Notepad ++. Same with source view of the page. I can see that the Gallery Name is listed under h1 and can see the corresponding settings in the style sheet for that but I cannot seem to locate anything for the Gallery Description line. Any help would be appreciated. Boy, I've got a lot to learn about this!

Gallery:
http://www.unclealice.com/coppermine/index.php

Attached is screenshot of h1 but as stated cannot determine where on style sheet the Gallery Description settings are. Second attachment is of source view of page and the section on the Gallery Description line.

[onthepike]

I believe that's h3:

Code Select Expand

h3 {
        font-weight: normal;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        margin: 2px;
}


Check it out and report back.

[Desert Rider]

Thanks for the reply. I tried changing the style sheet for h3 with no change. Here is the complete style.css text. I added the line color: #FFFFFF in the h3 section. Did I do it incorrectly or could it be a different section?

Code Select Expand


/*************************
 Coppermine Photo Gallery
 ************************
 Copyright (c) 2003-2010 Coppermine Dev Team
 v1.0 originally written by Gregory Demar

 This program is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License version 3
 as published by the Free Software Foundation.
 
 ********************************************
 Coppermine version: 1.4.26
 $HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.4.x/themes/rainy_day/style.css $
 $Revision: 6987 $
 $Author: gaugau $
 $Date: 2010-01-02 11:46:39 +0100 (Sa, 02 Jan 2010) $
**********************************************/

/* Colors used:                                */
/* --------------------------------------------*/
/* #000000 = RBG   0,  0,  0 = (black)         */
/* #66707C = RBG 102,112,124 = (dark grey)     */
/* #5F5F5F = RBG  95, 95, 95 = (dark grey)     */
/* #BDBEBD = RBG 189,190,189 = (light grey)    */
/* #A3AAB4 = RBG 163,170,180 = (light grey)    */
/* #C2C9D3 = RBG 194,201,211 = (light grey)    */
/* #DEDEDE = RBG 222,222,222 = (dark white)    */
/* #EFEFEF = RBG 239,239,239 = (dark white)    */
/* #FFFFFF = RBG 255,255,255 = (white)         */
/* #758698 = RBG 117,134,152 = (light blue)    */
/* #005D8C = RBG   0, 93,140 = (medium blue)   */
/* #0033CC = RBG   0, 51,204 = (medium blue)   */
/* if you don't like a color, just do a search */
/* and replace on the hex color...             */

body {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 12px;
       background: #758698 ;
       color: Black;
       margin: 0px;
}

table {
       font-size: 12px;
}

h1{
       font-size: 32px;
       font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
       text-decoration: none;
       color: #FFFFFF;
       margin: 2px;
       font-style: italic;
}

h2 {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 18px;
       margin: 0px;
       color: #FFFFFF;
       font-style: italic;
}

h3 {
       font-weight: normal;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 12px;
       color: #FFFFFF;
       margin: 2px;
}

p {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 100%;
       margin: 2px 0px;
}

ul {
       margin-left: 5px;
       padding: 0px;
}

li {
       margin-left: 10px;
       margin-top: 4px;
       margin-bottom: 4px;
       padding: 0px;
       list-style-position: outside;
       list-style-type: disc;
}

.textinput {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 100%;
       border: 1px solid #A3AAB4;
       padding-right: 3px;
       padding-left: 3px;
       background-color: #DEDEDE;
}

.listbox {
       font-family: Verdana, Arial, Arial, Helvetica, sans-serif;
       background-color: #DEDEDE;
       font-size: 100%;
       border: 1px solid #A3AAB4;
       vertical-align: middle;
}

.button {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 100%;
       border: 1px solid #005D8C;
       background-image: url(images/button_bg.gif);
       background-position: bottom;
}

.comment_button {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 100%;
       border: 1px solid #005D8C;
       background-image: url(images/button_bg.gif);
       background-position: bottom;
       padding-left: 3px;
       padding-right: 3px;
}

.radio {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 100%;
       vertical-align: middle;
}

.checkbox {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 100%;
       vertical-align: middle;
}

a {
       color: #0033CC;
       text-decoration: none;
}

a:hover {
       color: #0033CC;
       text-decoration: underline;
}

.bblink a {
       color: #0033CC;
       text-decoration: none;
}

.bblink a:hover {
       color: #0033CC;
       text-decoration: underline;
}

.maintable {
       border: 1px solid #DEDEDE;
/*        background-color: #BDBEBD; */
       background-color:#C2C9D3;
       margin-top: 1px;
       margin-bottom: 1px;
}

.tableh1 {
       background: #66707C ;
       color: #FFFFFF;
       padding-top: 3px;
       padding-right: 10px;
       padding-bottom: 3px;
       padding-left: 10px;
}

.tableh1_compact {
       background: #66707C ;
       color: #FFFFFF;
       padding-top: 2px;
       padding-right: 5px;
       padding-bottom: 2px;
       padding-left: 5px;
}

.tableh2 {
       background: #A3AAB4 ;
       color: #000000;
       padding-top: 3px;
       padding-right: 10px;
       padding-bottom: 3px;
       padding-left: 10px;
}

.tableh2_compact {
       background: #A3AAB4 ;
       color: #000000;
       padding-top: 2px;
       padding-right: 5px;
       padding-bottom: 2px;
       padding-left: 5px;
}

.tableb {
       background: #C2C9D3 ;
       padding-top: 3px;
       padding-right: 10px;
       padding-bottom: 3px;
       padding-left: 10px;
}

.tableb_compact {
       background: #C2C9D3 ;
       padding-top: 2px;
       padding-right: 5px;
       padding-bottom: 2px;
       padding-left: 5px;
}

.tablef {
       background: #A3AAB4;
       padding-top: 10px;
       padding-right: 10px;
       padding-bottom: 10px;
       padding-left: 10px;
}

.catrow_noalb {
       background: #A3AAB4 ;
       color: #000000;
       padding-top: 3px;
       padding-right: 10px;
       padding-bottom: 3px;
       padding-left: 10px;
}

.catrow {
       background: #C2C9D3 ;
       padding-top: 3px;
       padding-right: 10px;
       padding-bottom: 3px;
       padding-left: 10px;
}

.album_stat {
       font-size: 85%;
       margin: 5px 0px;
}

.thumb_filename {
       font-size: 80%;
       display: block;
}

.thumb_title {
       font-weight: bold;
       font-size: 80%;
       padding: 2px;
       display: block;
}

.thumb_caption {
       font-size: 80%;
       padding: 1px;
       display: block;
}

.thumb_caption a {
       text-decoration: underline;
       color: #000000;
}

.thumb_num_comments {
       font-weight: normal;
       font-size: 80%;
       padding: 2px;
       font-style: italic;
       display: block;
}

.user_thumb_infobox {
       margin-top: 1px;
       margin-bottom: 1px;
}

.user_thumb_infobox th {
       font-weight: bold;
       font-size: 100%;
       margin-top: 1px;
       margin-bottom: 1px;
       text-align: center;
}

.user_thumb_infobox td {
       font-size: 85%;
       margin-top: 1px;
       margin-bottom: 1px;
       text-align: center;
}

.user_thumb_infobox a {
       text-decoration: none;
       color: #000000;
}

.user_thumb_infobox a:hover {
       color: #000000;
       text-decoration: underline;
}

.sortorder_cell {
       background: #66707C ;
       color: #FFFFFF;
       padding: 0px;
       margin: 0px;
}

.sortorder_options {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       background: #66707C ;
       color: #FFFFFF;
       padding: 0px;
       margin: 0px;
       font-weight: normal;
       font-size: 80%;
       white-space: nowrap;
}

.navmenu {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       color: #FFFFFF;
       font-size: 100%;
       font-weight: bold;
       background: #66707C ;
       border-style: none;
}

.navmenu img {
       margin-top: 1px;
       margin-right: 5px;
       margin-bottom: 1px;
       margin-left: 5px;
}

.navmenu a {
       display: block;
       padding-top: 2px;
       padding-right: 5px;
       padding-bottom: 2px;
       padding-left: 5px;
       text-decoration: none;
       color: #FFFFFF;
}

.navmenu a:hover {
       background: #C2C9D3 ;
       text-decoration: none;
       color:         #000000;
}

.admin_menu_thumb {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 85%;
       border: 1px solid #005D8C;
       background-image: url(images/button_bg.gif);
       background-position: bottom;
       color: #000000;
       font-weight: bold;
       margin-top: 0px;
       margin-bottom: 0px;
       width: 85px;
}

.admin_menu_thumb a {
       color: #000000;
       text-decoration: none;
       display: block;
       position: relative;
       padding-top: 1px;
       padding-bottom: 1px;
       padding-left: 10px;
       padding-right: 10px;
}


.admin_menu_thumb a:hover {
       color: #000000;
       text-decoration: underline;
}

.admin_menu {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 85%;
       border: 1px solid #005D8C;
       background-image: url(images/button_bg.gif);
       background-position: bottom;
       background-repeat: repeat-x;
       background-color: #FFFFFF;
       color: #000000;
       margin-top: 0px;
       margin-bottom: 0px;
       text-align: center;
}

.admin_menu a {
       color: #000000;
       text-decoration: none;
       display: block;
       position: relative;
       padding-top: 1px;
       padding-bottom: 1px;
       padding-left: 2px;
       padding-right: 2px;
}

.admin_menu a:hover {
       color: #000000;
       text-decoration: underline;
}

td #admin_menu_anim {
       background-image: url(images/button_bg_anim.gif);
}
.comment_date{
       color: #5F5F5F;
       font-size: 90%;
       vertical-align: middle;
}

.image {
       border-style: solid;
       border-width:1px;
       border-color: #000000;
       margin: 2px;
}

.imageborder {
       border: 1px solid #000000;
       background-color: #FFFFFF;
       margin-top: 30px;
       margin-bottom: 30px;
}

.display_media {
       background: #C2C9D3 ;
       padding-top: 3px;
       padding-right: 10px;
       padding-bottom: 3px;
       padding-left: 10px;
}

.thumbnails {
       background: #C2C9D3 ;
       padding: 5px;
}

.footer {
       font-size: 9px;
       color: #292e34;
}

.footer a {
       text-decoration: none;
       color: #758698;
}

.footer a:hover {
       color: black;
       text-decoration: underline;
}

.statlink {
       color: #FFFFFF;
}

.statlink a {
       text-decoration: none;
       color: #FFFFFF;
}

.statlink a:hover {
       color: #FFFFFF;
       text-decoration: underline;
}

.alblink a {
       text-decoration: underline;
       color: #000000;
}

.alblink a:hover {
       color: #000000;
       text-decoration: underline;
}

.catlink {
       display: block;
       margin-bottom: 2px;
}

.catlink a {
       text-decoration: underline;
       color: #000000;
}

.catlink a:hover {
       color: #000000;
       text-decoration: underline;
}

.topmenu {
       font-size: 100%;
}

.topmenu a {
       color: #FFFFFF;
       text-decoration: none;
}

.topmenu a:hover  {
       color: #FFFFFF;
       text-decoration: underline;
}

.topmenu td  {
       white-space: nowrap;
       font-weight: bold;
}


.img_caption_table {
       border: none;
       background-color: #FFFFFF;
       width: 100%;
       margin: 0px;
}

.img_caption_table th {
       background: #A3AAB4 ;
       font-size: 100%;
       color: #000000;
       padding-top: 4px;
       padding-right: 10px;
       padding-bottom: 4px;
       padding-left: 10px;
       border-top: 1px solid #FFFFFF;
}

.img_caption_table td {
       background: #C2C9D3 ;
       padding-top: 6px;
       padding-right: 10px;
       padding-bottom: 6px;
       padding-left: 10px;
       border-top: 1px solid #FFFFFF;
       white-space: normal;
}

.debug_text {
       border: #BDBEBD;
       background-color: #EFEFEF;
       width: 100%;
       margin: 0px;
}

.clickable_option {
       cursor: default;
}

.listbox_lang {
       color: #000000;
       background-color: #758698;
       border: 1px solid #758698;
       font-size: 80%;
       font-family: Arial, Helvetica, sans-serif;
       vertical-align: middle;
}

#vanity a {
       display:block;
       width:57px;
       height:20px;
       margin: 3px 20px;
}
#vanity img {border:0}
#v_php {float:left;background-image:url(../../images/powered-php.gif);}
#v_php:hover {background-image:url(../../images/h_powered-php.gif);}
#v_mysql {float:left;background-image:url(../../images/powered-mysql.gif);}
#v_mysql:hover  {background-image:url(../../images/h_powered-mysql.gif);}
#v_xhtml {float:right;background-image:url(../../images/valid-xhtml10.gif);}
#v_xhtml:hover {background-image:url(../../images/h_valid-xhtml10.gif);}
#v_css {float:right;background-image:url(../../images/valid-css.gif);}
#v_css:hover{background-image:url(../../images/h_valid-css.gif);}

[Joe Carver]

Please in the future don't post a complete file - .zip it and attach it your your post.

I have put your code in a code box to take up less space and make your post easier to read.

[onthepike]

I added a class attribute to that table data cell:

Code Select Expand


<td class="tableh1" width="100%" style="background-image:url(themes/rainy_day/images/template_r3_c7.gif)" align="right">
{GAL_DESCRIPTION}


I have a penchant for mucking up themes... wait for someone with more knowledge (Gene?) to assist. But this will change your description from black to white.

[Desert Rider]

Please in the future don't post a complete file - .zip it and attach it your your post.

I have put your code in a code box to take up less space and make your post easier to read.

Sorry, I wasn't aware of this. I'll zip it in the future.

[Desert Rider]

I added a class attribute to that table data cell:

Code Select Expand


<td class="tableh1" width="100%" style="background-image:url(themes/rainy_day/images/template_r3_c7.gif)" align="right">
{GAL_DESCRIPTION}


I have a penchant for mucking up themes... wait for someone with more knowledge (Gene?) to assist. But this will change your description from black to white.

Thanks onthepike. What file do I modify to effect the change you've shown?

[onthepike]

I modified template.html but you should really check out the documentation on creating or upgrading your own themes. Instead of editing the contents of the package, it's a better idea to create your own theme which you can base wholly or in-part on the Rainy Day theme you're currently using.

[Joachim Müller]

http://forum.coppermine-gallery.net/index.php/topic,24056.msg123520.html#msg123520

[Desert Rider]

Thanks to all for their responses and help. I did discover that the Gallery Description text color is controlled by the body setting in the style sheet. Changing that also unfortunately changes the caption text color and other text color on the page.

I will take a look at the options suggested by onthepike and Gau Gau and see about investing the time to learn how to create my own themes. I wish there was an easier way to just change this one item but I understand that one must invest time and effort to learn how to modify these themes. For right now I will just switch to another theme that shows the Gallery Description text clearly.

Again, appreciate the help.

[Desert Rider]

I added a class attribute to that table data cell:

Code Select Expand


<td class="tableh1" width="100%" style="background-image:url(themes/rainy_day/images/template_r3_c7.gif)" align="right">
{GAL_DESCRIPTION}


onthepike. once I figured out what you had done and where it needed to be inserted this was exactly what I wanted to do! I'll take your advice about creating my own theme out of Rainy Day and modifying that. Got a lot to learn but no other way to do it except to do it!

Appreciate everyone's input.