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: Customising my new theme - Pt1  (Read 6901 times)

0 Members and 1 Guest are viewing this topic.

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Customising my new theme - Pt1
« on: December 09, 2010, 10:09:37 pm »

Hi

I'm trying to match a phpBB3 theme by altering the curve theme a little (OK, a lot) I've just run into a few problems and I was wonding if anyone could help please? I am currently working on trying to make the overhead menu in Coppermine match the one in phpBB3.

Coppermine here - http://www.brummiesfans.com/coppermine/index.php?cat=2
phpBB3 here - http://www.brummiesfans.com/main/

Firstly, why when hovering over Home in the overhead menu, does it try to invoke a drop-down menu when there are no child menu items hanging off "Home"?

Secondly, and this is the main part of this post, what controls the text decoration of the menu items?

The style.css file wording follows, which hopefully will be of help.

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.5.6
  $HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.5.x/themes/curve/style.css $
  $Revision: 7620 $
**********************************************/


body {
    background: #d00000;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color : Black;
    margin: 0px;
    padding-top: 10px;
    padding-right: 5%;
    padding-bottom: 15px;
    padding-left: 5%;
}



.border-top {background: url(images/border_top.png) repeat-x 0 0;}
.border-bottom {background: url(images/border_bottom2.png) repeat-x 0 100%;}
.border-left {background: url(images/border_left.png) repeat-y 0 0;}
.border-right {background: url(images/border_right.png) repeat-y 100% 0;}
.border-top-left {background: url(images/border_top_left.png) no-repeat 0 0;}
.border-top-right {background: url(images/border_top_right.png) 100% 0 no-repeat;}
.border-bottom-left {background: url(images/border_bottom_left.png) 0 100% no-repeat;}
.border-bottom-right {background: url(images/border_bottom_right.png) 100% 100% no-repeat;}
.header {background: url(images/header_random_1.png) no-repeat;}
.inside {padding: 10px 10px 4px 10px;}
.clear {clear: both and height: 0}

#header {
background-color: transparent;
background-image: url(images/header_random_1.png);
    background-position: 100%
    background-repeat: no-repeat;
background-attachment: scroll;
display: block;
padding-top: 107px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}

#columns {
position: relative;
width: 880px;
top: 0px;
height: inherit;
}
#left {
float: left;
width:165px;
top: 0px;
left:0px;
padding-left:10px;
padding-right:5px;
}
#main{
float: left;
width: 695px;
top: 0px;
right: 0px;
padding-left:5px;
}






#cpg_logo_block_logo {
    background-color: transparent;
    background-image: url(images/site_logo.png);
    background-position: 100%
    background-repeat: no-repeat;
    background-attachment: scroll;
    display: block;
    padding-top: 112px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.cpg_starttable_outer  {
    background-color: transparent;
    background-image: url(images/main_block.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0pt -200px;
    padding-left: 20px;
}

.cpg_starttable_outer div.cpg_starttable_inner {
    background-color: transparent;
    background-image: url(images/main_block.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 100% -200px;
    display: block;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 0px;
    padding-left: 0px;
}

#sysmenu {
    margin-top: 0px;
}

.menuheight {      /* IE7 */
    width: 1px;    /* IE7 */
    height: 18px;  /* IE7 */
}                  /* IE7 */


table {
    font-size: 12px;
}

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

h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    margin: 0px;
}

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

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

pre.filepath {
    margin: 0px;
    padding: 0px;
}

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

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

.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:link {
    color: #346;
    text-decoration: none;
}

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

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

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

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

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

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

.button, .admin_menu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #d00000;
    background-color:#ffdd00;   
    border: 1px solid #d00000;
    cursor:pointer;
    padding-left:0px;
    padding-right:0px;
    margin-right:2px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.button {
    font-size: 0.8em;
    white-space: nowrap;
}

a.button, a.admin_menu {
    color:#ffdd00;
    text-decoration:none;
}

