Adding CSS to my premium theme

  • Author
    Posts
  • #1258172

    orca365
    Member

    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.

    #1258353

    kraftbj
    Staff

    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!

    #1258369

    orca365
    Member

    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

    #1258370

    kraftbj
    Staff

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

    #1258372

    justjennifer
    Moderator

    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/

    #1258373

    justjennifer
    Moderator

    If can, meaning “you can”

    #1258378

    kraftbj
    Staff

    @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.

    #1258381

    orca365
    Member

    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

    #1258413

    justjennifer
    Moderator

    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. :)

    #1258497

    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).

    #1258498

    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

The topic ‘Adding CSS to my premium theme’ is closed to new replies.