News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Looking for help with github ribbon code

Started by ApplianceJunk, March 16, 2014, 09:52:56 AM

Previous topic - Next topic

ApplianceJunk

Here is the github page I'm trying to work with.

https://github.com/simonwhitaker/github-fork-ribbon-css/


I would like to put a ribbon in the top left hand corner of my SMF forum and make it float.

It says on this page to get the css file.
http://simonwhitaker.github.io/github-fork-ribbon-css/

Well there seems to be more then one CSS file on the github page so I'm not sure what one to use or if I need to use them both.
Also not sure what to do with the css file/files. Do I add the css code to one of my current SMF css file or in addition to my current SMF CSS files.

Also not sure on what other code I need to use or where to put it in my SMF files, but this is what I'm thinking.

I put this in my index.template.php someplace.

<!-- START COPYING HERE -->
    <link rel="stylesheet" href="gh-fork-ribbon.css">
    <!--[if lt IE 9]>
        <link rel="stylesheet" href="gh-fork-ribbon.ie.css">
    <![endif]-->
    <!-- END COPYING HERE -->


along with this?

<!-- TOP RIGHT RIBBON: START COPYING HERE -->
    <div class="github-fork-ribbon-wrapper left">
        <div class="github-fork-ribbon">
            <a href="https://github.com/simonwhitaker/github-fork-ribbon-css">Fork me on GitHub</a>
        </div>
    </div>
    <!-- TOP RIGHT RIBBON: END COPYING HERE -->


Any help is greatly appreciated, thanks!

Edited to add:

I have uploaded the two CSS files, gh-fork-ribbon.css and gh-fork-ribbon.ie.css to my Themes/default/css folder.

Then I added this to the head of my index.template.php


<!-- START COPYING HERE -->
    <link rel="stylesheet" href="gh-fork-ribbon.css">
    <!--[if lt IE 9]>
        <link rel="stylesheet" href="gh-fork-ribbon.ie.css">
    <![endif]-->
<!-- END COPYING HERE -->


and this to the body of index.template.php


echo'
    <div class="github-fork-ribbon-wrapper left">
        <div class="github-fork-ribbon">
            <a href="http://appliancejunk.com">....</a>
        </div>
    </div>';


I get a link to show in the upper left corner, but I don't seem to have any styling to go with it.

TheKnown

looks like you need to update your paths to the correct css folder (assuming you placed the css files into the css folder)

TheKnown

try this:


<!-- START COPYING HERE -->
    <link rel="stylesheet" href="', $settings['theme_url'], '/css/gh-fork-ribbon.css">
    <!--[if lt IE 9]>
        <link rel="stylesheet" href="', $settings['theme_url'], '/css/gh-fork-ribbon.ie.css">
    <![endif]-->
<!-- END COPYING HERE -->

ApplianceJunk

tk1, that did the trick, thanks!

Any clue what I need to do in order to make it float?
I'm guessing I need to change something in the two CSS files.

Thanks again!

TheKnown

can you encourage my laziness and post the css files using the code tag?

should be as simple as using

position: fixed;

in the correct class

ApplianceJunk

Yes, thanks!



/* Left will inherit from right (so we don't need to duplicate code) */
.github-fork-ribbon {
  /* The right and left classes determine the side we attach our banner to */
  position: absolute;

  /* Add a bit of padding to give some substance outside the "stitching" */
  padding: 2px 0;

  /* Set the base colour */
  background-color: #a00;

  /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));

  /* Add a drop shadow */
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);

  z-index: 9999;
  pointer-events: auto;
}

