Runboard.com
You're welcome.
Community logo






runboard.com       Sign up (learn about it) ● Sign in (lost password?)

 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 595
Accolades: 4 (+4/-0)
Reply ∙ Quote
Single Row Post Button Design


It seems I have become the admin that is in charge of keeping the Final Fantasy Dreams message board up to date which means, for the most part, just keeping the boards graphics from failing. Zeen, the board owner, also incorporated several CSS, HTML and Custom Language tips and tricks to give the board a unique design and layout back in 2003 and it holds up very well even by today's new standards.

Anyway, yesterday I noticed that there were some problems on the boards Single Row Post Button Design so I visited this topic over in Runboard Extra to see if I could figure out what was wrong besides the now missing graphics. I also mentioned this to Lesigner Girl so she could edit that post since I do not have any staff privleges on that board.

Those who know Lesigner Girl also know she never likes to just give the "cut-n-paste" solution and is always looking to see if something can be done a different way that could be better. The result is that she gave a totally new way of achieving the Single Row Post Button Design using CSS3. This IS a "advanced, trickier solution" and I have not totally mastered it myself as yet but the results are a cleaner Custom Language set (removing a inline division element) and a more customizable CSS. emoticon

---

Advertise Boards On TRDConceptsDE
3/13/14, 9:38 am Link to this post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 595
Accolades: 4 (+4/-0)
Reply ∙ Quote
Re: Single Row Post Button Design


So having slept on it and playing with it for a few days now here is the CSS3 way to create a "Single Row Post Button Design." The codes given here are taken from the notes and posts given to me by Lesigner Girl. I can take credit for the images used but that is all...

 emoticon Step One: Go to your boards "Custom Language Set"
Control Panel :: Board management :: Customize the language set

Once you are there you are going to want to look for and change the following so they read as shown here:

msgform_start_quote
Quote" onclick="startquote(this.form);endquote(this.form);

msgform_end_quote

msgform_start_bold
B" onclick="startbold(this.form);endbold(this.form);

msgform_end_bold

msgform_start_italic
I" onclick="startitalic(this.form);enditalic(this.form);

msgform_end_italic

msgform_start_underline
U" onclick="startunderline(this.form);endunderline(this.form);

msgform_end_underline

msgform_start_center
Center" onclick="startcenter(this.form);endcenter(this.form);

msgform_end_center

msgform_start_code
Code" onclick="startcode(this.form);endcode(this.form);

msgform_end_code

msgform_start_scroll
Scroll" onclick="startscroll(this.form);endscroll(this.form);

msgform_end_scroll

msgform_start_big
BIG" onclick="startbig(this.form);endbig(this.form);

msgform_end_big

msgform_start_small
small" onclick="startsmall(this.form);endsmall(this.form);

msgform_end_small

Notice that every Custom Language Set entry that has a _start_ in its name gets some additional code while every Custom Language Set entry that has a _end_ in its name is now blank (empty).

Scroll to the end of the Custom Language Set and click on the Submit custom set button/link to save this part of your work.

 emoticon Step Two: Go to your boards "Manage Custom Style Sheet (CSS)" screen:
Control Panel :: Board management :: Edit colors and theme :: CSS management

When you get there you will be entering the following:

.qcode_bar_but {
    background: #fff url(transparent.gif);
    height: 25px;
    /* borders or whatever else they share in common */
}
.qcode_bar_but+br { display: none; }
.qcode_bar_but[value=""] { display: none; }
.qcode_bar_but[onclick^='enterimg'] {
   background: url('http://rbbt.net/skins/finalfantasy/insertimage.png') no-repeat center;
   color: transparent; overflow: hidden; width: 35px;
}
.qcode_bar_but[onclick*='enteryoutube'] {
   background: #fff url('http://rbbt.net/skins/finalfantasy/yt.png') no-repeat center;
   color: transparent; overflow: hidden; width: 35px;
}

Notes:

