WordPress.com Forums » Tag: CSS3 - Recent Posts

squarepixel on "@-rules"

squarepixel — Wed, 23 Jan 2013 17:16:59 +0000

Applying some custom design for a specific post should be pretty easy.

If you look at the source code of your page, and search for the <body> tag, you will see that it has some useful CSS classes, such as:

You can now style your specific content like this:


.postid-321 .element-I-want-to-change { background: yellow; color: black; }
If you want to make page-specific changes, this method should work fine.



ofrag on "@-rules"
ofrag — Tue, 22 Jan 2013 21:18:01 +0000
The end goal was to make page specific modifications. So what you are proposing will work. 


.pagetype > .element-I-want-to-change


Now I'm just wondering what I would do if I had to change a specific post that shares a layout with other pages...
Currently AFIK the only browser that supports it is firefox.




designsimply on "@-rules"
designsimply — Tue, 22 Jan 2013 17:37:13 +0000
I read that @document has been deferred to CSS4:

http://dev.w3.org/csswg/css3-conditional/#changes
I also couldn't find much info on browser support, so I'm not sure how many browsers currently even support it.
What is your end goal? Are you trying to target specific types of pages? If so, WordPress.com applies body classes to all of the different page types and those can be used to target various page types.




ofrag on "@-rules"
ofrag — Mon, 14 Jan 2013 18:45:50 +0000
Trying to use @document{} rule set and on update the system strips out the nested rule. 
Example:

@document url("http://www.w3.org/Style/CSS/") {
  #summary { background: yellow; color: black}
}
on save result:

@document url("http://www.w3.org/Style/CSS/") {
}
}
Any pointers?




designsimply on "SCROLLING IMAGES ON HEADER"
designsimply — Fri, 07 Dec 2012 02:18:49 +0000
I have the gridspace theme and wanted to customize my layout so that I have four infinitely scrolling images at the very top, replacing the one current image.
That's a pretty freaking awesome tutorial. Here's how you can take the example from http://designshack.net/articles/css/infinitephotobanner/ and use it on your blog"
First, you'll need to add HTML. Add it to a text widget in the sidebar. Here is some example HTML you can use based on the tutorial and using some random images from your header and latest posts: 

	
	
	

To add more images, you would just add more "img" lines with different image links in them.
After that, copy the following CSS (only slightly modified from the tutorial) into your Appearance → Custom Design → CSS editor and click the Preview button:
.photobanner {
	height: 563px;
	margin-bottom: 80px;
	position: absolute;
	top: 0;
	width: 3550px;
}

/*keyframe animations*/
.photobanner .first {
	-webkit-animation: bannermove 30s linear infinite;
	-moz-animation: bannermove 30s linear infinite;
	-ms-animation: bannermove 30s linear infinite;
	-o-animation: bannermove 30s linear infinite;
	animation: bannermove 30s linear infinite;
}

@keyframes bannermove {
	0% {
		margin-left: 0;
	}

	100% {
		margin-left: -2125px;
	}
}

@-moz-keyframes bannermove {
	0% {
		margin-left: 0;
	}

	100% {
		margin-left: -2125px;
	}
}

@-webkit-keyframes bannermove {
	0% {
		margin-left: 0;
	}

	100% {
		margin-left: -2125px;
	}
}

@-ms-keyframes bannermove {
	0% {
		margin-left: 0;
	}

	100% {
		margin-left: -2125px;
	}
}

@-o-keyframes bannermove {
}

100% {
	margin-left: -2125px;
}
}

.photobanner img {
	max-height: 563px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
}

.photobanner img:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	cursor: pointer;
	-webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
	box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
That's pushing the edges of what CSS can do these days. Pretty neat! Note that these CSS3 rules will only work in the latest browsers, and in the case of Internet Explorer, the animations and transitions won't work in any version so far except IE10. You can refer to these charts for reference:
* http://caniuse.com/#feat=css-animation

* http://caniuse.com/#feat=transforms2d

* http://caniuse.com/#search=transition
Aside: Everyone has access to the stylesheets. CSS is visible by looking at the links in the header code so there's no need to post entire sets of code in the forums and also anyone that knows how to work with CSS can see them. :)




timethief on "SCROLLING IMAGES ON HEADER"
timethief — Mon, 19 Nov 2012 01:03:04 +0000
Staff have access to the Stylesheet. Staff are the  ones who are going to help you and that's not likely to be any time soon as there is a considerable backlog of bloggers waiting who posted before you did. I think you are more likely to be looking at days than hours when it comes to getting CSS editing help.




shit101 on "SCROLLING IMAGES ON HEADER"
shit101 — Mon, 19 Nov 2012 00:59:35 +0000
Yes i understand, but since you do not have the access to the style sheet, I'm just posting it here for people to see.




timethief on "SCROLLING IMAGES ON HEADER"
timethief — Mon, 19 Nov 2012 00:57:16 +0000
Why did you post that here?  When you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing.