a:hover.button, a:hover.admin_menu {
    background-color: #FFFF00;
}

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

.tableh1 {
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
    color: white;
    font-family: arial,helvetica,sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    background: url(images/main_block.png) no-repeat -10px -160px;
}

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

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

/* This class will be used in conjunction with class tableb: attributes not particularly (re)-assigned will be taken into account from tableb. */
/* It is being used to accomplish alternating row colors for lists. */
/* It's recommended to only assign another background color that slightly differs from the one defined in tableb */
.tableb_alternate {
    background: #E7EAEF;
}

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

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

.catrow {
    background: #F0F4F7 ;
    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: 80%;
    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 {
    padding: 0px;
    margin: 0px;
}

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

.navmenu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFdd00;
    font-size: 100%;
    font-weight: bold;
    background : transparent url(images/main_block.png) no-repeat scroll -10px -160px;
    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: #FFdd00;
}

.navmenu a:hover {
    background : #ffff00 ;
    text-decoration: none;
    color: #ff0000;
}

.icon {
    vertical-align:middle;
    margin-right:1px;
}

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

.image {
    border-style:solid;
    border-width:1px;
    border-color:#d00000;
    margin:2px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

/* pseudo-classes for image links */
a:link .image{
    border-style:solid;
    border-width:1px;
    border-color:#d00000;
    margin:2px;
}

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

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

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

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

/* pseudo-classes for middlethumb links */
a:link .middlethumb,a:visited .middlethumb,a:focus .middlethumb,a:hover .middlethumb,a:active .middlethumb{
    border: 2px solid blue;
}

.imageborder {
    border: 1px solid #d00000;
    background-color: #FFdd00;
    margin-top: 3px;
    margin-bottom: 3px;
}

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

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

.footer {
    font-size : 9px;
}

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

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

.statlink {
    color: #FFFFFF;
}

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

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

.alblink {
    font-weight:bold;
}

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

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

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

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

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

.topmenu {
    line-height : 130%;
    font-size: 100%;
}

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

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

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

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

.img_caption_table td {
    background: #EFEFEF ;
    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: #D1D7DC;
    border: 1px solid #0E72A4;
    font-size: 80%;
    font-family: Arial, Helvetica, sans-serif;
    vertical-align : middle;

}

.pic_title {
    color: #000000;
    font-size: 120%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    text-align : center;
    padding-top:0px;
    padding-bottom:0px;
    margin-top:0px;
    margin-bottom:0px;
    line-height:1.0em;
}

.pic_caption {
    color: #000000;
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    text-align : center;
    padding-top:0px;
    padding-bottom:0px;
    margin-top:0px;
    margin-bottom:0px;
    line-height:1.0em;
}

.important {
    /* background-image : url(images/important.gif); */
    color: red;
    font-weight: bold;
    padding-left:1px;
    padding-right:1px;
    padding-top:3px;
    padding-bottom:3px;
}

#cpgChooseLanguageWrapper {
    float:left;
    margin-left:3px;
    margin-right:3px;
    margin-top:0px;
    margin-bottom:0px;
}

#cpgChooseThemeWrapper {
    float:left;
    margin-left:3px;
    margin-right:3px;
    margin-top:0px;
    margin-bottom:0px;
}

.filmstrip_background {
    background-color:#000000;
}

.prev_strip {
    text-align: left;
}

.next_strip{
    text-align: right;
}

/** Swfupload css **/
div.fieldset {
    border:  2px solid #0E72A4;
    margin: 10px 0;
    padding: 20px 10px;
}

div.fieldset span.legend {
    position: relative;
    padding: 3px;
    top: -30px;
    background-color: #0E72A4;
    color: #fff;
}

div.flash {
    width: 375px;
    margin: 10px 5px;
    border-color: #D9E4FF;
}

