Login   Register

OurBoard Support » Yuku Help

 
advanced search

Print view
New Topic  Add Reply

Shoutbox Post button color

Author Comment
Gran
User avatar

Posts: 687
 Shoutbox Post button color
#1 
#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
andrew
User avatar

Admin

Posts: 11073
 Re: Shoutbox Post button color
#2 
Oh heck!

This post contains the answer to your first question!

Code: Select all
#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:

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


Just change the color to suit.
Gran
User avatar

Posts: 687
 Re: Shoutbox Post button color
#3 
Got It! Thanks You are appreciated! :)
andrew
User avatar

Admin

Posts: 11073
 Re: Shoutbox Post button color
#4 
You're welcome. :)

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

Posts: 687
 Re: Shoutbox Post button color
#5 
Image
Gran
User avatar

Posts: 687
 Re: Shoutbox Post button color
#6 
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
andrew
User avatar

Admin

Posts: 11073
 Re: Shoutbox Post button color
#7 
My difficulty is that I cannot see it.

In your default skin, you have:
Code: Select all
.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:
Code: Select all
.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:
Code: Select all
input.button {
   color: #30444D;
   border: 2px solid #30444D;
}

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

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

then:
Code: Select all
#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:
Code: Select all
#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:
Code: Select all
#chatbox_form input.button {
background: #000
color: #fef;
}

so it becomes:
Code: Select all
#chatbox_form input.button {
background: #000
color: #fef;
border-radius: 15px;
}
Gran
User avatar

Posts: 687
 Re: Shoutbox Post button color
#8 
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
Gran
User avatar

Posts: 687
 Re: Shoutbox Post button color
#9 
LOL button went oval but now is not black..
Gran
User avatar

Posts: 687
 Re: Shoutbox Post button color
#10 
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
Gran
User avatar

Posts: 687
 Re: Shoutbox Post button color
#11 
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;
}
Gran
User avatar

Posts: 687
 Re: Shoutbox Post button color
#12 
I shall delete the 2 duplicate last 2 entries on the previous list
andrew
User avatar

Admin

Posts: 11073
 Re: Shoutbox Post button color
#13 
Look at this one (in Blue-Grey)
Code: Select all
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:
Code: Select all
#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:

Code: Select all
.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! ;)
Gran
User avatar

Posts: 687
 Re: Shoutbox Post button color
#14 
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;
}
Gran
User avatar

Posts: 687
 Re: Shoutbox Post button color
#15 
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;
}
andrew
User avatar

Admin

Posts: 11073
 Re: Shoutbox Post button color
#16 
Code: Select all
#chatbox.chatbox-holder input.button {
background: #000
color: #fef;
border-radius: 15px;
}

should be:
Code: Select all
.chatbox-holder input.button {
background: #000
color: #fef;
border-radius: 15px;
}
Gran
User avatar

Posts: 687
 Re: Shoutbox Post button color
#17 
that worked to make it oval again but not black background
andrew
User avatar

Admin

Posts: 11073
 Re: Shoutbox Post button color
#18 
Missing semicolon after the black. Sorry, I am very tired and missed that.

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

Now we can sleep! :D
Gran
User avatar

Posts: 687
 Re: Shoutbox Post button color
#19 
You are Still Amazing! You are always here for us!
It is now exactly as we want it!
Thank you once againImage
andrew
User avatar

Admin

Posts: 11073
 Re: Shoutbox Post button color
#20 
You're welcome. :)

Thanks for the choccy's. :D
Display posts from previous:  Sort by  
New Topic   Add Reply

OurBoard Support » Yuku Help



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