Announcement

Collapse
No announcement yet.

how to make topic prefixes into buttons

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • how to make topic prefixes into buttons

    um take it away wayne?

    Click image for larger version

Name:	prefix.jpg
Views:	17
Size:	89.6 KB
ID:	4338902

    this i saw on your site is very nice, i wonder will anyone mind to share some code on how to create? i think many people would like this,
    thanks
    Iggy


  • #2
    ok, so im just realizing 2 things....

    these use purely html code for 1, so many many many options....

    and 2, it accepts gifs! (that new arrow is an animated icon)
    Click image for larger version

Name:	prefixtest.jpg
Views:	12
Size:	11.3 KB
ID:	4338965


    let that be some awesomeness upon you, some good potential right there

    Comment


    • #3
      i notice this code works too is sort of an interesting one fwiw

      Code:
      <marquee bgcolor="#cccccc" loop="-1" scrollamount="2" width="100%">Example Marquee</marquee>
      loop is set to infinate, it can be alter to indicate # of times to loop if you prefer

      Comment


      • #4


        double post



        Comment


        • #5
          CSS buttons are very easy ti implement. I use them on my site to indicate new posts. It's easier to touch he buttons in responsive mode. I also use buttons for sub-forum icons in responsive mode.

          Click image for larger version

Name:	Screenshot.png
Views:	13
Size:	21.0 KB
ID:	4339028
          Last edited by Replicant; Fri 26th Feb '16, 4:10am.


          Comment


          • #6
            Sorry for not seeing this sooner.

            For that example I simply used this code:
            Code:
            <button style="color:green">Testing</button>
            It is placed in the HTML option of the prefix. You can get fancier with CSS and use backgrounds, gradients, etc...
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud customization and demonstration site.
            vBulletin 5 Documentation - Updated every Friday. Report issues here.
            vBulletin 5 API - Full / Mobile
            I am not currently available for vB Messenger Chats.

            Comment


            • #7
              Originally posted by Wayne Luke View Post
              Sorry for not seeing this sooner.

              For that example I simply used this code:
              Code:
              <button style="color:green">Testing</button>
              It is placed in the HTML option of the prefix. You can get fancier with CSS and use backgrounds, gradients, etc...
              This will result in invalid HTML as the prefix is wrapped in <a> tag.

              HTML Code:
              <a href="http://xxxxxxxxxxxxx/search?searchJSON=%7B%22prefix%22%3A%5B%22green%22%5D%7D">
                  <button style="color:green">Green</button>
              </a>
              It may or may not work on some browsers.

              I suggest just using <span> tag and style that to look like a button like this:

              HTML Code:
              <span style="color:green; border: 1px solid green; display:inline-block; padding: 1px 3px; background: silver;">Green</span>
              Or better, just use a class and style it in css_additional.

              HTML Code:
              <span class="prefix-button">Green</span>
              Code:
              .prefix-button {
                  color:green;
                  border: 1px solid green;
                  display:inline-block;
                  padding: 1px 3px;
                  background: silver;
              }

              GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

              Comment


              • #8
                Originally posted by Glenn Vergara View Post
                This will result in invalid HTML as the prefix is wrapped in <a> tag.
                Yep, not really personally worried about it. I use the site as a test bed and nothing serious. He asked how it was done on that site. If it were done for real, I would most likely use CSS and a specific class.
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                vBulletin 5 Documentation - Updated every Friday. Report issues here.
                vBulletin 5 API - Full / Mobile
                I am not currently available for vB Messenger Chats.

                Comment

                Related Topics

                Collapse

                Working...
                X