Need help? Check out our Support site, then


Adding CSS to my premium theme

  1. Hi there.
    I've been told by the theme author that i need to add the following piece of CSS to ensure video plays at 100% of the thumbnail rather than as it does presently (in chrome and ie9) shrink to a tiny player when one triggers the video to start. The CSS to be added is:

    iframe,object,embed {
    width: 100%;
    display: block;
    }

    Where should I add this? I have added it to the basic CSS dialog window offered to me in the customisation view, but it doesn't seem to make any difference.

    Thanks.

    The blog I need help with is samdoust.com.

  2. I think you need to add a height:100%; as well, thus:

    iframe,object,embed {
    width: 100%;
    height: 100%;
    display: block;
    }

    In my testing, that results in the video playing in the full space of the thumbnail (in Chrome, latest stable on Ubuntu).

    Please do let me know if that works for you as intended or not!

  3. Hi kraftbj.

    I still need to know where to actually add the code - I'm not sure where it goes?

    Can you please advise? Many thanks

  4. My apologies. The custom CSS area in Appearance->Customize should work.

  5. iframe is not supported on WordPress.com. Please see this http://en.support.wordpress.com/code/

    If can use a shortcode to embed a video from these sources http://en.support.wordpress.com/videos/

    Info on adjusting the width of a shortcode object can be found in the Support docs. This is not something you'd change with CSS.

    Having said that, however, you make changes by adding to the CSS stylesheet, not replacing the stylesheet. See here:
    http://en.support.wordpress.com/custom-design/editing-css/
    and here
    http://wpbtips.wordpress.com/2013/02/21/where-is-the-theme-css-and-how-do-i-edit-it/

  6. If can, meaning "you can"

  7. @justjennifer - The OP's issue is related to theme's CSS not letting the embed, etc placed by the shortcode fill the entire space, not directly placing those tags or shortcode width per se.

    Thanks for the Editing CSS documentation. I need to get more familiar with the great amount of docs on wordpress.com.

    @orca - Please do let us know if you need more assistance! I hope this clears it up for you.

  8. Thank you both for helping - very much appreciated.

    Kraftbj, I just added the height value in the CSS area (had initially added the rest of that iframe in the CSS dialog, but adding your suggestion of height has worked a treat).

    Am new to WordPress and used to seeing a bit more of the code - as it stands, I can't see the rest of the CSS... Still, it's working now and that's great.

    Thank you both again!

    Sam

  9. Since iframes are not supported here, I am curious why adding anything to the CSS would work.

    @orca365 Your have the VideoPress upgrade. Information about embedding VideoPress videos can be found here http://en.support.wordpress.com/videopress/ and specifically concerning the width/height of the player under "Can I change the size of the VideoPress player?"

    Information on using the Photographer theme in general can be found here: http://theme.wordpress.com/themes/photographer/ and most importantly read the additional information by clicking that Support button on the right sidebar.

    Hope that helps to clarify and not confuse the matter. :)

  10. Since iframes are not supported here, I am curious why adding anything to the CSS would work.

    Well, it's not supported to add your own iframes, but iframes are used by various widgets (i.e. video players, likes, FB, other things) and if those are in place, you can use custom CSS to adjust some things about them—like the height in kraftbj's example—but not the things inside them since those are controlled by a different domain. It's a bit tricky!

    Think of iframes (or code) that's not allowed as things blog owners cannot add but that can be used by the themes and widgets that are installed for everyone (because those have been code reviewed before being added and are maintained by WordPress.com developers).

  11. I've been told by the theme author that i need to add the following piece of CSS to ensure video plays at 100% of the thumbnail rather than as it does presently (in chrome and ie9) shrink to a tiny player when one triggers the video to start.

    Actually, if the videos aren't playing at 100%, I don't think you should have to add your own CSS to fix that. It sounds like it a theme bug, and I asked about it in the other thread where you posted to see what I can find out:
    http://premium-themes.forums.wordpress.com/topic/video-presentation-problem?replies=6#post-28496

Topic Closed

This topic has been closed to new replies.

About this Topic