Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

CSS Transitions working when inside CSS editor, but not on the actual website

  1. andreasimunic
    Member

    Hello,

    Today I tried editing my website with CSS (the only reason I bought Premium acc). What I did in wordpress was editing transitions properties:

    transition: all .6s ease-out 0s;
    -webkit-transition: all .6s ease-out 0s;
    -moz-transition: all .6s ease-out 0s;

    They do work while I'm in the CSS editor and all seems fine. But once I save this CSS configuration and try opening my http://www.squaremileofstyle.com there are no transitions working. So I head back to my CSS editor and find the following:

    transition: all .6s ease-out 0;
    -webkit-transition: all .6s ease-out 0;
    -moz-transition: all .6s ease-out 0;

    If you notice, CSS editor erased 's' as a 'second (in time)' from the last 0. It was supposed to be '0s' and not '0'. Please let me know how this can be fixed so I could have proper and modern blog :)

    Thanks in advance,
    Andrea

    The blog I need help with is squaremileofstyle.com.

  2. thesacredpath
    Happiness Engineer

    Hi Andrea, I'm not seeing that CSS in your custom CSS. We would need to know what HTML element you wish to apply that to in order to figure out why it is not working.

  3. onetimepad
    Member

    what browser are you using? I ask because my text entry regarding a css/ html dropcap is being re-written when I’m using Safari....? not problem for years ....but now.

  4. thesacredpath
    Happiness Engineer

    @onetimepad, this thread is about the Sela theme and I don't see a site associated with your username using Sela. Can you give us a link to the site you are talking about?

  5. andreasimunic
    Member

    Hello,

    This is my custom CSS before I click "Save & Publish":

    #text-7 > .textwidget {
	text-align: center;
}

#blog_subscription-3 > #subscribe-blog {
	text-align: center;
}

.widget_wpcom_social_media_icons_widget .genericon {
	font-size: 2.5em;
	overflow: hidden;
	white-space: nowrap;
}

#wpcom_social_media_icons_widget-2 {
	text-align: center;
}

#text-5 > .textwidget {
	text-align: center;
}

#secondary > aside {
	margin: 0 0 15px;
	padding: 0 0 15px;
	border-bottom: 1px solid rgba(0,0,0,0.3);
}

.site-branding a + .site-title {
	margin-top: 0;
}

.site-branding, .site-navigation {
	padding-top: 20px;
}

.site-title > a {
	color: #000;
	font-weight: 300;
	text-shadow: 1px 1px #fff;
}

.wf-active .site-description {
	color: #000;
	font-weight: 300;
	text-shadow: 1px 1px #fff;
}

.site-branding {
	background-color: #fff;
}

body {
	background-color: #fff;
}

.site-logo {
	transition: all .6s ease-out 0s;
	-webkit-transition: all .6s ease-out 0s;
	-moz-transition: all .6s ease-out 0s;
}

.site-logo:hover {
	opacity: .7;
}

.widget_author_grid > ul > li {
	text-align: center;
}

.widget_author_grid .avatar {
	margin: auto;
}

.entry-meta {
	text-align: center;
}

.entry-content {
	text-align: justify;
}

.entry-title {
	text-align: center;
	transition: all .6s ease-out 0s;
	-webkit-transition: all .6s ease-out 0s;
	-moz-transition: all .6s ease-out 0s;
}

.entry-title:hover {
	background-color: rgba(128,203,189,0.1);
}

.entry-title > a {
	color: #d77e91;
}

.entry-title:hover > a {
	color: rgba(164,218,208,1);
}

.entry-meta > span {
	padding: 5px 8px;
	margin-right: 2px;
}

.entry-meta > span > a {
	text-align: center;
	margin-right: ;
	color: #000;
	background-color: rgba(116,204,209,0.2);
	border-radius: 3px;
	padding: 5px 8px;
	transition: all .6s ease-out 0s;
	-webkit-transition: all .6s ease-out 0s;
	-moz-transition: all .6s ease-out 0s;
	overflow: hidden;
	white-space: nowrap;
}

.entry-meta > span > a:hover {
	color: #fff;
	background-color: rgba(116,204,209,0.6);
}

.main-navigation, button {
	background-color: #80cbbd;
}

    And this is what I get when I click "Save & Publish", close the editor and open it again (this is also what is put on the actual website on http://www.squaremileofstyle.com):

    #text-7 > .textwidget {
	text-align: center;
}