shit101 on "SCROLLING IMAGES ON HEADER"
shit101 — Mon, 19 Nov 2012 00:43:37 +0000
[UPDATE: Code removed by staff because it was too much for one forum reply. It's better to link to the CSS if it's long or just post CSS relevant to the question.]




timethief on "SCROLLING IMAGES ON HEADER"
timethief — Mon, 19 Nov 2012 00:41:13 +0000
Gridspace is a premium theme. We Volunteers answering questions on this support forum do not have access to premium themes.  Staff support comes with the upgrade but there is a backlog of folks waiting. 
Read-access to the premium themes forum is now open to all users so you can search to see if your question has been previously asked and answered there. The premium theme forums are at http://premium-themes.forums.wordpress.com/ with separate sections for each theme. http://premium-themes.forums.wordpress.com/forum/gridspace
If you are not successful when searching there is a link for the specific Premium Theme support forum for your theme under Appearance -> Themes in your blog’s Dashboard, but do note that the premium theme must be active and you must be signed in as the user who purchased it in order to see it and post to it. 
Theme description:  http://theme.wordpress.com/themes/gridspace/

Live demo site:  http://gridspacedemo.wordpress.com/




shit101 on "SCROLLING IMAGES ON HEADER"
shit101 — Mon, 19 Nov 2012 00:37:29 +0000
New question would be what would be the CSS for scrolling images on the header.




timethief on "SCROLLING IMAGES ON HEADER"
timethief — Mon, 19 Nov 2012 00:34:08 +0000
What html should I input and where should I input it under?
Does the Custom Design upgrade let me edit HTML?

No. The Custom Design upgrade allows you to edit fonts and CSS only. You can change the appearance of a theme, but not its HTML markup, PHP code, or content.   Read the full section here  http://en.support.wordpress.com/custom-design/#frequently-asked-questions 



shit101 on "SCROLLING IMAGES ON HEADER"
shit101 — Mon, 19 Nov 2012 00:30:31 +0000
I have the gridspace theme and wanted to customize my layout so that I have four infinitely scrolling images at the very top, replacing the one current image. 
This is the gridspace css sheet legend

 * 1.   Resets

 * 2.   Structure

 * 3.   Fonts

 * 4.   Header

 * 5.   Menu

 * 6.   Content

 * 7.   Portfolio Grid/List

 * 8.   Post Formats

 * 9.   Images & Media

 * 10.  Forms

 * 11.  Comments

 * 12.  Tables

 * 13.  Sidebar & Widgets

 * 14.  Footer

 * 15.  Buttons

 * 16.  Messages

 * 17.  Clear Floats

 * 18.  Icons

 * 19.  WordPress.com style overrides

 * 20.  Responsiveness: Tablets

 * 21.  Responsiveness: Mobile

 * 22.  Retina Icons
What html should I input and where should I input it under?

I tried using following the instructions to this blog http://designshack.net/articles/css/infinitephotobanner/ but it just scrolls the entire blog content.




designsimply on "Striped tags"
designsimply — Thu, 30 Aug 2012 18:11:42 +0000
object-fit and object-position have been added in for WordPress.com, and they will also be available in Custom CSS in the next Jetpack release.
Cheers.




designsimply on "Striped tags"
designsimply — Wed, 29 Aug 2012 17:23:22 +0000
Wait, I assumed you're using WordPress.org, but you might not be :)
Well, either way, more soon…




designsimply on "Striped tags"
designsimply — Wed, 29 Aug 2012 17:22:21 +0000
Hi Austin :)
I'll see what I can find out about getting them added. Note that, typically, it's good for Jetpack plugin issues to be posted at http://wordpress.org/support/plugin/jetpack instead of here on WordPress.com (just for future reference).
More soon.




austyfrosty on "Striped tags"
austyfrosty — Mon, 13 Aug 2012 23:41:18 +0000
Would be awesome if the CSS customizer allowed more CSS3 features.
example:

object-fit: contain; /*'fill' or 'cover'*/
object-position: 50%;
It gets striped.




timethief on "Side bar and Footer mixing"
timethief — Mon, 02 Jul 2012 23:06:20 +0000
You're welcome.




rhodderz on "Side bar and Footer mixing"
rhodderz — Mon, 02 Jul 2012 23:04:04 +0000
ah thank you and sorry did not realize the difference.




timethief on "Side bar and Footer mixing"
timethief — Mon, 02 Jul 2012 22:57:04 +0000
We cannot help you here at WordPress.com with that site as it’s not being hosted by WordPress.com and we run on different software. You aren't reffering to a free hosted WordPress.com blog. You have not paid WordPress.com for a custom design upgrade and you cannot get any CSS editing help here at all. 
This is the correct forum for your software http://wordpress.ORG/support/

WordPress.com vs WordPress.org: The Differences

http://support.wordpress.com/com-vs-org/

Best wishes with your site.




