HELP: Need to change the style name of one table header

[zebraplayer]

Hello,

I need to make what I am hoping is a simple modification to my theme.

I am currently using the "Water Drop" theme. On it, in the thumbnails view, the table header showing the album categories and the one showing the album name (the one with the sort menu) share the same style .tableh1

How can I change the theme so that the header with the album name will have a different style, say .tableh3; which I can then add to the CSS file? I know how to do the latter part, I just don't know where to rename the table header to use another style.

The problem I am having is that, since both headers use the same style, obviously they use the same color. I want the top (category) header to use one color and the lower (album name) header to use a second color.

I did a search prior to posting this, but I am not too sure I knew what to search for. I got a whole bunch of threads that had nothing to do with my problem.

I appreciate your help.

-Louis

[Casper]

In your theme.php, just search for 'class="tableh1"' and change the ones you want there.

[zebraplayer]

Thanks, Casper. I was able to find and change the style in theme.php. I also created a new style in styles.php called .tableh3 with a new background and font color. However, only the bg color took. The color of the heading itself is still the same as called in .tableh1.

I looked on thumbnails.php to see where that heading was called, to change its style, but I can't find it.

Does anyone know where that heading gets its style from?

Thanks!

Louis

[Joachim Müller]

use the styleguide theme to find out which style affects which part of coppermine; available in your coppermine package and on the demo as well.

Joachim

[zebraplayer]

Joachim,

Thanks for yoru reply. I did that /?themestyleguide as you suggest in the "How to build your own skins" post, but it doew not work on my site. I went to the demo page and it partially works. Meaning it works for just the one style... I think its Classic. I am using raindrop.

Either way, I looked at the Classic styleguide, and I made changes accordingdly. The two themes are not that different. The way I'm reading it, the headings that are supposed to affect that are either H2 or tableh3 (this is a new one I created). Looking at the source code of the live page on IE, I see that it is supposed to be H2. However, I have H2 set to color : #000000, and it's still not working.

Here's a link.

Here's my whole stylesheet if anyone has a sec to look at it:

Code Select Expand

/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: #EC8212;
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color:  #EC8212;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}

body {
       background-color: #EC8212;
       font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
       font-size : 12px;
       color: #666;
       margin: 0px;
}

table {
  font-size : 12px;
}

h1{
       font-weight: bold;
       font-size: 21px;
       font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
       text-decoration: none;
       line-height : 100%;
       color: #000000;
       margin: 2px;
}


h2 {
       font-family: Arial, Helvetica, sans-serif;
       background-image : url(images/box_left_icon.gif);
       background-repeat : no-repeat;
       background-position : left;
       padding-left : 18px;
       font-size: 18px;
       margin: 0px;
}

h3 {
       font-weight: bold;
       font-variant:small-caps;
       font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
       font-size: 24px;
       color:D40E0E;
       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: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
       font-size: 100%;
       border: 1px solid #3E5BB1;
       padding-right: 3px;
       padding-left: 3px;
}

.listbox {
       font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
       font-size: 100%;
       border: 1px solid #3E5BB1;
       vertical-align : middle;
}

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

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

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

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

a {
       color: #7289CD;
       text-decoration: none;
}

a:hover {
       color: #7289CD;
       text-decoration: underline;
}

bblink a {
       color: #EC8212;
       text-decoration: none;
}

bblink a:hover {
       color: #7289CD;
       text-decoration: underline;
}

.maintable {
       border: 1px solid #3E5BB1;
       background-color: #FFF;
       margin-top: 1px;
       margin-bottom: 1px;
}

.tableh1 {
font-family:  Verdana, Geneva, Arial, sans-serif;
color: #FFFFFF;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
background: EC8212;
}

.tableh1_compact {
font-family:  Verdana, Geneva, Arial, sans-serif;
color: #EC8212;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
background-image: url(images/cellpic.gif);
background-repeat: repeat-y;
}

.tableh2 {
color : #000000;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
background-image: url(images/cellpic4.gif);
background-repeat: repeat-x;
}

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

.tableh3 {
font-family:  Verdana, Geneva, Arial, sans-serif;
color: #EC8212;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
background-color: #B9C9F3;
background-image: url(images/cellpic5.gif);
}

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

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

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

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

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

.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: 85%;
       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 {
       color: #EC8212;
       background-color: #B9C9F3;
       padding: 0px;
       margin: 0px;
}

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

.navmenu {
       font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
       color: #FFFFFF;
       font-weight: bold;
       background : #7289CD;
       border-style: none;
}

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

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

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

.admin_menu_thumb {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 90%;
       border: 1px solid #3E5BB1;
       background-image :  url("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: 90%;
       border: 1px solid #3E5BB1;
       background-image :  url("button_bg.gif");
       background-position : bottom;
       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: 10px;
       padding-right: 10px;
}

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

.comment_date{
       color : #5F5F5F;
       font-size: 90%;
       vertical-align : middle;
}

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

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

.footer {
       font-size : 9px;
}

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

.footer a:hover {
       color: #000000;
       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-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
       line-height : 130%;
       font-size : 110%;
}

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

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

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

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

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