#blog_subscription-3 > #subscribe-blog {
	text-align: center;
}

.widget_wpcom_social_media_icons_widget .genericon {
	font-size: 2.5em;
	overflow: hidden;
	white-space: nowrap;
}

#wpcom_social_media_icons_widget-2 {
	text-align: center;
}

#text-5 > .textwidget {
	text-align: center;
}

#secondary > aside {
	margin: 0 0 15px;
	padding: 0 0 15px;
	border-bottom: 1px solid rgba(0,0,0,0.3);
}

.site-branding a + .site-title {
	margin-top: 0;
}

.site-branding, .site-navigation {
	padding-top: 20px;
}

.site-title > a {
	color: #000;
	font-weight: 300;
	text-shadow: 1px 1px #fff;
}

.wf-active .site-description {
	color: #000;
	font-weight: 300;
	text-shadow: 1px 1px #fff;
}

.site-branding {
	background-color: #fff;
}

body {
	background-color: #fff;
}

.site-logo {
	transition: all .6s ease-out 0;
	-webkit-transition: all .6s ease-out 0;
	-moz-transition: all .6s ease-out 0;
}

.site-logo:hover {
	opacity: .7;
}

.widget_author_grid > ul > li {
	text-align: center;
}

.widget_author_grid .avatar {
	margin: auto;
}

.entry-meta {
	text-align: center;
}

.entry-content {
	text-align: justify;
}

.entry-title {
	text-align: center;
	transition: all .6s ease-out 0;
	-webkit-transition: all .6s ease-out 0;
	-moz-transition: all .6s ease-out 0;
}

.entry-title:hover {
	background-color: rgba(128,203,189,0.1);
}

.entry-title > a {
	color: #d77e91;
}

.entry-title:hover > a {
	color: rgba(164,218,208,1);
}

.entry-meta > span {
	padding: 5px 8px;
	margin-right: 2px;
}

.entry-meta > span > a {
	text-align: center;
	margin-right: ;
	color: #000;
	background-color: rgba(116,204,209,0.2);
	border-radius: 3px;
	padding: 5px 8px;
	transition: all .6s ease-out 0;
	-webkit-transition: all .6s ease-out 0;
	-moz-transition: all .6s ease-out 0;
	overflow: hidden;
	white-space: nowrap;
}

.entry-meta > span > a:hover {
	color: #fff;
	background-color: rgba(116,204,209,0.6);
}

.main-navigation, button {
	background-color: #80cbbd;
}

    Notice how CSS transitions are edited in the way they cannot work

  6. thesacredpath
    Happiness Engineer

    I've compared the two blocks of code you have above, and the only thing I see is that on the ease-out, the value is changed to 0 instead of 0s, which is normal with CSS. Example, on margins and paddings, 0 instead of 0px.

    If I've missed something in my review, perhaps let's take one specific CSS rule as an example and I'll see if I can figure out what is happening.

  7. andreasimunic
    Member

    You can take for example the logo itself. But why would then transitions work before I click "Save & Publish" and close the CSS editor?

    .site-logo {
	transition: all .6s ease-out 0;
	-webkit-transition: all .6s ease-out 0;
	-moz-transition: all .6s ease-out 0;
}

  8. andreasimunic
    Member

    Also, you can try opening Google Developer tools and you will find out that transitions do not work without specifying the measure unit (in this case "s" for "second"). Try it out yourself:

    Open Developer Tools > Console > s2.wp.com > custom.css > chane .site-logo to have "s" after all 0 and you will see the transition once you hover over the logo :)
    Here is the link to it: https://s2.wp.com/?custom-css=1&csblog=6s865&cscache=6&csrev=34

  9. thesacredpath
    Happiness Engineer

    In the CSS rule you give above, there aren't any style declarations for the transition to work on. Something like the following would work and transition a blue background for the site logo.

    .site-logo {
	background-color: blue;
	transition:all .6s ease-out 0;
	-webkit-transition:all .6s ease-out 0;
	-moz-transition:all .6s ease-out 0
}

  10. thesacredpath
    Happiness Engineer

    The above rule works for me in Google Developer and turns the background blue on the site logo.

You must log in to post.

About this Topic

Tags