input[disabled]{ border: 1px solid #ccc } /* FF 2 Fix */


.progressWrapper {
    width: 357px;
    overflow: hidden;
}

.progressContainer {
    margin: 5px;
    padding: 4px;
    border: solid 1px #E8E8E8;
    background-color: #F7F7F7;
    overflow: hidden;
}
/* Message */
.message {
    margin: 1em 0;
    padding: 10px 20px;
    border: solid 1px #FFDD99;
    background-color: #FFFFCC;
    overflow: hidden;
}
/* Error */
.red {
    border: solid 1px #B50000;
    background-color: #FFEBEB;
}

/* Current */
.green {
    border: solid 1px #DDF0DD;
    background-color: #EBFFEB;
}

/* Complete */
.blue {
    border: solid 1px #CEE2F2;
    background-color: #F0F5FF;
}

.progressName {
    font-size: 8pt;
    font-weight: 700;
    color: #555;
    width: 323px;
    height: 14px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

.progressBarInProgress,
.progressBarComplete,
.progressBarError {
    font-size: 0;
    width: 0%;
    height: 2px;
    background-color: blue;
    margin-top: 2px;
}

.progressBarComplete {
    width: 100%;
    background-color: green;
    visibility: hidden;
}

.progressBarError {
    width: 100%;
    background-color: red;
    visibility: hidden;
}

.progressBarStatus {
    margin-top: 2px;
    width: 337px;
    font-size: 7pt;
    font-family: Arial;
    text-align: left;
    white-space: nowrap;
}

a.progressCancel {
    font-size: 0;
    display: block;
    height: 14px;
    width: 14px;
    background-image: url(../../images/cancelbutton.gif);
    background-repeat: no-repeat;
    background-position: -14px 0px;
    float: right;
}

a.progressCancel:hover {
    background-position: 0px 0px;
}

.swfupload {
    vertical-align: top;
}

/**styles for photo manager*/
table#pic_sort tr td {
    padding: 4px;
    border-bottom: 1px solid #CCCCCC;
}

/** styles for album manager and photo album*/
table#album_sort tr td {
    padding: 3px;
    border-bottom: 1px solid #CCCCCC;
}

table#album_sort tr td span.editAlbum {
    margin-left: 100px;
    font-size: 10px;
    line-height: 100%;
    text-decoration: underline;
    cursor: pointer;
    display: none;
    color: #FF0000;
}

.cpg_message_info, .cpg_message_success, .cpg_message_warning, .cpg_message_error, .cpg_message_validation {
    border: 1px solid;
    margin: 10px 0px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.cpg_message_info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('../../images/message/info.png');
}

.cpg_message_success {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image: url('../../images/message/ok.png');
}

.cpg_message_warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('../../images/message/warning.png');
}

.cpg_message_error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('../../images/message/stop.png');
}

.cpg_message_validation {
    color: #D63301;
    background-color: #FFCCBA;
    background-image: url('../../images/message/error.png');
}

#GB_window {
    background-color: #EFEFEF;
    border: 5px solid #0E72A4;
}

.external {
    background: transparent url('../../images/link.gif') 100% 50% no-repeat;
    padding-right: 10px;
}

.detail_head_collapsed, .detail_head_expanded {
    color: #0033CC;
}

/* Styles for the standard dropdown menus. */
.navbar {
background-color: #ffdd00;
background-image: url("images/bg_navbar.gif");
padding: 0px 0px;
margin:0px 10px 0px 10px;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
margin: 0 -10px;
}


span.corners-top {
background-image: url("images/corners_left.png");
}

span.corners-top span {
background-image: url("images/corners_right.png");
}

span.corners-bottom {
background-image: url("images/corners_left.png");
}

span.corners-bottom span {
background-image: url("images/corners_right.png");
}

div.headerbar span.corners-top {
    background-image: url("images/corners_left2.png");
}

div.headerbar span.corners-top span {
    background-image: url("images/corners_right2.png");
}


span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
font-size: 1px;
line-height: 1px;
display: block;
height: 5px;
background-repeat: no-repeat;
}