.qcode_bar_but+br targets any <br> that occurs immediately after .qcode_bar_but
onclick^= means the onclick value starts with whatever is in quotes.
onclick*= means the onclick value contains whatever is in quotes. emoticon

Here is a example of the CSS styled to match one of the boards where I am a admin.

Image

/* SINGLE LINE BUTTON CODES */
.qcode_bar_but {
    background: #fff url(http://rbbt.net/skins/finalfantasy/spacer.gif);
    height: 25px;
    font:700 12px verdana,arial,helvetica,sans-serif;
    margin:1px;
    padding:0 1px;
    /* borders or whatever else they share in common */
}

.qcode_bar_but+br { display: none; }
.qcode_bar_but[value=""] { display: none; }

.qcode_bar_but[onclick^='enterurl'] {
background: url('http://rbbt.net/skins/finalfantasy/link.png') no-repeat center;
   color: transparent; overflow: hidden; width: 30px;
}

.qcode_bar_but[onclick^='enterimg'] {
   background: url('http://rbbt.net/skins/finalfantasy/insertimage.png') no-repeat center;
   color: transparent; overflow: hidden; width: 35px;
}

.qcode_bar_but[onclick^='entercolor'] {
   background: url('http://rbbt.net/skins/finalfantasy/color-ico.gif') no-repeat center;
   color: transparent; overflow: hidden; width: 25px;
}

.qcode_bar_but[onclick*='enteryoutube'] {
   background: #fff url('http://rbbt.net/skins/finalfantasy/yt.png') no-repeat center;
   color: transparent; overflow: hidden; width: 25px;
}

Notice I changed several of the entries to match the theme of the board and to "shrink" the width of the "button row."

Last edited by Pastor Rick, 3/19/14, 10:44 am


---

Advertise Boards On TRDConceptsDE
3/19/14, 12:23 am Link to this post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Charter Member
Head of Runboard staff

Registered: 11-2005
Posts: 21
Accolades: 1 (+1/-0)
Reply ∙ Quote
Re: Single Row Post Button Design


I just want to add a note here. If you put a background image into one button, you should use one in all the buttons for consistency, even if it's a 1×1px transparent png. You could also use a gif, but PR and I have both gotten a smaller file size with png.

The images below are a screen shot from Safari for iPad, followed by a screen shot from Firefox on a laptop running Windows 7. The CSS was the same for both screen shots.

Image

Image

B, I, U, Scroll, BIG, and small didn't have a background image, but the others did. When I put a 1×1px transparent png in the remaining buttons, it made them obey the height and background color I had defined for them, and made the corners less-rounded like the others.

In case anyone is wondering, I did get the word 'Scroll' to actually scroll, which worked on Firefox, but not in Safari on iPad. It takes quite a bit of CSS to accomplish that, but here it is:

@keyframes marquee {
    0% { text-indent: 3em; width: 3em;}
    100% { text-indent: -5em; width: 3em; }
}
.qcode_bar_but[onclick^='startscroll'] {
   overflow: hidden;
   animation: marquee 4s linear infinite;
}
.qcode_bar_but[onclick^='startscroll']:hover {
   animation-play-state: paused;
}


Breakdown of the code:

@keyframes marquee
• @keyframes is a function.
• marquee is what I chose to name that function.
• 0% is where it starts.
• 100% is where it ends.
• You can add other percentages in there for different animation effects, but that isn't necessary here.

.qcode_bar_but[onclick^='startscroll']
• This targets the scroll button.
• Notice the word 'marquee' after 'animation'. This calls up the @keyframes function I named 'marquee'.

.qcode_bar_but[onclick^='startscroll']:hover
• Note the :hover at the end. When the button is hovered on, animation-play-state:paused will make it pause.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
3/19/14, 2:33 pm Link to this post Email Lesigner Girl   PM Lesigner Girl Blog
 


Add a Reply





You are not logged in (login)
…Back To Top…