Requesting Top Half Tab Graphic

[Former Member]

I am requesting graphic help.

These attachments are from my testing forum.

image one :navigation bar                     image two: boarder radius image     
Graphic request for navigation bar word-buttons.

Is it possible for the navigation bar's word-buttons to have a top half tab-like border around them?

[Tumbleweed]

Dec 15, 2014 8:27:26 GMT -8 @womenonly said:

I am requesting graphic help.

These attachments are from my testing forum.

image one :navigation bar                     image two: boarder radius image     
Graphic request for navigation bar word-buttons.

Is it possible for the navigation bar's word-buttons to have a top half tab-like border around them?

This might be able to be achieved with just css. I'm going to send you a pm with a link to my site (site now closed but don't want it to be construed as unfair advertising). I'm using tab like buttons (done using css) but I think you want yours flipped. Let me know if that is anything like what you are wanting.

[Former Member]

Tumbleweed:

Thank you for your reply.

I will send you PM.

[Tumbleweed]

Dec 17, 2014 4:32:31 GMT -8 @womenonly said:

Tumbleweed:

Thank you for your reply.

I will send you PM.

I'm a little confused by your pm because the link I gave you has the curve on the bottom and when you said you don't want them flipped but still are requesting the top half, well, confused. Lol Anyway, here on a test site I have the top half curved: (I just did the menu bar (home, help, search, etc) and left the (Welcome guest part with the curve on the bottom.

Test site:

putteraround.proboards.com/

Of course colors and how much of a curve and any styles you want added can be changed but is this more like what you want?

[Former Member]

Dec 18, 2014 8:38:58 GMT -8 Tumbleweed said:

Dec 17, 2014 4:32:31 GMT -8 @womenonly said:

Tumbleweed:

Thank you for your reply.

I will send you PM.

I'm a little confused by your pm because the link I gave you has the curve on the bottom and when you said you don't want them flipped but still are requesting the top half, well, confused. Lol Anyway, here on a test site I have the top half curved: (I just did the menu bar (home, help, search, etc) and left the (Welcome guest part with the curve on the bottom.

Test site:

putteraround.proboards.com/

Of course colors and how much of a curve and any styles you want added can be changed but is this more like what you want?

I apologize for the confusion I created.

I was trying to say that I wanted them to be standing up/facing up- not facing down/flipped.

I still want the slightly curved tab.

I like both of your graphics.

I hope I clarified my request.

I will be appreciative of all that you continue doing.

[Tumbleweed]

Dec 18, 2014 11:55:29 GMT -8 @womenonly said:

Dec 18, 2014 8:38:58 GMT -8 Tumbleweed said:

I'm a little confused by your pm because the link I gave you has the curve on the bottom and when you said you don't want them flipped but still are requesting the top half, well, confused. Lol Anyway, here on a test site I have the top half curved: (I just did the menu bar (home, help, search, etc) and left the (Welcome guest part with the curve on the bottom.

Test site:

putteraround.proboards.com/

Of course colors and how much of a curve and any styles you want added can be changed but is this more like what you want?

I apologize for the confusion I created.

I was trying to say that I wanted them to be standing up/facing up- not facing down/flipped.

I still want the slightly curved tab.

I like both of your graphics.

I hope I clarified my request.

I will be appreciative of all that you continue doing.

Those aren't graphics. That is just using css. If you want to fiddle with it put this at the bottom of your style sheet:

Admin> Themes> Advanced Styles & CSS> Style Sheet>

/* Menu tabs */
#navigation-menu{background-color:transparent!important;background-image:none;margin-left:-8px;
}
#navigation-menu > ul li a{
height:26px!important;
font-size:90%;
background: #808080 url('http://images.proboards.com/v5/gradients/wave.png') left center repeat-x;
border: 0px solid #000000;
padding:0ox 8px 2px 6px;
margin-top:6px;
margin-right:4px;
-webkit-border-top-left-radius: 5px!important;
-webkit-border-top-right-radius: 5px!important;
-moz-border-radius-topright:5px!important;
-moz-border-radius-topleft:5px!important;
border-top-right-radius:5px;
border-top-left-radius:5px;
text-align:center;
color:#6d0707;
font-weight:bolder!important;
-webkit-box-shadow: 6px 2px 2px 0px #351606;
-moz-box-shadow: 6px 2px 2px 0px #351606;
box-shadow: 6px 2px 2px 0px #351606;
}
#navigation-menu div.tip-holder div.tip-number,.arrow_down{
background-color:#918c11!important;
}
#navigation-menu div.tip-holder span.tip{
 border-top: 4px solid #918c11;

}
#navigation-menu div.tip-holder span.tip{
border-top: 4px solid #918c11;
}
#welcome{width:300px; background: #808080 url('http://images.proboards.com/v5/gradients/wave.png') left center repeat-x;
border: 0px solid #000000;color:#918c11;
-webkit-border-top-left-radius: 5px!important;
-webkit-border-top-right-radius: 5px!important;
-moz-border-radius-topleft: 5px!important;
-moz-border-radius-topright: 5px!important;
border-top-right-radius:5px;
border-top-left-radius:5px;
padding-right:8px;
margin-right:-8px;
text-align:center;
color:#6d0707;
font-weight:bolder!important;
-webkit-box-shadow: 6px 2px 2px 0px #351606;
-moz-box-shadow: 6px 2px 2px 0px #351606;
box-shadow: 6px 2px 2px 0px #351606;
margin-top:6px;
}