span.corners-top {
background-image: none;
background-position: 0 0;
margin: 0 -5px;
}

span.corners-top span {
background-image: none;
background-position: 100% 0;
}

span.corners-bottom {
background-image: none;
background-position: 0 100%;
margin: 0 -5px;
clear: both;
}

span.corners-bottom span {
background-image: none;
background-position: 100% 100%;
}

.headbg span.corners-bottom {
margin-bottom: -1px;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
margin: 0 -10px;
}

.rules span.corners-top {
margin: 0 -10px 5px -10px;
}

.rules span.corners-bottom {
margin: 5px -10px 0 -10px;
}

main_menu {
padding: 0 0 0 0.5em;
    float: left;
    margin: 0;
    width: 98%;
}

.dropmenu, .dropmenu ul {
    list-style: none;
    line-height: 1em;
    padding: 0;
    margin: 0;
}

.dropmenu {
    padding: 0 0.5em;
}

.dropmenu a {
    display: block;
    color: #d00000;
    text-decoration: bold;
}

.dropmenu a span {
    display: block;
    padding: 0 0 0 5px;
    font-size: 11px;
}

/* the backgrounds first level only*/
.dropmenu li a.firstlevel {
    margin-right: 8px;
}

.dropmenu li a.firstlevel span.firstlevel {
    display: block;
    position: relative;
    left: -5px;
    padding-left: 5px;
    height: 22px;
    line-height: 19px;
}

.dropmenu li {
    float: left;
    position: relative;
    padding: 0;
    margin: 0;
}

.dropmenu li ul {
    z-index: 90;
    display: none;
    position: absolute;
    width: 19.2em;
    font-weight: normal;
    border-top: solid 1px #d00000;
    border-bottom: solid 1px #d00000;
    border-left: solid 1px #d00000;
    border-right: solid 1px #d00000;
    background: #ffdd00;
    padding: 5px 0 0 0;
}

.dropmenu li li {
    width: 19em;
    margin: 0;
    border-left: solid 1px #d00000;
    border-right: solid 1px #d00000;
}

.dropmenu li li a span {
    display: block;
    padding: 8px;
}

.dropmenu li ul ul {
    margin: -1.8em 0 0 13em;
}

/* the active button */
.dropmenu li a.active {
    background: #ffdd00 no-repeat 100% 0;
    color: #d00000;
    font-weight: bold;
}

.dropmenu li a.active span.firstlevel {
    background: #ffff00 no-repeat 0 0;
}

/* the hover effects */
.dropmenu li a.firstlevel:hover {
    background: #ffff00 no-repeat 100% -30px;
    color: #d00000;
    cursor: pointer;
    text-decoration: none;
}

.dropmenu li a.firstlevel:hover span.firstlevel {
    background: #ffff00 no-repeat 0 -30px;
}

/* the hover effects on level2 and 3*/
.dropmenu li li a:hover {
    background: #ffff00;
    color: #ff0000;
    text-decoration: bold;
}

.dropmenu li:hover ul ul, .dropmenu li:hover ul ul ul {
    top: -999em;
}

.dropmenu li li:hover ul {
    top: auto;
}

.dropmenu li:hover ul {
    display: block;
}

.dropmenu li li.additional_items {
    background-color: #ffdd00;
}

/* Styles for the standard button lists.
------------------------------------------------------- */

.buttonlist ul li a {
    display: block;
    font-size: 0.8em;
    color: #ffdd00;
    background: url(images/menu_gfx.png) no-repeat 0 -30px;
    padding: 0;
    margin-left: 12px;
    margin-right: 0px;
    cursor: pointer;
}

.buttonlist ul li a:hover {
    background: url(images/menu_gfx.png) no-repeat 0 0;
    color: #ffff00;
    text-decoration: none;
}

.buttonlist ul li a span {
    background: url(images/menu_gfx.png) no-repeat 100% -30px;
    display: block;
    height: 24px;
    line-height: 20px;
    padding: 0 8px 0 0;
    position: relative;
    right: -8px;
}

