Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Changing font size and color for Gallery Name Description  (Read 8101 times)

0 Members and 1 Guest are viewing this topic.

Desert Rider

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 29
Changing font size and color for Gallery Name Description
« on: March 22, 2010, 11:00:20 pm »

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.
Logged
Rick Wickert
If you think nobody cares about you, try missing a couple of payments.

onthepike

  • Guest
Re: Changing font size and color for Gallery Name Description
« Reply #1 on: March 22, 2010, 11:11:14 pm »

I believe that's h3:

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

Check it out and report back.
Logged

Desert Rider

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 29
Re: Changing font size and color for Gallery Name Description
« Reply #2 on: March 23, 2010, 12:35:15 am »

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]
/*************************
  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);}
« Last Edit: March 23, 2010, 01:05:56 am by Joe Carver »
Logged
Rick Wickert
If you think nobody cares about you, try missing a couple of payments.

Joe Carver

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: us
  • Offline Offline
  • Gender: Male
  • Posts: 1510
  • aka 'i-imagine'
    • Home Page
Re: Changing font size and color for Gallery Name Description
« Reply #3 on: March 23, 2010, 01:08:23 am »

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

  • Guest
Re: Changing font size and color for Gallery Name Description
« Reply #4 on: March 23, 2010, 01:46:36 am »

I added a class attribute to that table data cell:

Code: [Select]
<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.

Logged

Desert Rider

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 29
Re: Changing font size and color for Gallery Name Description
« Reply #5 on: March 23, 2010, 02:15:15 am »

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.
Logged
Rick Wickert
If you think nobody cares about you, try missing a couple of payments.

Desert Rider

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 29
Re: Changing font size and color for Gallery Name Description
« Reply #6 on: March 23, 2010, 02:19:51 am »

I added a class attribute to that table data cell:

Code: [Select]
<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?
Logged
Rick Wickert
If you think nobody cares about you, try missing a couple of payments.

onthepike

  • Guest
Re: Changing font size and color for Gallery Name Description
« Reply #7 on: March 23, 2010, 02:49:42 am »

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.
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Logged

Desert Rider

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 29
Re: Changing font size and color for Gallery Name Description
« Reply #9 on: March 23, 2010, 06:21:49 pm »

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. :)
Logged
Rick Wickert
If you think nobody cares about you, try missing a couple of payments.

Desert Rider

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 29
Re: Changing font size and color for Gallery Name Description
« Reply #10 on: March 24, 2010, 04:08:42 am »

I added a class attribute to that table data cell:

Code: [Select]
<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.
Logged
Rick Wickert
If you think nobody cares about you, try missing a couple of payments.
Pages: [1]   Go Up
 

Page created in 0.023 seconds with 21 queries.