.github-fork-ribbon a,
.github-fork-ribbon a:hover {
  /* Set the font */
  font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;

  /* Set the text properties */
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
  text-align: center;

  /* Set the geometry. If you fiddle with these you'll also need
     to tweak the top and right values in .github-fork-ribbon. */
  width: 200px;
  line-height: 20px;

  /* Set the layout properties */
  display: inline-block;
  padding: 2px 0;

  /* Add "stitching" effect */
  border-width: 1px 0;
  border-style: dotted;
  border-color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.github-fork-ribbon-wrapper {
  width: 150px;
  height: 150px;
  position: absolute;
  overflow: hidden;
  top: 0;
  z-index: 9999;
  pointer-events: none;
}

.github-fork-ribbon-wrapper.fixed {
  position: fixed;
}

.github-fork-ribbon-wrapper.left {
  left: 0;
}

.github-fork-ribbon-wrapper.right {
  right: 0;
}

.github-fork-ribbon-wrapper.left-bottom {
  position: fixed;
  top: inherit;
  bottom: 0;
  left: 0;
}

.github-fork-ribbon-wrapper.right-bottom {
  position: fixed;
  top: inherit;
  bottom: 0;
  right: 0;
}

.github-fork-ribbon-wrapper.right .github-fork-ribbon {
  top: 42px;
  right: -43px;

  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.github-fork-ribbon-wrapper.left .github-fork-ribbon {
  top: 42px;
  left: -43px;

  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
  top: 80px;
  left: -43px;

  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
  top: 80px;
  right: -43px;

  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


TheKnown

look for

.github-fork-ribbon-wrapper.left .github-fork-ribbon {
  top: 42px;
  left: -43px;

  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


and try adding position: fixed to it like this

.github-fork-ribbon-wrapper.left .github-fork-ribbon {
  top: 42px;
  left: -43px;
  position: fixed;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

ApplianceJunk

Ok, tried that but nothing changed.

Just to make sure we understand each other when I say float I mean I would like the ribbon to stay in the corner as the rest of the page scrolls.

Not use if I'm using the word 'float' correctly.


ApplianceJunk

Ok, my bad, that code changes does do something.

I had moved my ribbon from the left side to right side.

Anyway when I add the, position: fixed; it makes the ribbon kind of disappear as you start to scroll the page.

TheKnown

I looked at your site and your css file I dont see the position in:

.github-fork-ribbon-wrapper.right .github-fork-ribbon {

ApplianceJunk

About line 92 I have..


.github-fork-ribbon-wrapper.right .github-fork-ribbon {
  top: 42px;
  right: -43px;

  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}


http://appliancejunk.com/forums/Themes/default/css/gh-fork-ribbon.css

TheKnown

but where is position: fixed; in that code?? :P

ApplianceJunk

Quote from: tk1 on March 16, 2014, 04:20:20 PM
but where is position: fixed; in that code?? :P

Sorry, I had taken it out as it did not seem to work.
I put it back in now so you can see.

Acts funny in Safari, kind of disappears as you start to scroll and in Firefox it don't seem to change anything.


ApplianceJunk

So I just checked in Chrome and it floats, what the heck?
Why don't it work in Firefox or Safari?

TheKnown

works for me in firefox :)

try clearing your forum cache :)

ApplianceJunk

How do I get it to work with all browsers?

There was another SMF forum that had been using this. They had it floating and when I checked it worked in Safari and Firefox. Was going to use firebug to inspect their code, but they are no longer using the ribbon on their site. :(

btw: I'm using Firefox on a mac if that makes any difference.

Also trying to figure out how to only display it to guest on our site.

Thinking I have to add something to this part of the code.


echo'
    <div class="github-fork-ribbon-wrapper right">
        <div class="github-fork-ribbon">
            <a href="http://appliancejunk.com">....</a>
        </div>
    </div>';

ApplianceJunk

Clearing Firefox cache got it working in FF, still acts funny in Safari after clearing Safari cache.


TheKnown

works for me on all browsers I tried,

Firefox, IE, Chrome and Opera

Should work on Safari as well, it uses webkit engine like opera and chrome (ok chrome is on a fork of webkit).

I dont have Safarai so I cant test or tell you more sorry

ApplianceJunk

ok, probably just something strange with Safari or me, lol...

Thank you very much for all your help. You have been very helpful.

One more question, if you would be so kind.

I have been trying to look at code for buttons and such that are only shown to guest to try and figure out how to show this ribbon to only our guest, but I can't figure it out.

Seems I need to add something to this part of the code.


echo'
    <div class="github-fork-ribbon-wrapper right">
        <div class="github-fork-ribbon">
            <a href="http://appliancejunk.com">....</a>
        </div>
    </div>';

TheKnown



if ($context['user']['is_guest'])
{
echo'
    <div class="github-fork-ribbon-wrapper right">
        <div class="github-fork-ribbon">
            <a href="http://appliancejunk.com">....</a>
        </div>
    </div>';
}
echo'


this should do it :)

Advertisement: