Top frame

How to get a top referrers frame like themeforest.net has for external links?

  • aecnu

    Greetings Annabelle,

    Just checking if this issue was eventually resolved in another thread? Or by yourself separately to us? Or by us over email with you? Or using our live support?

    If so, no need to reply, that's great news.

    If not, or you have any more questions related to this thread, please feel free to post them below including any new symptoms or errors and tick the 'Mark as Not Resolved (re-open)' box below the post area (or else we'll miss it!)

    Otherwise, happy days, glad you got it sorted :slight_smile:

    Thank you for being a WPMU Dev member!

    Cheers, Joe

  • PC

    Hello Annabelle,

    Greetings,

    I did some research on this and found something which might help you to display a header bar, which is not exactly like themeforest though, but might serve the purpose of displaying a particular message with a link.

    I, however, m doing more research on it and shall comeup with an exact solution soon, till then you can try the below and see how it looks.

    1. Go to Dashboard>Appearance>Editor> and open header.php file. In header.php file find the code </head> and paste the below code just before the </head> code.

    <div id="stickybar-container" style="top: 0px;"><span>Welcome to WPMUDEVning</em></span> <a href="http://www.goob.in">Write For Us</a><div id="stickybar-shadow"></div></div>

    Change text accordingly.

    Save the file.

    2. Now open Style.css file and paste the below code at the end of the file.

    element.style {
        top:0;
        }
        #stickybar-container {
        background:none repeat scroll 0 0 #EB583C;
        color:#FFFFFF;
        font-family:Georgia,Times New Roman,Times,serif;
        }
        #stickybar-container {
        font-size:14px;
        font-weight:normal;
        height:30px;
        line-height:30px;
        margin:0;
        overflow:visible;
        padding:0;
        position:relative;
        text-align:center;
        width:100%;
        z-index:1000;
        }

    Save the file.

    Cheers,
    PC
    Will be back soon with more on it.

  • aecnu

    Greetings Annabelle,

    They are using framing in this case which is a custom coded design in the case of your supplied graphic.

    PC was kindly trying to point out a Navigation bar plugin that can give this type of effect without the need for custom coding.

    I also found two that may work for this purpose the Toolbar Menu plugin and force-frame plugin which may be the closest to what they are doing.

    Please advise if you try one of these and which one you chose to stick with.

    Cheers, Joe

  • PC

    This is how Themeforest has implemented it.

    They have the below code in header.php (In body )

    <div id="header-bar">
    <div class="close-header">
    <a id="close-button" class="close" href="http://wordpressconferencetheme.com/landing/" title="Close ThemeForest Bar">X</a>
    </div>
    <p class="meta-data">
    <a class="close" href="http://wordpressconferencetheme.com/landing/">Remove Frame</a>
    <a class="purchase" href="/item/pressevent-event-management-theme/2196163">Purchase this Item!</a>
    </p>
    <a class="athemeforest-preview-logo site-loopback" href="/item/pressevent-event-management-theme/2196163">themeforest</a>
    <span class="preview">item preview</span>
    </div>

    And the below CSS,

    #header-bar {
        background-color: #000000;
        border-bottom: 1px solid #191919;
        height: 53px;
        line-height: 53px;
        margin-bottom: 1px;
        z-index: 100;
    }
    #header-bar a.site-loopback {
        background-position: left top;
        background-repeat: no-repeat;
        display: block;
        float: right;
        margin-left: -10px;
        margin-top: 1px;
        text-indent: -9999px;
    }
    #header-bar .a3docean-preview-logo {
        background-image: url("http://0.envato-static.com/images/common/preview-logos/3docean-purchasethis.png?1315975390");
        height: 52px;
        width: 270px;
    }
    #header-bar .aactiveden-preview-logo {
        background-image: url("http://3.envato-static.com/images/common/preview-logos/activeden-purchasethis.png?1315975390");
        height: 52px;
        width: 270px;
    }
    #header-bar .athemeforest-preview-logo {
        background-image: url("http://3.envato-static.com/images/common/preview-logos/themeforest-purchasethis.png?1315975390");
        height: 52px;
        width: 270px;
    }
    #header-bar .acodecanyon-preview-logo {
        background-image: url("http://0.envato-static.com/images/common/preview-logos/codecanyon-purchasethis.png?1315975390");
        height: 52px;
        width: 270px;
    }
    #header-bar .atutsmarketplace-preview-logo {
        background-image: url("http://1.envato-static.com/images/common/preview-logos/tutsmarketplace-purchasethis.png?1315975390");
        height: 52px;
        width: 270px;
    }
    #header-bar p.meta-data {
        float: left;
        margin: 0;
        padding: 0;
    }
    #header-bar p.meta-data p {
        display: inline;
        margin: 0;
    }
    #header-bar p.meta-data a {
        color: #6E6E6E;
        text-decoration: none;
    }
    #header-bar p.meta-data a.purchase {
        border-left: 1px solid #6E6E6E;
        margin-left: 10px;
        padding-left: 15px;
    }
    #header-bar p.meta-data a:hover, #header-bar p.meta-data a.activated {
        color: #FFFFFF;
    }
    #header-bar span.preview {
        background: url("http://1.envato-static.com/images/activeden/right-slide.png?1311218483") no-repeat scroll 0 1px transparent;
        color: #D2D1D0;
        display: none;
        font-family: "Helvetica Neue",Arial,sans-serif;
        font-size: 13px;
        letter-spacing: 1px;
        margin-left: 10px;
        padding-left: 20px;
        text-decoration: none;
    }
    #header-bar div.close-header {
        float: left;
        height: 52px;
        margin-left: 5px;
        width: 40px;
    }
    #header-bar div.close-header a#close-button {
        background-image: url("http://2.envato-static.com/images/common/icons-buttons/button.gif?1311218500");
        background-repeat: no-repeat;
        border: 1px solid #545454;
        display: block;
        height: 16px;
        margin: 17px auto 0;
        text-indent: -9999px;
        width: 16px;
    }
    #header-bar div.close-header a#close-button:hover, #header-bar div.close-header a#close-button.activated {
        background-position: 0 -16px;
    }
    #preview-frame {
        background-color: #FFFFFF;
        width: 100%;
    }

    I tried to implement it on my test site (Which did not go too well :slight_frown: . I am more of a designer than a developer :smiley: ) and I think I added that at the wrong place. I am still giving it a try to get some helpful information for you.

    http://test.bestreviewsites.co/

    It appears there but is broken, I think it needs an expert hand on the code, I am still trying to get it working, I hope that helps in some sort !

    Please advise

    Cheers
    PC

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.