rhodderz on "Side bar and Footer mixing"
rhodderz — Mon, 02 Jul 2012 22:53:41 +0000
Also may someone move this to CSS customization as i placed this in the wrong section, thanks again.




rhodderz on "Side bar and Footer mixing"
rhodderz — Mon, 02 Jul 2012 22:52:06 +0000
Hi im making a theme for a 100 day challenge me a nd a few friends are doing (based on the one Virgin media are doing) and i have drawn out my design but on the sidebar i want to have a shadow on the left (connection to the main body) and a shadow on the footer (again the area connecting to the Main body) but i want the shadow curved and to connect where the sidebar and footer meet (curve round the corner). Is this possible with CSS3 or do i have to go with my original plan of using a sliced Image?

I will upload my badly drawn design if you want.
Thanks in advance.




supportbot on "Side bar and Footer mixing"
supportbot — Mon, 02 Jul 2012 22:52:06 +0000
The blog you specified at 100day.rhodderz.com does not appear to be hosted at WordPress.com.
This support forum is for blogs hosted at WordPress.com. If your question is about a self-hosted WordPress blog then you'll find help at the WordPress.org forums.
If you don't understand the difference between WordPress.com and WordPress.org, you may find this information helpful.
If you forgot to include a link to your blog, you can reply and include it below.  It'll help people to answer your question.
This is an automated message.




designsimply on "Multiple Backgrounds Stripped"
designsimply — Tue, 17 Apr 2012 23:26:47 +0000
I spoke too soon. It appears the url() function is getting removed when it shouldn't if you use multiple background setggins in one property. I've added that to the bug report. Sorry I missed it before.




ashkyd on "Multiple Backgrounds Stripped"
ashkyd — Tue, 17 Apr 2012 23:11:10 +0000
Ah, that makes sense. Thanks for the info. :)




designsimply on "Multiple Backgrounds Stripped"
designsimply — Tue, 17 Apr 2012 23:08:37 +0000
Thanks for reporting this. There's a bug in the CSS parser. I have reported the bug.
In the mean time, you can work around the issue by removing all the spaces between the list of elements and it should work.
background:url(fancybackground.png) repeat-x,url(myfile.png) no-repeat left top fixed,black;
}
Could you try that out and let me know if you have any trouble with it?
Note that you should make sure to use full URLs starting with http:// inside the url() function in the CSS editor at WordPress.com.




timethief on "Multiple Backgrounds Stripped"
timethief — Tue, 17 Apr 2012 22:40:51 +0000
All CSS editing is theme specific and the upgrade does come with Staff support. Staff are able to enter private blogs and see what's going on but the rest of us cannot. I have flagged this thread so it will be moved to the CSS Forum.




ashkyd on "Multiple Backgrounds Stripped"
ashkyd — Tue, 17 Apr 2012 22:37:36 +0000
Thanks for your prompy reply. I believe this is in the correct spot as I am actually referring to the "Custom Design" upgrade on the wordpress.com hosted service.
The site I am currently working on is set to private, so I have not provided a link. Sorry for any confusion. :)




timethief on "Multiple Backgrounds Stripped"
timethief — Tue, 17 Apr 2012 22:34:05 +0000
Good day to you,

I’m sorry to report that you have accidentally posted to the wrong support forum. We cannot help you here at WordPress.com with that site as it’s not being hosted by WordPress.com and we run on different software. This is the correct forum for your software http://wordpress.ORG/support/

WordPress.com vs WordPress.org: The Differences

http://support.wordpress.com/com-vs-org/

Best wishes with your site.




ashkyd on "Multiple Backgrounds Stripped"
ashkyd — Tue, 17 Apr 2012 22:32:14 +0000
I've noticed when trying to use multiple backgrounds with a fallback for older browsers, the multiple background url(s) are being stripped.
Take the following, for instance:


.test{

  /* Fallback for older browsers */

  background: black url(myfile.png) no-repeat left top fixed;

  /* Newer, CSS3 browsers */

  background:

    url(fancybackground.png) repeat-x,

    url(myfile.png) no-repeat left top fixed,

    black;

}


Once processed by wordpress.com, it ends up as:



.test {

	background:black url('myfile.png') no-repeat left top fixed;

	background:repeat-x, no-repeat left top fixed, black;

}


The outputted code results in the desired fallback behaviour for older browsers, but a plain black background with no image at all in modern browsers. It's a bit annoying.
There is a workaround, and that is to specify the fallback as longhand:



.test{

  /* Fallback for older browsers */

  background-color:black;

  background-image: url(myfile.png);

  background-repeat: no-repeat;

  background-position: left top;

  background-attachment: fixed;

  /* Newer, CSS3 browsers */

  background:

    url(fancybackground.png) repeat-x,

    url(myfile.png) no-repeat left top fixed,

    black;

}


It would still be nice if this could be resolved in the next version of the CSS parsing whatsit. :)