Customising my new theme - Pt2

[uk_martin]

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/

Where I would like some help please is in getting the menu bar to have the same rounded corners as in phpBB3. In phpBB3 the div classes are called "corners-top" and "corners-bottom". I've tried to copy the principle and also the CSS from phpBB3 has been copied over into style.css (probably even the lines that are not relevant) Needless to say that the relevant graphics files have also been copied across. (e.g. www.brummiesfans.com/coppermine/themes/brummies/images/corners_right.png)

Sadly, something has gone wrong and the theopry doesn't work in practise. If someone can suggest how the matter can be fixed then I'd be very grateful.

The relevant bits of the template.html and style.css file wordings follow, which hopefully will be of help.

TEMPLATE.HTML

Code Select Expand


<div id="header"></div>
           <div class="clearer"></div>
           
       </div>

<div class="navbar">
<span class="corners-top"><span></span></span>

           <div id="main_menu">
                   {SYS_MENU}
                   {SUB_MENU}
                   {ADMIN_MENU}
               <!-- Begin IE7 support --><img src="images/spacer.gif" class="menuheight" alt="" /><!-- End IE7 support -->
           <div class="clearer"></div>

<span class="corners-bottom"><span></span></span>
</div>            
           
           {MESSAGE_BLOCK}
       </div>



STYLE.CSS

Code Select Expand


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;
}

.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;
}

.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

[uk_martin]

Any help with the rounded corners issue please?

Thanks

Martin

[uk_martin]

Hi guys

Hope everyone has had a good Christmas. If there is any Christmas spirit to spare, I'd be grateful if this long outstanding rounded corners issue could be helped out on? I'd be most grateful for any help that anyone could offer.

Thanks

Martin

[uk_martin]

Oops sorry, forgot to add, that the desired outcome should be similar to the rounded corners on the attached image, which shows the menu in the phpBB site.

Thanks

Martin

[Jeff Bailey]

try

Code Select Expand

.navbar {
border-radius: 5px;
-moz-border-radius: 5px;
}
adjust to your liking.

That will work for up to date browsers. IE you have to find image based corners.

[uk_martin]

Thanks Jeff, that works a treat in Firefox.

I've got the images for IE, or at least the image files, but the code that works in phpBB (see first post) I can't get to work here. Any chance you can see what the problem is with it? There's something about that <span class="corners-top"><span></span></span> code that doesn't want to work here.

Thanks

Martin

[uk_martin]

OK, after some work on this and thanks to help given, I'm now very close to where I want to be with this.

In Safari, Chrome an Firefox, the corners are perfect - thanks Jeff!

In IE, the right-top and right-bottom are now in place. BUT the left-top and left-bottom are foxing me. I can't seem to get them to shift any further to the left than what you see here - www.brummiesfans.com/photos/

I've rationalised the CSS now to read:

Code Select Expand


.navbar {
background-color: #ffdd00;
background-image: url("images/bg_navbar.gif");
padding: 0px 0px 0px 17px;
margin:0px 10px 0px 10px;
border-radius: 5px;
-moz-border-radius: 5px;
}

.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 0px;
}


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

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

span.corners-bottom {
background-image: url("images/corners_left.png");
background-position: 0 100%;
margin: 0 -5px;
clear: both;
}

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


I can shift the to-left and bottom-left corner graphics to the right by altering the span.corners-top background-position, from  "0 0" to "anything positive 0"  (Likewise with span.corners-bottom) HOWEVER as soon as I introduce a negative value in there, thinking that the graphic will move to the left from where it currently is, it seems to move up rather than left. I don't know why.

If anyone can solve this puzzle and let me know how to get the two final corner pieces slotted into their right places I'd be very grateful

Thanks again

Martin

[uk_martin]

No worries, problem sorted out after much trial and error 

[Αndré]

Resolve your threads
If you have found an answer to your question, resolve your thread. Don't just post "I have found the answer", but tell others what you actually did to solve your issues. Posting a link to the page where you found the answer might help. Describing what you did might help as well.

[uk_martin]

Ahh, OK, well after playing around with all the span.corners-x,y & z and getting nowhere, what I discovered the setting was that needed adjusting was the Navbar padding value, so now I have:

Code Select Expand

.navbar {
background-color: #ffdd00;
background-image: url("images/bg_navbar.gif");
padding: 0px 0px 0px 10px;
margin:0px 10px 0px 10px;
border-radius: 5px;
-moz-border-radius: 5px;
}

One day when IE accepts the border-radius CSS, maybe we won't need this fix any more?