Joomla Templates Club 406,261 posts

[abdullah canipek Friend abdullah canipekJoin date: November 2014Posts: 133Downloads:32Uploads:22 Thanks: 52 Thanked: 1 times in 1 posts]

#200713

Hi,
I want to use image logo and text logo together but without losing image logo spin attribute (webkit-transition)?

If I choose text logo option small “S” logo no spin 🙁

Regards.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#546954

Hi,

Could you please provide your site url so I can take a look first ?

1 user says Thank You to Adam M for this useful post

1. abdullah canipek

[abdullah canipek Friend abdullah canipekJoin date: November 2014Posts: 133Downloads:32Uploads:22 Thanks: 52 Thanked: 1 times in 1 posts]

#546965

Hi Adam,
I m working local 🙁 but i can load it on a test server.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#547086

Hi,

You can open file root_folder/templates/ja_sugite/css/custom.css (if you don’t have this file, just create a new one) then add this code :

.logo-text {
background: none;
position: relative;
}
.logo-text:before {
left: 0;
content: "";
width: 60px;
height: 60px;
position: absolute;
background: url("../images/logo.png") center center no-repeat;
-webkit-transition: all 0.45s;
-o-transition: all 0.45s;
transition: all 0.45s;
}
.logo-text:hover:before {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

save your file and check the result.

1 user says Thank You to Adam M for this useful post

1. abdullah canipek

[abdullah canipek Friend abdullah canipekJoin date: November 2014Posts: 133Downloads:32Uploads:22 Thanks: 52 Thanked: 1 times in 1 posts]

#547202

Thank you very much Adam,
you inspire me 🙂

i have solved my problem so;

.logo-image{
/* add this code */

width:270px;
background: url(“../../../images/gkhn.png”) no-repeat left center !important;
}

and

.logo a {
/* add this code */
width: 270px;
}

also i designed a logo called gkhn.png (for the text thing) , dimensions is 270*84px and of course leave it blank left side for the Spinning “S” logo.

When i load this site on a server then i will send you a link 🙂

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#547267

Hi,

Glad to hear that you managed to sort it out. I’m going to mark this thread as Solved for now unless you have another question or need further assistance.

1 user says Thank You to Adam M for this useful post

1. abdullah canipek

[Author]

Posts