Runboard.com
You're welcome.
Runboard Extra! The Runboard Directory Runboard Knowledge Base

Ugly blue checkboxes in Chrome since the last update? checkbox

See how to fix it here!

Chat room Runboard Knowledge Base (wiki) Search Facebook Twitter





runboard.com       You are not logged in.

 
Shannt Profile
Live feed
Blog
Friends
Miscellaneous info

Regular poster

Registered: 02-2019
Location: Texas
Posts: 81
Karma: 0 (+0/-0)
Reply | Quote
Button Help


Image

As you can see in the screenshot above what is going on. Thank you!

/* DEFINES NEW TOPIC AND ADD REPLY COLORS AND WIDTHS */
.topiclistpostnewtopic a, .postlistaddareply a {
   padding : 5px 15px;
   font-size : 13px;
   background : url(https://s5.gifyu.com/images/gbisumcl03_blankbutton2.gif) no-repeat;
   border : 0px solid #000000;
   color: #000000 !important;
}


---

3/30/2020, 11:43 pm Link to post Email Shannt   PM Shannt Blog
 
Shannt Profile
Live feed
Blog
Friends
Miscellaneous info

Regular poster

Registered: 02-2019
Location: Texas
Posts: 81
Karma: 0 (+0/-0)
Reply | Quote
Re:


I started playing around with the padding and it looks good but is there any way to move the text up some? To me it's very low to the bottom of the button and I don't like that. Thanks!

---

3/31/2020, 12:28 am Link to post Email Shannt   PM Shannt Blog
 
Susa Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator


Registered: 07-2006
Location: Oχάιο
Posts: 3761
Karma: 106 (+115/-9)
Reply | Quote
Re:


I have sent for help for you. Coding is not my strong suit.

---


SS eH PF
3/31/2020, 1:27 am Link to post PM Susa Blog
 
Shannt Profile
Live feed
Blog
Friends
Miscellaneous info

Regular poster

Registered: 02-2019
Location: Texas
Posts: 81
Karma: 0 (+0/-0)
Reply | Quote
Re:


Thank you Susa. emoticon

---

3/31/2020, 1:28 am Link to post Email Shannt   PM Shannt Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 25448
Karma: 425 (+478/-53)
Reply | Quote
Re: Button Help


Thanks for the heads up, Susa! emoticon

Hi, Shannt! emoticon

Here's what you had when I looked at your test board:

/* DEFINES NEW TOPIC AND ADD REPLY COLORS AND WIDTHS */
.topiclistpostnewtopic a, .postlistaddareply a {
   padding-top: 30px;
   padding-bottom: 30px;
   padding-right: 50px;
   padding-left: 30px;
   background : url(https://s5.gifyu.com/images/gbisumcl03_blankbutton2.gif) no-repeat;
   border : 0px solid #000000;
   color: #000000 !important;
}

First, let's get rid of that padding all together, and set the display of those links to inline-block. This makes it possible to set a width and height on it, without going all the way and making it a true block-level element.

      display: inline-block;

Since your image is 110px wide, let's make the width of those links 110px wide. Then, we'll center the text horizontally.

      width: 110px;
      text-align: center;

Boom! That gets rid of the need for left and right padding.

The height of your background image is 59px, so let's make that the height of your links:

      height: 59px;

If the text was truly centered vertically within that 59px, it would actually look too low because of the strawberries at the bottom of that oval. To offset that, we can make the line-height shorter than the height of the background image. By defining a line-height of 55px, it will vertically center that text within the top 55px of the box we created when we set a width and height on it.

      line-height: 55px;

Oh, and this:

   border : 0px solid #000000;
   color: #000000 !important;

Let's just get rid of that all together, because it's not necessary. There is no border to get rid of, and all your other links are already black. This is what the cascade is all about in Cascading Style Sheets! emoticon
      
It also doesn't hurt to add 'center' to your background image, to make sure that puppy is centered like you want it to be.

After those changes, you now have this:

/* DEFINES NEW TOPIC AND ADD REPLY COLORS AND WIDTHS */
.topiclistpostnewtopic a, .postlistaddareply a {
   display: inline-block;
   width: 110px;
   text-align: center;
   height: 59px;
   line-height: 55px;
   background : url(https://s5.gifyu.com/images/gbisumcl03_blankbutton2.gif) no-repeat center;
}

I went ahead and made those changes for you at your test board. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
3/31/2020, 3:50 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Shannt Profile
Live feed
Blog
Friends
Miscellaneous info

Regular poster

Registered: 02-2019
Location: Texas
Posts: 81
Karma: 0 (+0/-0)
Reply | Quote
Re:


It looks good. Thank you SO much. emoticon

---

3/31/2020, 4:22 am Link to post Email Shannt   PM Shannt Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 25448
Karma: 425 (+478/-53)
Reply | Quote
Re: Button Help


You're very welcome, Shannt! emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
3/31/2020, 4:20 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Messup434 Profile
Live feed
Blog
Friends
Miscellaneous info

Probably Online

Registered: 12-2014
Posts: 572
Karma: 44 (+44/-0)
Reply | Quote
Re: Button Help


Doesn't look like anything has changed around here during my absence! Great service as always, and nice to meet you Shannt. emoticon

---
Keshi Heads
4/1/2020, 4:56 am Link to post Email Messup434   PM Messup434 Blog
 
Shannt Profile
Live feed
Blog
Friends
Miscellaneous info

Regular poster

Registered: 02-2019
Location: Texas
Posts: 81
Karma: 0 (+0/-0)
Reply | Quote
Re: Button Help


quote:

Messup434 wrote:

Doesn't look like anything has changed around here during my absence! Great service as always, and nice to meet you Shannt. emoticon



It's good to meet you as well. emoticon



---

4/1/2020, 4:17 pm Link to post Email Shannt   PM Shannt Blog
 


Add a reply



You are not logged in (login)