forum.coppermine-gallery.net

Support => cpg1.3.x Support => Older/other versions => cpg1.3 Themes/Skins/Templates => Topic started by: torweb on May 17, 2005, 05:20:50 am

Title: Style Sheets (CSS)
Post by: torweb on May 17, 2005, 05:20:50 am
I working on a theme from this site (Final Fantasy) and have spent the last two days trying to change the color of the background.  I've gone over the style shee as well as the template and cannot get the bg color to change.  Is there some kind of short-hand to help understand the what page elements are referred to by the CSS or is it just a random, makeup any name you want.  Here is the CSS for this theme...Am I missing something?

Thanks...

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

a:hover {
   color: #000000;
   text-decoration: overline;
}

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

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

body {
   background-color: #000000;
   background-image: url(images/bg.gif);
   background-repeat: repeat;
   color: #AEAEAE;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   margin: 0px;
   margin: 0px;
   scrollbar-3dlight-color: #555555;
   scrollbar-arrow-color: #777777;
   scrollbar-darkshadow-color: #333333;
   scrollbar-face-color: #444444;
   scrollbar-highlight-color: #444444;
   scrollbar-shadow-color: #333333;
   scrollbar-track-color: #333333;
}

h1{
   color: #AEAEAE;
   font-family: "Verdana", Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-style: normal;
   margin: 2px;
   text-decoration: none;
}

h2 {
   background-position: left;
   background-repeat: no-repeat;
   color: #000000;
   font-family: Verdana, Helvetica, sans-serif;
   font-size: 10px;
   margin: 0px;
   padding-left: 18px;
}

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

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

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

table {
   font-size: 10px;
}

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

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

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

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

.admin_menu_thumb {
   background-color: #5D6674;
   border: 1px solid #005D8C;
   color: #000000;
   font-family: Verdana, Helvetica, sans-serif;
   font-size: 85%;
   font-weight: bold;
   margin-bottom: 0px;
   margin-top: 0px;
   width: 85px;
}

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

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

.alblink a {
   color: #EAEAEA;
   text-decoration: none;
}

.alblink a:hover {
   color: #666600;
   text-decoration: overline;
}

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

.anycontend {
   color: #CCCCCC;
   font-size: 95%;
}

.anycontend a {
   color: #CCCCCC;
   font-size: 95%;
}

.anycontend a:hover {
   color: #FFFFFF;
   font-size: 95%;
   text-decoration: overline;
}

.button {
   background-color: #5D6674;
   border: 1px solid #404750;
   color: #CCCCCC;
   font-family: Verdana, Helvetica, sans-serif;
   font-size: 100%;
}

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

.catlink a {
   color: #C0C0C0;
   text-decoration: none;
}

.catlink a:hover {
   color: #CCCCCC;
   text-decoration: overline;
}

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

.clickable_option {
   border-bottom: 1px dotted #0000FF;
   cursor: hand;
}

.comment_button {
   background-color: #5D6674;
   border: 1px solid #404750;
   color: #CCCCCC;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 100%;
   padding-left: 3px;
   padding-right: 3px;
}

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

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

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

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

.footer a:hover {
   color: #CCCCCC;
   text-decoration: overline;
}

.gal_name {
   color: #DBDDD0;
   font-size: 20px;
}

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

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

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

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

.img_caption_table th {
   background: #49525D;
   border-top: 1px solid #394049;
   color: #CCCCCC;
   font-size: 100%;
   padding-bottom: 4px;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 4px;
}

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

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

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

.maintable {
   background-color: #4F5864;
   border: 1px solid #394049;
   margin-bottom: 1px;
   margin-top: 1px;
}

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

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

.navmenu a:hover {
   background: #49525D;
   color: #FFFFFF;
   text-decoration: none;
}

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

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

.sortorder_cell {
   background: #5E6A77;
   color: #CCCCCC;
   margin: 0px;
   padding: 2px;
}

.sortorder_options {
   background: #5E6A77;
   color: #CCCCCC;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 85%;
   font-weight: normal;
   margin: 0px;
   padding: 0px;
   white-space: nowrap;
}

.statlink {
   color: #6A7786;
}

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

.statlink a:hover {
   color: #CCCCCC;
   text-decoration: overline;
}

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

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

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

.tableh1 {
   background: #5E6A77;
   color: #99A2AF;
   padding-bottom: 3px;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 3px;
}

.tableh1_compact {
   background: #515B67;
   color: #CCCCCC;
   padding-bottom: 2px;
   padding-left: 5px;
   padding-right: 5px;
   padding-top: 2px;
}

.tableh2 {
   background: #616C7A;
   color: #C7C7C7;
   padding-bottom: 3px;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 3px;
}

.tableh2_compact {
   background: #616D7B;
   color: #CCCCCC;
   padding-bottom: 2px;
   padding-left: 5px;
   padding-right: 5px;
   padding-top: 2px;
}

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

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

.thumb_caption a {
   color: #AEAEAE;
   text-decoration: overline;
}

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

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

.thumbnails {
   background: #49525D;
   padding: 5px;
}

.topmenu {
   font-size: 95%;
}

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

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

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

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

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

.user_thumb_infobox a:hover {
   color: #CCCCCC;
   text-decoration: overline;
}

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

.user_thumb_infobox th {
   font-size: 100%;
   font-weight: bold;
   margin-bottom: 1px;
   margin-top: 1px;
   text-align: center;
}
Title: Re: Style Sheets (CSS)
Post by: OmegaGOD on May 17, 2005, 05:40:09 am
http://forum.coppermine-gallery.net/index.php?topic=16716.msg77908#msg77908

You can use the developer toolbar for firefox or the Web Accessibility Toolbar for IE to help you determine which elements are controlled by what CSS style.
Title: Re: Style Sheets (CSS)
Post by: torweb on May 17, 2005, 07:05:31 am
Thanks for the tip...a great tool.  Solved my problem in minutes.

Thanks again!!!!

Tom