[Snippet] CSS3 Fading effect on Logo

Mods, snippets and styles postet and supported by the users
Forum rules
As the forum title says this is for User Contributions
Post a support request in this forum and you will be banned!
User avatar
FTH
BBCoder III
BBCoder III
Posts: 124
Joined: 25 Nov 2011, 21:28
BBCodes: 10

[Snippet] CSS3 Fading effect on Logo

Post by FTH » 21 Dec 2011, 19:22

Author : FTH
Description : Add a nice fading effect on your logo with CSS3 (works under news browsers)

Open file styles/prosilver/theme/common.css

Find :

Code: Select all

#logo {
	float: left;
	width: auto;
	padding: 10px 13px 0 10px;
}

a#logo:hover {
	text-decoration: none;
}
Replace with :

Code: Select all

#logo {
	float: left;
	width: auto;
	padding: 10px 13px 0 10px;
	opacity: 1;
	/* Firefox */
	-moz-transition-property: opacity;
	-moz-transition-duration: 1s;
	-moz-transition-delay: 0.2;
	/* WebKit */
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 1s;
	-webkit-transition-delay: 0.2;
	/* Opera */
	-o-transition-property: opacity;
	-o-transition-duration: 1s;
	-o-transition-delay: 0.2;
	/* Standard */
	transition-property: opacity;
	transition-duration: 1s;
	transition-delay: 0.2;
}

a#logo:hover {
	text-decoration: none;
	opacity: 0.4;
}
Demo :
http://graphogames.fr/demo/index.php?style=1

Past your moser over the logo "phpBB".... ;)
Last edited by FTH on 21 Dec 2011, 20:19, edited 1 time in total.


User avatar
Terr0r
BBCoder V
BBCoder V
Posts: 339
Joined: 03 May 2011, 22:47
BBCodes: 100
Location: The Netherlands

[Snippet] CSS3 Fading effect on Logo

Post by Terr0r » 21 Dec 2011, 20:12

Thanks for this one FTH looks very nice keep it up like that

Greets Terr0r
If you can't fix it with ducktape you ain't using enough
For my MODS and BBCodes or other things that I have made take a look here

User avatar
Terr0r
BBCoder V
BBCoder V
Posts: 339
Joined: 03 May 2011, 22:47
BBCodes: 100
Location: The Netherlands

[Snippet] CSS3 Fading effect on Logo

Post by Terr0r » 22 Dec 2011, 13:03

I have try this on my live forum board but I see no changing how is that possible

Greets Terr0r
If you can't fix it with ducktape you ain't using enough
For my MODS and BBCodes or other things that I have made take a look here

User avatar
martin123456
BBCoder VI
BBCoder VI
Posts: 763
Joined: 25 Jul 2011, 11:29
BBCodes: 34
Favourite MOD: Ban button
Location: Down south!

[Snippet] CSS3 Fading effect on Logo

Post by martin123456 » 22 Dec 2011, 13:03

Press F5 ;)

User avatar
darkonia
BBCoder II
BBCoder II
Posts: 57
Joined: 23 May 2011, 17:40
BBCodes: 35
Favourite BBCode: hs bbcode
Favourite MOD: dm video
Location: Munich

[Snippet] CSS3 Fading effect on Logo

Post by darkonia » 22 Dec 2011, 13:07

looks n1ce, thx work fine
Von Spielern für Spieler bietet Dir MMOG-Heaven genau das, was ein Spieler braucht. Bleibe ständig informiert, finde die neuesten MMORPGs, oder suche die frischesten News aus der Welt des Online Gamings auf MMOG-Heaven.


User avatar
Terr0r
BBCoder V
BBCoder V
Posts: 339
Joined: 03 May 2011, 22:47
BBCodes: 100
Location: The Netherlands

[Snippet] CSS3 Fading effect on Logo

Post by Terr0r » 22 Dec 2011, 13:07

It is all working I did add afther and not replace my bad

Greets Terr0r
If you can't fix it with ducktape you ain't using enough
For my MODS and BBCodes or other things that I have made take a look here

User avatar
Blackwolf
BBCoder IV
BBCoder IV
Posts: 272
Joined: 04 Dec 2010, 10:36
BBCodes: 101
Favourite BBCode: Dropcap
Favourite MOD: mchat
Location: Melbourne Australia

[Snippet] CSS3 Fading effect on Logo

Post by Blackwolf » 01 Jan 2012, 02:48

