We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

Here is a little attribution tip that does not violate the TOS or License | Forum

dave Leader
dave Aug 27 '17
TOS and License require that you do not modify the attribution content or image without permission.   Here is a little work around that should not violate either license or TOS. 


You can just hide the attribution until the mouse runs over that section and then it will show up.  So you are not removing anything or modifying the attribution content.  


So what will happen is that once you post this code and refresh the cache the attribution will not show until you move your mouse over the attribution, then it will show up.   


This is for my theme so yours might look alittle different.


In your theme master_pages directory open up dndindex.html and at the very top of the file post this code.  


<style type="text/css">

.showattribute  {    

opacity: 0;    

transition: 

opacity 0.5s ease;  

}  


.showattribute:hover  {    

opacity: 1;  

</style>


then down below that, scroll down until you see this 


ORIGINAL CODE


<div style="float:right;padding-bottom: 30px;">

{$bottomPoweredByLink}

</div>


and modify that code to look like this 


NEW CODE


<div style="float:right;padding-bottom: 30px;">     

   <div class="showattribute"> 

        {$bottomPoweredByLink}     

    </div> 

 </div>


save the file 



then open up blank.html in the same folder and add this to the bottom of the 


ORIGINAL CODE


 {style}

{literal}

.ow_footer,.ow_sign_in_cont{position:relative}

body,html{background:#000;min-width:0;height:100%}

.ow_page_wrap{background:0}

.ow_footer{background:0;border:0;clear:both;height:96px;margin-top:-99px;padding:1px 0;width:88%!important}

.ow_footer .ow_canvas{margin:0 auto;width:996px;word-wrap:break-word;background:0;border:0!important;padding-left:0!important}

.ow_footer .ow_page{margin:0 0 0 auto;padding:0 18px;background:0}

body>.ow_page_wrap{min-height:100%;position:relative}

.ow_page_padding{padding-bottom:99px;background:0}

.ow_sign_in_wrap h2{color:#FFF!important}

{/literal}

{/style}



This is the new code 


{style}

{literal}

.ow_footer,.ow_sign_in_cont{position:relative}

body,html{background:#000;min-width:0;height:100%}

.ow_page_wrap{background:0}

.ow_footer{background:0;border:0;clear:both;height:96px;margin-top:-99px;padding:1px 0;width:88%!important}

.ow_footer .ow_canvas{margin:0 auto;width:996px;word-wrap:break-word;background:0;border:0!important;padding-left:0!important}

.ow_footer .ow_page{margin:0 0 0 auto;padding:0 18px;background:0}

body>.ow_page_wrap{min-height:100%;position:relative}

.ow_page_padding{padding-bottom:99px;background:0}

.ow_sign_in_wrap h2{color:#FFF!important}


/* added by dave */

.showattribute  { 

opacity: 0;

transition: opacity 0.5s ease;

}


.showattribute:hover  { 

opacity: 1;

{/literal}

{/style}


then scroll down and do the same as in the other file...


ORIGINAL CODE 


<div style="float: right; padding-bottom: 30px;">    

{$bottomPoweredByLink}

</div>


New CODE 


<div style="float: right; padding-bottom: 30px;">    

   <div class="showattribute">

         {$bottomPoweredByLink}

    </div>

 </div>



then save the file.



Then open up general.html in the same dir and add this code at the top.. 


<style type="text/css">

.showattribute  {    

opacity: 0;    

transition: opacity 0.5s ease;  

}  


.showattribute:hover  {    

opacity: 1;  

</style>


then scroll down and do the same as you did before 


ORIGINAL CODE


                   <div style="padding-bottom: 30px;padding-left:73%">

                           {$bottomPoweredByLink}   

                   </div>



NEW CODE  


                      <div style="padding-bottom: 30px;padding-left:73%">    

                            <div class="showattribute">

                               {$bottomPoweredByLink}   

                           </div>

                      </div>


save the file...


Now refresh your site cache and test it.  It should show up if you move your mouse down to where the attribute is located.  


It been awhile since i did this so i hope i got all the code included here. If it does not work let me know and ill look deeper to see if i missed anything. 


Dave 


PS  remember to save the files because once you update the theme your changes will be lost.  


If anyone has a better way to intigrate this, go for it, but please share. 





The Forum post is edited by dave Aug 27 '17
Webster Molaudi
Webster Molaudi Aug 28 '17
HiThanks Dave... will give it a go !!
dave Leader
dave Aug 29 '17
Here is the code that you can add to the custom css in admin instead of editing the core files.   I just tested and it seems to work just fine.


.ow_footer div a img[src*="powered-by-oxwall.png"] {
    opacity: 0;
    transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
}
.ow_footer div a img[src*="powered-by-oxwall.png"]:hover {
    opacity: 1;
}

The Forum post is edited by dave Aug 29 '17
Scam Detector
Scam Detector Aug 29 '17


Is this legal?


I mean, in court maybe they say that the css is a way to "modify" the attribution link on the fly


I just read this and id doesn't say that you need the link exactly like that but I certainly dont know. Here it is what I just readed: https://developers.oxwall.com/attribution


dave Leader
dave Aug 30 '17
I dont see why it would not be legal.  Your not changing the image or the link itself, and you are fullfilling the requirement that it shows.  Its just that it shows when the mouse is over it.   I could not find any reference otherwise that would make it illegal. If i do i will update this topic.

Here is another one, the attribute shows for 30 seconds then fades out, and on hover it fades in after 2 seconds, and fades back out in 30 seconds

this is not tested...

.ow_footer div a img[src*="powered-by-oxwall.png"] {
    -webkit-animation: cssAnimation 30s forwards;
       -moz-animation: cssAnimation 30s forwards;
        -ms-animation: cssAnimation 30s forwards;
         -o-animation: cssAnimation 30s forwards;
            animation: cssAnimation 30s forwards;
}

@keyframes cssAnimation {
    0% { opacity: 1; }
    90% { opacity: 1;  }
    100%   { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes cssAnimation {
    0% { opacity: 1; }
    90% { opacity: 1;  }
    100%   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes cssAnimation {
    0% { opacity: 1; }
    90% { opacity: 1;  }
    100%   { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes cssAnimation {
    0% { opacity: 1; }
    90% { opacity: 1;  }
    100%   { opacity: 0; }
}

/* Opera < 12.1 */
@-o-keyframes cssAnimation {
    0% { opacity: 1; }
    90% { opacity: 1;  }
    100%   { opacity: 0; }
}
.ow_footer div a img[src*="powered-by-oxwall.png"]:hover {
    -webkit-animation: fadein 1s forwards;
       -moz-animation: fadein 1s forwards;
        -ms-animation: fadein 1s forwards;
         -o-animation: fadein 1s forwards;
            animation: fadein 1s forwards;
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1;  }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1;  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1;  }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1;  }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1;  }
}




The Forum post is edited by dave Aug 30 '17