Looking for help with github ribbon code

[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.

Code Select Expand

<!-- 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?

Code Select Expand

<!-- 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

Code Select Expand


<!-- 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

Code Select Expand


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:

Code Select Expand


<!-- 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!

Code Select Expand


/* 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

Code Select Expand

.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

Code Select Expand

.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:

Code Select Expand

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

[ApplianceJunk]

About line 92 I have..

Code Select Expand


.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??

[ApplianceJunk]

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

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.

Code Select Expand


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.

Code Select Expand


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


[TheKnown]

Code Select Expand


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

[ApplianceJunk]

Awesome, that works great!

Maybe someone else can explain why it works the way it does in Safari. I uploaded a video to youtube showing how the ribbon disappears in Safari when you start to scroll the page.

http://youtu.be/AEOhXeUYp0M

Thanks again for all your help with this.

[TheKnown]

I asked a friend who knows coding to have a look and he cannot reproduce this issue :/

[ApplianceJunk]

Thanks for him looking.

Was thinking it was maybe my Mac version of Safari, Version 7.0.2 (9537.74.9) so I took a look using Safari on my iPhone 5 and it cuts off the same way.

Not sure if it's a clue, but it seems to cut off just at the bottom of the username/password login text boxes.

[TheKnown]

this is a long shot but can you try adding

z-index: 100;

after the position: fixed; please

[ApplianceJunk]

ok, just added it and reset Safari. Still gets cut off.

[TheKnown]

well i am stumped :/

[ApplianceJunk]

no problem, you have been very helpful. Thanks again.

[ApplianceJunk]

Searching online for a solution and found this. Sounds similar to what I'm trying to work with, but not sure how I go about adding them properties to position:fixed or maybe it's nothing like what I'm doing.

Why does Safari seem to have a problem with css position:fixed?

You have position:fixed on a few elements but you haven't set any of top, left, right, or bottom to tell the browser where they should be positioned. The browser will be left to guess (within limits) what you mean if you don't specify the position and different browsers will guess different things. The solution is to add left and top properties to all your position:fixed elements.

http://stackoverflow.com/questions/6824456/why-does-safari-seem-to-have-a-problem-with-css-positionfixed

[TheKnown]

you have them specified already:

this is what they are on about:

top: 42px;
right: -43px;

[ApplianceJunk]

shows you how much I know, haha

[Chen Zhen]

ApplianceJunk,

Try the position:relative attribute for the first container (fixed being in your second container). 

Regards.

[ApplianceJunk]

ApplianceJunk,

Try the position:relative attribute for the first container (fixed being in your second container). 

Regards.

Hi,

Not sure exactly how to do that. Could you post the code for me to copy and paste, thanks.

Just playing around with it tonight and when I change the position to left-bottom or right-bottom if floats just fine in Safari, even without adding position:fixed anyplace.

[Chen Zhen]

ApplianceJunk,

  I did not bother looking at your site before a moment ago. Imo your issue is that the 2 css style sheets you added to the template are not closed. You need to learn to close your html tags because I also see many others on the page (unrelated to this example) that have the same issue.  Ignore my previous suggestion and apply what is shown below.

Your 2 css link tags for the ribbon should look like this:

Code Select Expand


<link rel="stylesheet" type="text/css" media="screen" href="http://appliancejunk.com/forums/mobiquo/smartbanner/appbanner.css" />
<link rel="stylesheet" type="text/css" href="http://www.appliancejunk.com/forums/Themes/default/css/gh-fork-ribbon.css" />


Regards.

[ApplianceJunk]

Seem to have found the problems.

In my CSS I have this...

Code Select Expand


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


I changed it to this...

Code Select Expand


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


I will also check out the 2 css link tags your talking about.

Thanks,

[ApplianceJunk]

ApplianceJunk,

  I did not bother looking at your site before a moment ago. Imo your issue is that the 2 css style sheets you added to the template are not closed. You need to learn to close your html tags because I also see many others on the page (unrelated to this example) that have the same issue.  Ignore my previous suggestion and apply what is shown below.

Your 2 css link tags for the ribbon should look like this:

Code Select Expand


<link rel="stylesheet" type="text/css" media="screen" href="http://appliancejunk.com/forums/mobiquo/smartbanner/appbanner.css" />
<link rel="stylesheet" type="text/css" href="http://www.appliancejunk.com/forums/Themes/default/css/gh-fork-ribbon.css" />


Regards.

I don't know where you are seeing this. Should I be looking in my index.template.php file?

[Chen Zhen]

ApplianceJunk,

Yes, that is where you added the tags to load those style sheets. You need to correct the 2 tags you added by replacing them with what I provided.

Do you use Firefox?
Download and install this plugin for it:
https://addons.mozilla.org/en-US/firefox/addon/html-validator/

After it is enabled, navigate to your forum pages and right-click view source. It will highlight your html errors and tell you what needs to be fixed. Ignore empty spans and table summary attributes (considered misdemeanors). It will show you all those non-closed tags that are causing errors and incorrect display on your forum pages.

Regards.

[ApplianceJunk]

I don't have anything like this in my index.template.php

Code Select Expand

<link rel="stylesheet" type="text/css" href="http://www.appliancejunk.com/forums/Themes/default/css/gh-fork-ribbon.css" />

What I do have though is this...

Code Select Expand

<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]-->

Maybe it just shows up different for you for some reason...

[ApplianceJunk]

To give you a bigger pitcher of the code I have all this just before the closing head tag.

Code Select Expand


echo '

<!-- BEGIN Tynt Script -->
<script type="text/javascript">
if(document.location.protocol=="http:"){
var Tynt=Tynt||[];Tynt.push("bYgXyUPTyr4yWfacwqm_6l");Tynt.i={"ap":"Read more:"};
(function(){var s=document.createElement("script");s.async="async";s.type="text/javascript";s.src="http://tcr.tynt.com/ti.js";var h=document.getElementsByTagName("script")[0];h.parentNode.insertBefore(s,h);})();
}
</script>
<!-- END Tynt Script -->

<!-- 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 -->

</head>
<body>';


[Chen Zhen]

find:

Code Select Expand


<!-- 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 -->


replace with:

Code Select Expand


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


  You have other tags on the page causing issues. Imo use the tool to which I provided a link to guide you in learning html markup.
Look stuff up on w3schools for detailed explanations. Your Doctype declaration is XHTML therefore some tags need closing whereas in HTML5 some would not.

Regards.

[ApplianceJunk]

ApplianceJunk,

Yes, that is where you added the tags to load those style sheets. You need to correct the 2 tags you added by replacing them with what I provided.

Do you use Firefox?
Download and install this plugin for it:
https://addons.mozilla.org/en-US/firefox/addon/html-validator/

After it is enabled, navigate to your forum pages and right-click view source. It will highlight your html errors and tell you what needs to be fixed. Ignore empty spans and table summary attributes (considered misdemeanors). It will show you all those non-closed tags that are causing errors and incorrect display on your forum pages.

Regards.

I do have Firefox for Mac.
When I go to that link it says, "Not available for your platform".
Any others?

[Chen Zhen]

Mac OSX version is located here:
http://users.skynet.be/mgueury/mozilla/

Did the correction fix the behavior within Safari? I do not have the issue on any of the 5 popular browsers I test with.

[ApplianceJunk]

Got it, 0 errors/31 warnings

thanks,

[Chen Zhen]

ApplianceJunk,

  Some show as warnings instead of errors because the browser is designed to fix most of them. However, you need to fix most of the ones that say warning & should not expect the browser to do that for you. There are misdemeanor warnings that can be ignored but you will have to learn which ones. I already provided you with the 2 standard ones you can ignore from smf default templates. All of the non-closed tags need to be fixed whereas some are closed within the initial opening tag (ie link, img, etc.) but some are closed with an additional closing tag (ie. div, span, p, script, etc.)

[ApplianceJunk]

Sounds good, thanks!

[Chen Zhen]

Is the issue resolved?

[ApplianceJunk]

Yes, thanks to all that replied!

[trot12345]

Ok, tried using through which even though next to nothing altered.

Simply to be assured we all fully understand one another when i indicate proceed Come on, man I wants the specific lace through which to remain the specific area simply because all of those some other website page scrolls.

No longer use while Today i am with the expression 'float' effectively.

[ApplianceJunk]

Looking at trot12345 other post non of them make sense.