Shoutbox Post button color

Author Comment
User avatar

Posts: 687

#widgets_chatbox td {
font-size: medium;
color: #007a79;
font-family: Verdana, Arial, Helvetica Times New Roman;
padding: 5px;
background: #30444D;
}

.chatbox-holder {
padding: 20px;
border: 2px ridge black;
background: url(http://static.yuku.com/domainskins/bypa ... uegrbg.jpg);
margin: 10px auto;
text-align: center;
}

#widgets_chatbox #wrapper {
margin: auto;
background: #30444D;
}

.signature .tool-box h1 {
font-size: 20px;
font-weight: bold;
}

.stats-box { color: #ADD8E6; }

.topic-titles {
font-size: 14pt;
font-weight: bold;
}

.switch span { font-weight: bold; }

.switch { margin-bottom: 10px; }

#chatbox_form a:link {
color: #30444D;
border: 2px solid #30444D;
font-family: Verdana, Arial, Helvetica Times New Roman;
padding: 2px 4px;
text-decoration: none;
background: #ADD8E6;
}

#chatbox_form a:visited {
color: #30444D;
border: 2px solid #30444D;
font-family: Verdana, Arial, Helvetica Times New Roman;
padding: 2px 4px;
text-decoration: none;
background: #ADD8E6;
}


Not sure if I have all the shoutbox code here but this is the default Alternate skins and I want the *POST* Button background to be Black. it is currently a blue color with an orange text

User avatar

Admin

Posts: 11073

Oh heck!

This post contains the answer to your first question!

#chatbox_form a:link {
color: #30444D;
border: 2px solid #30444D;
font-family: Verdana, Arial, Helvetica Times New Roman;
padding: 2px 4px;
text-decoration: none;
background: #ADD8E6;
}

#chatbox_form a:visited {
color: #30444D;
border: 2px solid #30444D;
font-family: Verdana, Arial, Helvetica Times New Roman;
padding: 2px 4px;
text-decoration: none;
background: #ADD8E6;
}


^That is for your smilies "button".

I'll have to guess for the "post" button. Give this a try:

#chatbox_form input.button {
background: #000;
color: #fef;
}


Just change the color to suit.

User avatar

Posts: 687

Got It! Thanks You are appreciated! :)

User avatar

Admin

Posts: 11073

You're welcome. :)

I'll be round later for the choccys. ;)

User avatar

Posts: 687

Image

User avatar

Posts: 687

Is it possible to make the POST button Oval instead of rectangular?
It is oval in the Default directory Hummingbird skin
http://shugagransshack.yuku.com/directory#.UhJoZz_lfms

User avatar

Admin

Posts: 11073

My difficulty is that I cannot see it.

In your default skin, you have:
.chatbox-holder input.button {
   color: #fef;
   font-weight: bold;
   border: 2px outset #D4A017;
   border-radius: 15px;
   padding: 2px 5px;
   font-size: 1.4em;
 background: color: #000;
}


which should produce a rounded button.

When I go to your Global CSS, I find:
.chatbox-holder input.button {
   color: #D4A017;
   font-weight: bold;
   border: 2px outset #D4A017;
   border-radius: 15px;
   padding: 2px 5px;
   background:  #000;
}


So, by rights all buttons should be rounded (unless you are using IE in Compatibility Mode).

If I go to Blue-Grey, I find:
input.button {
   color: #30444D;
   border: 2px solid #30444D;
}

then:
#chatbox_form input.button {
background: #000;
color: #fef;
}

then:
#chatbox_form input.button {
background: #000
color: #fef;
}

then:
#chatbox_form input.button {


Nothing there says the button should not be rounded unless the Global CSS is not being seen by the shoutbox. Nothing suggests that it isn't.

However, you do have a broken last line and who knows what a browser may make of that? It may work if you just delete that. You should also delete the duplicate:
#chatbox_form input.button {
background: #000
color: #fef;
}


If that still does not make it rounded and you are not using IE in compatibility mode, try adding a border-radius to the remaining:
#chatbox_form input.button {
background: #000
color: #fef;
}

so it becomes:
#chatbox_form input.button {
background: #000
color: #fef;
border-radius: 15px;
}

User avatar

Posts: 687

you can get into the admin?
I am afraid to touch it cause it is finally working
in the blue alt Default skin
I am using FF

User avatar

Posts: 687

LOL button went oval but now is not black..

User avatar

Posts: 687

YAY!! Love the oval button Thanks Andrew! The button background is the same color as the other buttons... I would like back but Blue is ok. I am not fooling with it anymore

User avatar

Posts: 687