Great snippet FTH :)

I use ca_black....based on pro_silver.....None of the "find" edits are in my common.css....

Thoughts on where & how to add? :?

Added it to a friends site....awesome!! ( Made the header yesterday!) 8-)

Code: Select all

/* General proSilver Markup Styles
---------------------------------------- */

* {
-webkit-transition:all 250ms linear;
        -moz-transition:all 250ms linear;
        -o-transition:all 250ms linear;
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
	height: 100%;
	background-position: top left;
}

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 0;
	background-position: top left;
}

h1 {
	/* Forum name */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-right: 200px;
	color: #000;
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;
}

h2 {
	/* Forum header titles */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #3f3f3f;
	font-size: 2em;
	margin: 0.8em 0 0.2em 0;
}

h2.solo {
	margin-bottom: 1em;
}

h3 {
	/* Sub-headers (also used as post headers, but defined later) */
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 3px;
	padding-bottom: 2px;
	font-size: 1.05em;
	color: #989898;
	margin-top: 20px;
	background-position: bottom left;
	background-repeat: repeat-x;
}

h4 {
	/* Forum and topic list titles */
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Sans-serif;
	font-size: 1.3em;
}

p {
	line-height: 1.3em;
	font-size: 1.1em;
	margin-bottom: 1.5em;
}

img {
	border-width: 0;
}

hr {
	border: 0 none #FFFFFF;
	border-top: 1px solid #CCCCCC;
	height: 1px;
	margin: 5px 0;
	display: block;
	clear: both;
}

hr.dashed {
	border-top: 1px dashed #CCCCCC;
	margin: 10px 0;
}

hr.divider {
	display: none;
}

p.right {
	text-align: right;
}

/* Header/footer */
#header-wrapper {
    background-position: top left;
    background-repeat: repeat-x;
    /* #padding: 8px 10px 0; # Removed by Wildinc */
}
#header {
    background-position: top left;
    background-repeat: repeat-x;
}
#header-left {
    background-position: top left;
    background-repeat: no-repeat;
}
#header-right {
    background-position: top right;
    background-repeat: no-repeat;
    padding: 0 15px;
}
#header, #header-left, #header-right {
    min-height: 85px;
}
#logolink span { display: none; }

.header-clear, #footer-clear { clear: both; }

#content-wrapper { 
    background-position: top left;
    background-repeat: repeat-x;
    /*  padding: 0 10px; # Removed by Wildinc */
    margin: 0;
}
#content {
    padding: 0;
    margin: 0;
}

.topnav {
    margin: 0;
    padding: 0;
    background-position: top left;
    background-repeat: repeat-x;
    text-align: center;
    padding-top: 2px;
    height: 18px;
    border: solid 1px #000;
    border-width: 0 1px;
}

#footer, #footer span {
    display: block;
    height: 9px;
}
#footer span {
    background-position: top left;
    background-repeat: no-repeat;
    padding-left: 9px;
}
#footer span span {
    background-position: top right;
    background-repeat: no-repeat;
    padding-left: 0;
    padding-right: 9px;
}
#footer span span span {
    background-position: top left;
    background-repeat: repeat-x;
    padding: 0;
}

#copyrights {
	text-align: center;
	padding: 5px;
	font-size: 10px;
	line-height: 1.4em;
}
#copyrights a, #copyrights a:visited {
	text-decoration: none;
}
#copyrights a:hover, #copyrights a:active {
	text-decoration: underline;
}
#copyrights #affiliates a {
	text-decoration: underline;
}

#simple-wrap {
	padding: 6px 10px;
}

#page-body {
	padding: 5px 10px;
	clear: both;
    border: solid 1px #000;
    border-width: 0 1px;
}

#page-footer {
	clear: both;
}

#page-footer h3 {
	margin-top: 20px;
}

/* Search box
--------------------------------------------- */
#search-box {
	color: #FFFFFF;
	position: relative;
	margin-top: 5px;
	margin-right: 5px;
	display: block;
	float: right;
	text-align: right;
	white-space: nowrap; /* For Opera */
}

#search-box #keywords {
	width: 95px;
}

/* .button1 style defined later, just a few tweaks for the search button version */
#search-box input.button1 {
	padding: 1px 5px;
}

#search-box li {
	text-align: right;
	margin-top: 4px;
}

#search-box img {
	vertical-align: middle;
	margin-right: 3px;
}