.buttonlist ul li a:hover span {
    background: url(images/menu_gfx.png) no-repeat 100% 0;
}

/* the active one */
.buttonlist ul li a.active {
    background: url(images/menu_gfx.png) no-repeat 0 -60px;
    color: d00000;
    font-weight: bold;
}

.buttonlist ul li a.active span {
    background: url(images/menu_gfx.png) no-repeat 100% -60px;
}

.buttonlist ul li a.active {
    font-weight: bold;
}

.buttonlist ul li a.active:hover {
    color: #ddf;
}

.align_top ul li a, .align_bottom ul li a {
    margin: 0 12px 0 0;
}

.rounded_menu {
    display: block;
    font-size: 0.8em;
    color: #ffdd00;
    background: url(images/menu_gfx.png) no-repeat 0 -30px;
    padding: 0;
    cursor: pointer;
}

.rounded_menu span {
    background: url(images/menu_gfx.png) no-repeat 100% -30px;
    display: block;
    height: 24px;
    line-height: 20px;
    padding: 0 8px 0 0;
    position: relative;
    right: -8px;
}

a:hover.rounded_menu  {
    background: url(images/menu_gfx.png) no-repeat 0 0;
    color: #fff;
    text-decoration: none;
}

a:hover.rounded_menu span {
    background: url(images/menu_gfx.png) no-repeat 100% 0;
}

.admin_menu_anim {
    background-image : url(images/button_bg_anim.gif);
}

Thanks in advance for any assistance.

Martin
Logged

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: Customising my new theme - Pt1
« Reply #1 on: December 09, 2010, 10:54:44 pm »

Firstly, why when hovering over Home in the overhead menu, does it try to invoke a drop-down menu when there are no child menu items hanging off "Home"?

I should just point out that this is perculiar to logged out / unregistered users only. Once logged in, there are drop-down menu items and it does make more sense.

Thanks

Martin
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Customising my new theme - Pt1
« Reply #2 on: December 10, 2010, 12:16:30 pm »

Firstly, why when hovering over Home in the overhead menu, does it try to invoke a drop-down menu when there are no child menu items hanging off "Home"?
Has been fixed in cpg1.5.10.


Secondly, and this is the main part of this post, what controls the text decoration of the menu items?
http://documentation.coppermine-gallery.net/en/dev_tools.htm#dev_tools_web_development - I recommend Firebug to find out such things.


Please respect our board rules such as:
- Use a meaningfull subject line
- One Question per Thread
Logged

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: Customising my new theme - Font style in Menu
« Reply #3 on: December 10, 2010, 09:00:27 pm »

Has been fixed in cpg1.5.10.
Thanks, that's good news. I look forward to upgrading once my style/theme is finished
http://documentation.coppermine-gallery.net/en/dev_tools.htm#dev_tools_web_development - I recommend Firebug to find out such things.
I've got some of those diagnostic tools installed. In addition I've also got X-Ray and Inspect Element installed too. They tell me that the CSS styles that control the menu are "dropmenu" and "firstlevel". I have just gone through all instances of these classes, and where text-decoration or font-weight is mentioned, I've added "strong", but to no effect.

STYLE.CSS (relevant parts)
Code: [Select]


.topmenu {
    line-height : 130%;
    font-size: 100%;
}

.topmenu a {
    color : #d00000;
    text-decoration : strong;
}

.topmenu a:hover  {
    color : #ff0000;
    text-decoration : strong;
}
/* Styles for the standard dropdown menus. */
.navbar {
background-color: #ffdd00;
background-image: url("images/bg_navbar.gif");
padding: 0px 0px;
margin:0px 10px 0px 10px;
text-decoration: bold;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
margin: 0 -10px;
}


span.corners-top {
background-image: url("images/corners_left.png");
}

span.corners-top span {
background-image: url("images/corners_right.png");
}