I Copied ALL pertaining to Chatbox.. in Blue Skin


#widgets_chatbox td {
font-size: medium;
color: #007a79;
font-family: Verdana, Arial, Helvetica Times New Roman;
padding: 5px;
background: black;
}

.chatbox-holder {
padding: 20px;
border: 2px ridge black;
background: url(http://static.yuku.com/domainskins/bypa ... uegrbg.jpg);
margin: 10px auto;
text-align: center;
}

#widgets_chatbox #wrapper {
margin: auto;
background: black;
}

.signature .tool-box h1 {
font-size: 20px;
font-weight: bold;
}

.stats-box { color: #ADD8E6; }

.topic-titles {
font-size: 14pt;
font-weight: bold;
}

.switch span { font-weight: bold; }

.switch { margin-bottom: 10px; }

#chatbox_form a:link {
color: #30444D;
border: 2px solid #30444D;
font-family: Verdana, Arial, Helvetica Times New Roman;
padding: 2px 4px;
text-decoration: none;
background: #ADD8E6;
}

#chatbox_form a:visited {
color: #30444D;
border: 2px solid #30444D;
font-family: Verdana, Arial, Helvetica Times New Roman;
padding: 2px 4px;
text-decoration: none;
background: #ADD8E6;
}
#widgets_chatbox img {
width: auto;
height: 100%;
max-width: 250px;
max-height: 135px;
}

#chatbox_form input.button {
background: #000
color: #fef;
border-radius: 15px;
}

#widgets_chatbox img {
width: auto;
height: 100%;
max-width: 250px;
max-height: 135px;
}

#chatbox_form input.button {
background: #000
color: #fef;
border-radius: 15px;
}

User avatar

Posts: 687

I shall delete the 2 duplicate last 2 entries on the previous list

User avatar

Admin

Posts: 11073

Look at this one (in Blue-Grey)
input.button {
   color: #30444D;
   border: 2px solid #30444D;
}

Just reading the Hex Code says "dark blue-grey" to me.

Because a skin's CSS is read after Global CSS, the latter (Skin's) takes preference. It's a bit like if I put 5 coats of paint on something, the only color that is seen is the last one.

First, let's try moving:
#chatbox_form input.button {
background: #000;
color: #fef;
}

to the very end of your CSS.

If that changes the color, great! If not, let's try and change things until it does...

#chatbox_form input.button could be changed to .chatbox-holder input.button, like this:

.chatbox-holder input.button {
background: #000;
color: #fef;
}


(Remember, this is the blue-grey skin and now placed at the very end of the CSS.)

If that still does not work, we need to add more and more to the selector (the bit we changed) until it does. By rights, that should be sufficient though ... If that still does not produce your black button, then I will check your full CSS for breakages before we go any further.

It's doable! ;)

User avatar

Posts: 687

Ot went back to a rectangele button No longer oval
Thanks for assuring me it is doable :)
Here is the complete CSS in Blue skin. Not sure if this code was to stay in> border-radius: 15px;
----------------------------------------------------
body {
font-family: Verdana, Arial, Helvetica Times New Roman;
font-size: 12px;
color: #2F4F4F;
background: url(http://static.yuku.com/domainskins/bypa ... uegrbg.jpg);
}

#wrapper {
width: 90%;
margin: 10px auto;
border: 1px solid #30444D;
padding: 10px;
background: #678FA9;
}

.mgr-navigation-sliver {
color: #2F4F4F;
background: #FFFFF0;
}