/* Site description and logo */
#site-description {
	float: left;
	width: 70%;
}

#site-description h1 {
	margin-right: 0;
}

/* Horizontal lists
----------------------------------------*/
ul.linklist {
	display: block;
	margin: 0;
}

ul.linklist li {
	display: block;
	list-style-type: none;
	float: left;
	width: auto;
	margin-right: 5px;
	font-size: 1.1em;
	line-height: 2.2em;
}

ul.linklist li.rightside, p.rightside {
	float: right;
	margin-right: 0;
	margin-left: 5px;
	text-align: right;
}

ul.navlinks {
	font-weight: bold;
}

ul.navlinks li.rightside, ul.navlinks li.leftside {
    font-size: 1em;
    font-weight: normal;
    padding-top: 1px;
    margin-left: 0;
    margin-right: 0;
}

ul.leftside {
	float: left;
	margin-left: 0;
	margin-right: 5px;
	text-align: left;
}

ul.rightside {
	float: right;
	margin-left: 5px;
	margin-right: -5px;
	text-align: right;
}

li.row {
    background-position: top left;
    background-repeat: repeat-x;
}


/* Table styles
----------------------------------------*/
table.table1 {
	/* See tweaks.css */
}

#ucp-main table.table1 {
	padding: 2px;
}

table.table1 thead th {
	font-weight: normal;
	text-transform: uppercase;
	color: #FFFFFF;
	line-height: 1.3em;
	font-size: 1em;
	padding: 2px 3px;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}

table.table1 thead th span {
	padding-left: 7px;
}

table.table1 tbody tr {
	border: 1px solid #cfcfcf;
}

table.table1 td {
	color: #6a6a6a;
	font-size: 1.1em;
}

table.table1 tbody td {
	padding: 5px;
	border: 1px solid #FAFAFA;
}

table.table1 tbody th {
	padding: 5px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #000000;
	text-align: left;
	color: #333333;
	background-color: #FFFFFF;
}

/* Specific column styles */
table.table1 .name		{ text-align: left; }
table.table1 .posts		{ text-align: center !important; width: 7%; }
table.table1 .joined	{ text-align: left; width: 15%; }
table.table1 .active	{ text-align: left; width: 15%; }
table.table1 .mark		{ text-align: center; width: 7%; }
table.table1 .info		{ text-align: left; width: 30%; }
table.table1 .info div	{ width: 100%; white-space: normal; overflow: hidden; }
table.table1 .autocol	{ line-height: 2em; white-space: nowrap; }
table.table1 thead .autocol { padding-left: 1em; }

table.table1 span.rank-img {
	float: right;
	width: auto;
}

table.info td {
	padding: 3px;
}

table.info tbody th {
	padding: 3px;
	text-align: right;
	vertical-align: top;
	color: #000000;
	font-weight: normal;
}

.forumbg table.table1 {
	margin: 0 -2px -1px -1px;
}

/* Misc layout styles
---------------------------------------- */
/* column[1-2] styles are containers for two column layouts 
   Also see tweaks.css */
.column1 {
	float: left;
	clear: left;
	width: 49%;
}

.column2 {
	float: right;
	clear: right;
	width: 49%;
}

/* General classes for placing floating blocks */
.left-box {
	float: left;
	width: auto;
	text-align: left;
}

.right-box {
	float: right;
	width: auto;
	text-align: right;
}

dl.details {
	/*font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;*/
	font-size: 1.1em;
}

dl.details dt {
	float: left;
	clear: left;
	width: 30%;
	text-align: right;
	color: #000000;
	display: block;
}
dl.details dd {
	margin-left: 0;
	padding-left: 5px;
	margin-bottom: 5px;
	color: #828282;
	float: left;
	width: 65%;
}

/* Pagination
---------------------------------------- */
.pagination {
	height: 1%; /* IE tweak (holly hack) */
	width: auto;
	text-align: right;
	margin-top: 5px;
	float: right;
}

.pagination span.page-sep {
	display: none;
}

li.pagination {
	margin-top: 0;
}

.pagination strong, .pagination b {
	font-weight: normal;
}

.pagination span strong {
	padding: 0 2px;
	margin: 0 2px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #bfbfbf;
	border: 1px solid #bfbfbf;
	font-size: 0.9em;
}

.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active {
	font-weight: normal;
	text-decoration: none;
	color: #747474;
	margin: 0 2px;
	padding: 0 2px;
	background-color: #eeeeee;
	border: 1px solid #bababa;
	font-size: 0.9em;
	line-height: 1.5em;
}