I'm using a ProBoards background image on mine so if you just want a color remove the red: (make sure you leave the ; at the end of those lines)

background: #808080 url('http://images.proboards.com/v5/gradients/wave.png') left center repeat-x;

#welcome{width:300px; background: #808080 url('http://images.proboards.com/v5/gradients/wave.png') left center repeat-x;

If this is the route you want to go, rather than images, I'll move this thread out of graphic requests. Also, if you are confused about anything, just ask. I know there is a lot of css there so wouldn't be surprised if you get confused.

[Former Member]

I apologize for my tardy reply.

Thank you for all that you have done.

[Former Member]

Tumbleweed:

I just finished placing your code onto the bottom of my style sheet.

I do have a few questions.

Is it possible for the top of the tabs to be rounder?

Is it possible for there to be more space between all of the tabs?

Is it possible to a border design?

[Tumbleweed]

Dec 21, 2014 6:51:05 GMT -8 @womenonly said:

Tumbleweed:

I just finished placing your code onto the bottom of my style sheet.

I do have a few questions.

Is it possible for the top of the tabs to be rounder?

Is it possible for there to be more space between all of the tabs?

Is it possible to a border design?

1. To make the tabs rounder you'll need to change the 5px in the blue part to a larger number and I just noticed in the bolded part, I made a mistake and they should have been 5px too. Needless to say, the 5px and 6px need to be the same and just make them like 7px and see what that looks like. (There are so many to work in all the main browser)

-webkit-border-top-left-radius: 5px!important;
-webkit-border-top-right-radius: 5px!important;
-moz-border-radius-topright:5px!important;
-moz-border-radius-topleft:5px!important;
border-top-right-radius:5px;
border-top-left-radius:5px;
text-align:center;
color:#6d0707;
font-weight:bolder!important;
-webkit-box-shadow: 2px 2px 6px 0px #351606;
-moz-box-shadow: 2px 2px 6px 0px #351606;
box-shadow: 2px 2px 6px 0px #351606;

2. To put more space between them change the 4px to something larger:

margin-right:4px;

3. For a border design, it would have to be a css border like dashed or dotted. Is that what you mean? If so find this line:

border: 0px solid #000000;

And change it to this.  (or dashed or whatever you want)

border: 1px dashed #000000;

If you want it just on the top, it would be:

border-top: 1px dashed #000000;

Here are some other options beside solid, dashed and dotted:

CSS

www.w3schools.com/css/css_border.asp

CSS3:

www.w3schools.com/css/css3_borders.asp

[Hernandez]

Request Complete ?

[Former Member]

Tumbleweed:

Thank you for everything.