.mgr-navigation-sliver a:link,
.mgr-navigation-sliver a:visited { color: #2F4F4F; }

table {
border: 1px solid #4B5D61;
background: #788284;
}

th {
border: 1px solid #4B5D61;
color: #2F4F4F;
font-family: Verdana, Arial, Helvetica Times New Roman;
font-size: 0.9em;
font-weight: bold;
background: #ADD8E6;
}

td {
border: 1px solid #4B5D61;
background: #FFFFFF;
}

th a:link { color: #2F4F4F; }

a,
a:link,
a:visited,
a:hover,
a:active { color: #2F4F4F; }

.boxheading {
text-align: center;
color: #2F4F4F;
font-family: Verdana, Arial, Helvetica Times New Roman;
padding: 2px 5px;
background: #ADD8E6;
}

.boxheading a:link { color: #2F4F4F; }

.boxbody {
color: #2F4F4F;
font-family: Verdana, Arial, Helvetica Times New Roman;
padding: 4px;
}

.box {
border: 1px solid #30444D;
margin-bottom: 10px;
background: #788284;
}

.onionskin1 {
border: 2px dotted #fff;
background: #BAEBF7;
}

.category-box th {
color: #2F4F4F;
background: #ADD8E6;
}

.forum-box th { background: #ADD8E6; }

.discussion-box th { background: #ADD8E6; }

.discussion-box .th { background: #ADD8E6; }

.category-box td { color: #2F4F4F; }

.discussion-box td { color: #2F4F4F; }

.discussion-box .odd td { color: #2F4F4F; }

.discussion-box .even td { color: #2F4F4F; }

.forum-box td {
color: #2F4F4F;
background: #BAEBF7;
}

.tool-box .boxheading { background: transparent; }

.bread-crumbs { color: #2F4F4F; }

.bread-crumbs a:link { color: #2F4F4F; }

.bread-crumbs a:visited { color: #2F4F4F; }

.discussion-box td { color: #2F4F4F; }

.discussion-box .odd td { color: #2F4F4F; }

.discussion-box .even td { color: #2F4F4F; }

blockquote {
border: 4px dotted #ADD8E6;
width: 80%;
padding: 5px;
font-size: 12pt;
background: #FFFFF0;
}

textarea {
border: 4px dotted #ADD8E6;
background: #FFFFF0;
}

.button {
color: #30444D;
border: 2px solid #30444D;
font-family: Verdana, Arial, Helvetica Times New Roman;
font-size: 1.2em;
font-weight: bold;
padding: 2px 5px;
text-decoration: none;
background: #ADD8E6;
}

input.text {
color: #30444D;
border: 2px solid #30444D;
}

input.button {
color: #30444D;
border: 2px solid #30444D;
}

.dropdown a:link,
.dropdown a:visited,
.dropdown input { color: #30444D; }

.dropdown li {
color: #53411A;
background: #ADD8E6;
margin: 0px;
border-width: 0px;
line-height: 1.5em;
font-weight: bold;
text-align: left;
}

div.current { border: 1px solid #A8BAB8; }

.views { display: none; }

.pager a:link,
.pager a:visited { text-decoration: none; }

.th { font-size: 16px; }

h4.description { font-size: 0.9em; }

.author {
width: 100px;
padding: 0px;
}

.kudos {
width: 50px;
padding: 0px;
}

h1 {
font-family: Verdana, Arial, Helvetica Times New Roman;
font-size: 1.5em;
}

h2,
h3 {
font-family: Verdana, Arial, Helvetica Times New Roman;
font-size: 1.333em;
}

.signature {
border: 0px;
max-height: 150px;
height: expression( this.offsetHeight > 150 ? "150px" : "hidden" );
overflow: hidden;
}

.boxheading .bread-crumbs { font-weight: bold; }

#directory_default td.latest.lastcol { font-size: 0.9em; }

td.author {
font-size: 0.9em;
text-align: center;
}

td.replies { font-size: 0.9em; }

td.views { font-size: 0.9em; }

td.kudos { font-size: 0.9em; }

td.latest { font-size: 0.9em; }

td.posts { font-size: 0.9em; }

td.topics { font-size: 0.9em; }

.forumtitle h4 {
font-family: Verdana, Arial, Helvetica Times New Roman;
font-size: 1.2em;
}

.mgr-navigation-sliver * { color: #FFF; }

.mgr-navigation-sliver a { color: #FFF; }

.boxheading a:visited { color: #30444D; }

a:link.button,
a:visited.button { color: #30444D; }

.dropdown span {
padding-right: 12px;
padding-top: 2px;
padding-bottom: 2px;
background: url(http://static.yuku.com/common/bypass/im ... -white.gif) no-repeat right center;
}

.dropdown li a {
text-decoration: none;
color: #53411A;
}

.dropdown li a:visited {
text-decoration: none;
color: #53411A;
}

.dropdown li * {
text-decoration: none;
color: #53411A;
}

.dropdown li:hover { color: #AC9674; }

.dropdown li a:hover { color: #AC9674; }

.pager div { padding: 2px; }

.current { border: 1px solid #A8BAB8; }

.control-box,
.jump-box,
.legend-box {
border: none;
background: transparent;
}

.legend-box .boxheading { display: none; }

hr {
border: none;
color: #53411A;
height: 1px;
background: #53411A;
}

th a:visited { color: #53411A; }

.whosonline-box .visitors {
padding: 5px;
background: #ADD8E6;
}

.whosonline-box .boxbody { padding: 0px; }

.whosonline-box .users-online { padding: 5px; }

.replies {
width: 50px;
padding: 0px;
}

.tool-box,
.tool-box .boxbody { background: transparent; }

#widgets_chatbox td {
font-size: medium;
color: #007a79;
font-family: Verdana, Arial, Helvetica Times New Roman;
padding: 5px;
background: black;
}

.chatbox-holder {
padding: 20px;
border: 2px ridge black;
background: url(http://static.yuku.com/domainskins/bypa ... uegrbg.jpg);
margin: 10px auto;
text-align: center;
}

#widgets_chatbox #wrapper {
margin: auto;
background: black;
}

.signature .tool-box h1 {
font-size: 20px;
font-weight: bold;
}

.stats-box { color: #ADD8E6; }

.topic-titles {
font-size: 14pt;
font-weight: bold;
}

.switch span { font-weight: bold; }

.switch { margin-bottom: 10px; }

#chatbox_form a:link {
color: #30444D;
border: 2px solid #30444D;
font-family: Verdana, Arial, Helvetica Times New Roman;
padding: 2px 4px;
text-decoration: none;
background: #ADD8E6;
}

#chatbox_form a:visited {
color: #30444D;
border: 2px solid #30444D;
font-family: Verdana, Arial, Helvetica Times New Roman;
padding: 2px 4px;
text-decoration: none;
background: #ADD8E6;
}


li.Moderator a {
color: #0000ff;
font-weight: bold;
}

li.Moderator a:visited {
color: #0000ff;
font-weight: bold;
}

li.Administrator a {
color: #0000ff;
font-weight: bold;
}

li.Administrator a:visited {
color: #0000ff;
font-weight: bold;
}

li.Owner a {
color: #0000ff;
font-weight: bold;
}

li.Owner a:visited {
color: #0000ff;
font-weight: bold;
}

li.Member a { font-weight: bold; }

li.Member a:visited { font-weight: bold; }

blockquote { font-size: 1em; }

.extra-content .reply-box { display: none; }

.admin-edit { display: none; }

.reply-tools a.reply { display: none; }

.reply-box textarea {
border: 4px dotted #ADD8E6;
font-weight: bold;
}

.featured a {
font-size: 1em;
font-weight: bold;
}

.discussion-box .lead td.toggle {
height: 60px;
padding-right: 60px;
background-image: url("http://i304.photobucket.com/albums/nn177/Gran101/LEADPost.gif");
background-repeat: no-repeat;
background-position: 90% 5px;
}

.discussion-box .lead td { background-color: #FFFFF0; }

body .suckerfish-holder li {
width: auto;
padding: 0px 2px;
text-align: center;
text-decoration: none;
}

body .suckerfish-holder li li {
width: 160px;
text-align: left;
}

body .suckerfish-holder li a {
text-decoration: none;
border: 2px solid #30444D;
white-space: nowrap;
padding: 0px 5px;
height: 1.5em;
line-height: 1.5em;
width: auto;
background: #ADD8E6;
font-size: 1.3em;
}

body .suckerfish-holder li a:visited { text-decoration: none; }

body .suckerfish-holder li a:hover { background: #FFF; }

body .suckerfish-holder li li a { margin-top: -1px; }

body,
a,
a:hover { cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur117.cur), progress; }


.greeting { text-align: center; }

.wysiwyg-editor {
font-family: Verdana, Arial, Helvetica Times New Roman;
font-size: 16pt;
color: #024953;
}

.forum-announcement { font-size: 1.2em; }

marquee a:link,
marquee a:visited { color: rgb(255, 188, 97); }

.addthis_toolbox { display: none; }

div.current { color: black; }

.visitors li:nth-child(6) { display: none;}

.Gran-shugagransshack .post-body,
.granny1-qotddatabase .post-body,
.DocShock-shugagransshack .post-body {
background-image: url(http://i304.photobucket.com/albums/nn17 ... SStaff.jpg);
background-repeat: no-repeat;
background-position: right top;
padding-top: 40px;
}

.forum11473 .control-box { display: none; }

.forum11473 .forum-box { display: none; }

.forum11473 .forum-box .boxheading { display: none; }

.forum11473.forum-box.sub { display: block; }

#chatbox.chatbox-holder input.button {
background: #000
color: #fef;
border-radius: 15px;
}

User avatar

Posts: 687

This is what is in Global CSS
---------------------------
.admin-edit { display: none; }

.reply-box { display: none; }


.reply-tools a.reply { display: none; }

.avatar-block .user-avatar img { max-width: 85px; }

views { display: none; }

div#backto {
position: fixed;
bottom: 25px;
right: 5px;
width: 100px;
text-align: right;
}

div#tobottom {
position: fixed;
top: 44px;
right: 5px;
width: 100px;
text-align: right;
}


div.custom-box.extra-content {
border: 0px;
background: transparent;
}

*:first-child+html .custom-box.extra-content .custom-dropdown ul { margin-top: 30px; }

.custom-box.extra-content table {
border: 0;
background: transparent;
width: auto;
}

.custom-box.extra-content td {
border: 0;
background: transparent;
}

div.tool-box .invite-contribute-links { display: none; }

.featured a,
.tags-box a { font-size: 1em; }

a.quote { display: none; }

.user-owner a.quote,
.user-admin a.quote,
.user-moderator a.quote { display: block; }

textarea,
body .discussion-box .post-body,
.wysiwyg-editor {
font-family: Verdana, Arial, Helvetica Times New Roman;
font-size: 16pt;
color: #024953;
}

.chatbox-holder {
margin: 10px auto;
text-align: center;
border-radius: 20px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
}

.chatbox-holder p { direction: rtl; }

.chatbox-holder textarea {
direction: ltr;
border-radius: 5px;
opacity: 0.5;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
}

.chatbox-holder textarea:focus {
opacity: 1.0;
}



.chatbox-holder textarea { font-size: large; }

#widgets_chatbox img {
width: auto;
height: 100%;
max-width: 275px;
max-height: 225px;
}

#widgets_chatbox a {
display: inline-block;
height: 1.6em;
max-width: 200px;
overflow: hidden;
position: relative;
top: 0.3em;
}

#widgets_chatbox a:hover { text-decoration: underline; }

/* change the status icons ---- */

/* first we kill all the existing images */
.mgr-navigation-sliver ul.action-items img { display: none }

/* inbox icon */
.mgr-navigation-sliver li.inbox-status a {
background: url(http://images.yuku.com/image/gif/72b263 ... 9fde9c.gif) no-repeat left center;
padding: 19px 0px 18px 50px;
position: relative;
}

/* friends icon */
.mgr-navigation-sliver li.friend-status a {
background: url(http://i744.photobucket.com/albums/xx89 ... thgang.gif) no-repeat left center;
padding: 11px 0px 11px 48px;
position: relative;
}

/* comments icon */
.mgr-navigation-sliver li.comment-status a {
background: url(http://i744.photobucket.com/albums/xx89 ... aper-1.gif) no-repeat left center;
padding: 11px 0px 10px 53px;
position: relative;
}

/* The navbar is only 30px high and our highest image is 37px. Let's stretch it a bit so it fits. 30+4+4=38 */
.mgr-navigation-sliver { padding: 4px; }

/* restyle hidden replies ---- */

#forum_viewtopic .hidden td,
#forum_setpost .hidden td { background-color: #FFC0CB; }

div.hidden-reply,
* html div.hidden-reply {
background: url(http://images.yuku.com/image/png/5e015e ... f1f20e.png) no-repeat;
padding-top:28px;
}

/* Grub Shack cleanup ---- */

.forum70 .sub .odd .latest,
.forum70 .sub .odd .kudos,
.forum70 .sub .odd .posts,
.forum70 .sub .odd .topics { text-indent: -9999px; }

.addthis_toolbox { display: none; }

div.scrolling div { clear: both; }

.ads { font-size: 10px; }

.ads a { color: #ccc; }

#widgets_chatbox center { overflow: hidden; }



#ie8 ul.topic-cloud li { display: inline-block; }

.visitors li:nth-child(6) { display: none;}

.Gran-shugagransshack .post-body,
.granny1-qotddatabase .post-body,
.DocShock-shugagransshack .post-body {
background-image: url(http://i304.photobucket.com/albums/nn17 ... SStaff.jpg);
background-repeat: no-repeat;
background-position: right top;
padding-top: 40px;
}

User avatar

Admin

Posts: 11073

#chatbox.chatbox-holder input.button {
background: #000
color: #fef;
border-radius: 15px;
}

should be:
.chatbox-holder input.button {
background: #000
color: #fef;
border-radius: 15px;
}

User avatar

Posts: 687

that worked to make it oval again but not black background

User avatar

Admin

Posts: 11073

Missing semicolon after the black. Sorry, I am very tired and missed that.

It should be:
.chatbox-holder input.button {
background: #000;
color: #fef;
border-radius: 15px;
}

Now we can sleep! :D

User avatar

Posts: 687

You are Still Amazing! You are always here for us!
It is now exactly as we want it!
Thank you once againImage

User avatar

Admin

Posts: 11073

You're welcome. :)

Thanks for the choccy's. :D

Display posts from previous:  Sort by  



Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group