.pagination span a:hover {
	border-color: #d2d2d2;
	background-color: #d2d2d2;
	color: #FFF;
	text-decoration: none;
}

.pagination img {
	vertical-align: middle;
}

/* Pagination in viewforum for multipage topics */
.row .pagination {
	display: block;
	float: right;
	width: auto;
	margin-top: 0;
	padding: 1px 0 1px 15px;
	font-size: 0.9em;
	background: none 0 50% no-repeat;
}

.row .pagination span a, li.pagination span a {
	background-color: #FFFFFF;
}

.row .pagination span a:hover, li.pagination span a:hover {
	background-color: #d2d2d2;
}

/* Miscellaneous styles
---------------------------------------- */
#forum-permissions {
	float: right;
	width: auto;
	padding-left: 5px;
	margin-left: 5px;
	margin-top: 10px;
	text-align: right;
}

.copyright {
	padding: 5px;
	text-align: center;
	color: #555555;
}

.small {
	font-size: 0.9em !important;
}

.titlespace {
	margin-bottom: 15px;
}

.headerspace {
	margin-top: 20px;
}

.error {
	color: #bcbcbc;
	font-weight: bold;
	font-size: 1em;
}

.reported {
	background-color: #f7f7f7;
}

li.reported:hover {
	background-color: #ececec;
}

div.rules {
	background-color: #ececec;
	color: #bcbcbc;
	margin: 10px 0;
	font-size: 1.1em;
}

div.rules ul, div.rules ol {
	margin-left: 20px;
}

p.rules {
	background-color: #ececec;
	background-image: none;
	padding: 5px;
}

p.rules img {
	vertical-align: middle;
}

p.rules a {
	vertical-align: middle;
	clear: both;
}

#top {
	position: absolute;
	top: -20px;
}

.clear {
	display: block;
	clear: both;
	font-size: 1px;
	line-height: 1px;
	background: transparent;
}
    .hat {
    background: url(http://i603.photobucket.com/albums/tt112/Blackwolf_06/cappellino.png);
    width: 47px;
    height: 47px;
    position: absolute;
    z-index: 1000;
    margin-left: -18px;
    margin-top: -5px;
    }
Ultimate Edition, Ultimate Edition Oz, Oz Unity

“We are Anonymous. We are Legion. We do not forgive. We do not forget. Expect us.”

User avatar
Blackwolf
BBCoder IV
BBCoder IV
Posts: 272
Joined: 04 Dec 2010, 10:36
BBCodes: 101
Favourite BBCode: Dropcap
Favourite MOD: mchat
Location: Melbourne Australia

[Snippet] CSS3 Fading effect on Logo

Post by Blackwolf » 04 Jan 2012, 21:54

BUMP.
:oops:
Ultimate Edition, Ultimate Edition Oz, Oz Unity

“We are Anonymous. We are Legion. We do not forgive. We do not forget. Expect us.”

User avatar
FTH
BBCoder III
BBCoder III
Posts: 124
Joined: 25 Nov 2011, 21:28
BBCodes: 10

[Snippet] CSS3 Fading effect on Logo

Post by FTH » 04 Jan 2012, 22:00

Could you send me your common.css or stylesheet.css if your style based on subsilver... please ;)

User avatar
FTH
BBCoder III
BBCoder III
Posts: 124
Joined: 25 Nov 2011, 21:28
BBCodes: 10

[Snippet] CSS3 Fading effect on Logo

Post by FTH » 04 Jan 2012, 22:13

Open file styles/ca_black/theme/common.css

Find :

Code: Select all

#logolink span { display: none; }
Add after :

Code: Select all

#logolink {
   opacity: 1;
   /* Firefox */
   -moz-transition-property: opacity;
   -moz-transition-duration: 1s;
   -moz-transition-delay: 0.2;
   /* WebKit */
   -webkit-transition-property: opacity;
   -webkit-transition-duration: 1s;
   -webkit-transition-delay: 0.2;
   /* Opera */
   -o-transition-property: opacity;
   -o-transition-duration: 1s;
   -o-transition-delay: 0.2;
   /* Standard */
   transition-property: opacity;
   transition-duration: 1s;
   transition-delay: 0.2;
}

a#logolink:hover {
   text-decoration: none;
   opacity: 0.4;
}