span.corners-bottom {
background-image: url("images/corners_left.png");
}

span.corners-bottom span {
background-image: url("images/corners_right.png");
}

div.headerbar span.corners-top {
    background-image: url("images/corners_left2.png");
}

div.headerbar span.corners-top span {
    background-image: url("images/corners_right2.png");
}


span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
font-size: 1px;
line-height: 1px;
display: block;
height: 5px;
background-repeat: no-repeat;
}

span.corners-top {
background-image: none;
background-position: 0 0;
margin: 0 -5px;
}

span.corners-top span {
background-image: none;
background-position: 100% 0;
}

span.corners-bottom {
background-image: none;
background-position: 0 100%;
margin: 0 -5px;
clear: both;
}

span.corners-bottom span {
background-image: none;
background-position: 100% 100%;
}

.headbg span.corners-bottom {
margin-bottom: -1px;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
margin: 0 -10px;
}

.rules span.corners-top {
margin: 0 -10px 5px -10px;
}

.rules span.corners-bottom {
margin: 5px -10px 0 -10px;
}

main_menu {
padding: 0 0 0 0.5em;
    float: left;
    margin: 0;
    width: 98%;
}

.dropmenu, .dropmenu ul {
    list-style: none;
    line-height: 1em;
    padding: 0;
    margin: 0;
}

.dropmenu {
    padding: 0 0.5em;
}

.dropmenu a {
    display: block;
    color: #d00000;
    text-decoration: strong;
}

.dropmenu a span {
    display: block;
    padding: 0 0 0 5px;
    font-size: 11px;
    text-decoration: strong;
}

/* the backgrounds first level only*/
.dropmenu li a.firstlevel {
    margin-right: 8px;
}

.dropmenu li a.firstlevel span.firstlevel {
    display: block;
    position: relative;
    left: -5px;
    padding-left: 5px;
    height: 22px;
    line-height: 19px;
}

.dropmenu li {
    float: left;
    position: relative;
    padding: 0;
    margin: 0;
}

.dropmenu li ul {
    z-index: 90;
    display: none;
    position: absolute;
    width: 19.2em;
    font-weight: strong;
    border-top: solid 1px #d00000;
    border-bottom: solid 1px #d00000;
    border-left: solid 1px #d00000;
    border-right: solid 1px #d00000;
    background: #ffdd00;
    padding: 5px 0 0 0;
}

.dropmenu li li {
    width: 19em;
    margin: 0;
    border-left: solid 1px #d00000;
    border-right: solid 1px #d00000;
}

.dropmenu li li a span {
    display: block;
    padding: 8px;
}

.dropmenu li ul ul {
    margin: -1.8em 0 0 13em;
}

/* the active button */
.dropmenu li a.active {
    background: #ffdd00 no-repeat 100% 0;
    color: #d00000;
    font-weight: strong;
}

.dropmenu li a.active span.firstlevel {
    background: #ffff00 no-repeat 0 0;
}

/* the hover effects */
.dropmenu li a.firstlevel:hover {
    background: #ffff00 no-repeat 100% -30px;
    color: #d00000;
    cursor: pointer;
    text-decoration: strong;
}

.dropmenu li a.firstlevel:hover span.firstlevel {
    background: #ffff00 no-repeat 0 -30px;
}

/* the hover effects on level2 and 3*/
.dropmenu li li a:hover {
    background: #ffff00;
    color: #ff0000;
    text-decoration: strong;
}

.dropmenu li:hover ul ul, .dropmenu li:hover ul ul ul {
    top: -999em;
}

.dropmenu li li:hover ul {
    top: auto;
}

.dropmenu li:hover ul {
    display: block;
}

.dropmenu li li.additional_items {
    background-color: #ffdd00;
}

I would appreciate a little help with this please, as I'm stumped by why the links in the menu are underlined (I don't see why) and why none of the menu links are bold.

Thanks

Martin
Logged

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: Customising my new theme - Pt1
« Reply #4 on: December 19, 2010, 11:25:25 pm »

Well I've been through it again and I'm still stuck.

All the tools that I have point to the "firstlevel" element in style.css being what controls the appearance of the overhead menu. I've added font-weight and text-decoration attributes (see below) all over the place where I thought that it may make a difference...and it hasn't.

Code: [Select]
.dropmenu li a.firstlevel {
    margin-right: 8px;
    text-decoration: bold;
    font-weight: strong;   
}

.dropmenu li a.firstlevel span.firstlevel {
    display: block;
    position: relative;
    left: -5px;
    padding-left: 5px;
    height: 22px;
    line-height: 19px;
    text-decoration: bold;
    font-weight: strong;
}

.dropmenu li a.active span.firstlevel {
    background: #ffff00 no-repeat 0 0;
    text-decoration: bold;
    font-weight: strong;
}

/* the hover effects */
.dropmenu li a.firstlevel:hover {
    background: #ffff00 no-repeat 100% -30px;
    color: #d00000;
    cursor: pointer;
    text-decoration: bold;
    font-weight: strong;
}

.dropmenu li a.firstlevel:hover span.firstlevel {
    background: #ffff00 no-repeat 0 -30px;
    text-decoration: bold;
    font-weight: strong;
}

I'd be happy to hear from anyone who knows what is blocking this menu from getting bold text, and how to get around the block. My style is based on the Curve style, so I would expect that there may be some others who would appreciate knowing how to do this little edit.

Thanks in advance.

Martin
Logged

Jeff Bailey

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: us
  • Offline Offline
  • Gender: Male
  • Posts: 1322
  • Fishing relaxes me.
    • Bailey Family Co.
Re: Customising my new theme - Pt1
« Reply #5 on: December 20, 2010, 05:54:22 am »

try
Code: [Select]
.dropmenu li a.firstlevel {
font-weight: bold;
}

what you have
Code: [Select]
.dropmenu li a.firstlevel {
    margin-right: 8px;
    text-decoration: bold;
    font-weight: strong;   
}
is not the correct css attributes
strong is an html tag like
Code: [Select]
<strong>home</strong>text-decoration is for things like underlines

This is a helpful site for css if your willing to learn it
http://www.w3schools.com/css/default.asp
Logged
Thinking is the hardest work there is, which is probably the reason why so few engage in it. - Henry Ford

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: Customising my new theme - Pt1
« Reply #6 on: December 20, 2010, 08:31:42 am »

Thanks for your help again Jeff. I've made it my aim to get to grips with CSS much more once that this project is over and I've got some "learning time" rather than "doing time" that my diary is full of at the moment. I'll have a look at that link for sure.

And yes, that advice has certainly cured the problem. I can now go to work on a Monday morning through thick snow in a much better mood for that. Merry Christmas to you!

Cheers

Martin
Logged

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: Customising my new theme - Pt1
« Reply #7 on: December 20, 2010, 08:34:52 am »

Hi Jeff

Sorry, forgot to ask, do you have any ideas on how this problem may be solved?

http://forum.coppermine-gallery.net/index.php/topic,68714.0.html

Thanks again

Martin
Logged

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: Customising my new theme - Pt1
« Reply #8 on: January 03, 2011, 09:45:06 am »

Has been fixed in cpg1.5.10.

It looks like it's back in cpg 1.5.12 - I've just upgraded here - www.brummiesfans.com/photos  and when logged out, the menu problem is still there for logged-out users. See attachment.
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Customising my new theme - Pt1
« Reply #9 on: January 03, 2011, 10:01:41 am »

You have to upgrade your custom theme, too. It works as expected with the curve theme.
Logged

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: Customising my new theme - Pt1
« Reply #10 on: January 03, 2011, 11:08:20 am »

Thanks for that, theme.php file updated and yes the menu works fine now.  ;D
Logged
Pages: [1]   Go Up
 

Page created in 0.026 seconds with 19 queries.