Illustratr theme, custom content width help

  • Unknown's avatar
    thoughtsnrumblings · Member ·

    Hello, I’m hoping someone here knows how help me the CSS to make my site theme respect the widths I enter for embedded videos. I’m using the Illustratr theme which forces embedded videos to stretch to the template width. I’ve tried using this code to override that, which it does, but doesn’t allow for various embedded widths on different portfolio project pages. In this case, videos are all changed to a width of 770px:

    @media screen and (min-width: 1220px) {
    .portfolio-entry .video-wrapper,
    .portfolio-entry .portfolio-gallery {
    margin-left: -0px;
    width: 770px;
    }
    }

    Is there CSS that forces the theme to respect embedded video shortcode widths in general, or CSS that targets individual portfolio pages allowing me to specify different widths on different pages in the code?

    Thanks for any help!

    The blog I need help with is: (visible only to logged in users)

  • kathrynwp · Staff ·

    Hi there, could you try this instead of your current custom CSS and let me know if it accomplishes what you’re after?

    @media screen and (min-width: 1220px) {
	.jetpack-portfolio .entry-content > .video-wrapper {
		width: 770px;
                margin: 0 auto; /* include this line if you'd like the video centered */
	}
}

    I tested this with the following Vimeo embed code (no shortcode needed) on my test site and it seems to work. 

    http://vimeo.com/39023468

    Let me know how it goes.

  • Unknown's avatar
    thoughtsnrumblings · Member ·

    Thanks for looking into this.

    That code works to override the theme width, but I’m trying to achieve different embedded video widths on different portfolio project pages and the CSS seems to make one width universal on every page.

    These are the widths on different pages I’m trying to achieve
    770px width:
    http://theofficialauthorizedwebsiteofbrianalexander.wordpress.com/portfolio/greatcarolcomeback/
    http://theofficialauthorizedwebsiteofbrianalexander.wordpress.com/portfolio/webbyawards/
    520px width:
    http://theofficialauthorizedwebsiteofbrianalexander.wordpress.com/portfolio/macys-jewelry/
    480px width:
    http://theofficialauthorizedwebsiteofbrianalexander.wordpress.com/portfolio/windex/

    These vimeo shortcodes would normal achieve these different widths, but the theme doesn’t respect embedded vimeo shortcodes and needs customized CSS to override it.

    [vimeo http://www.vimeo.com/43953543 w=770; h=434]
    [vimeo http://www.vimeo.com/44019013 w=520; h=390]
    [vimeo http://www.vimeo.com/44771248 w=480; h=360]

    So I don’t know if CSS that targets specific portfolio pages for different widths or CSS that makes the theme respect the embedded vimeo sizing shortcodes is doable?

    Thanks again for your help!

  • kathrynwp · Staff ·

    My colleague Sheri (designsimply) helped troubleshoot this with me and it looks like there is indeed a glitch with Vimeo embeds in Illustrar, as you suspected. I’ve reported this bug to our developers so they can have a look at fixing it up.

    In the meantime, you could try this custom CSS:

    @media screen and (min-width: 1220px) {
	.single-jetpack-portfolio .embed-vimeo iframe {
		width: 770px !important;
                height: 434px !important;
                margin: 0 auto; /* include this line if you'd like the videos centered */
	}
	.postid-2978 .embed-vimeo iframe, .postid-xxxx .embed-vimeo iframe {
		width: 520px !important;
                height: 390px !important;
	}

	.postid-2983 .embed-vimeo iframe, .postid-xxxx .embed-vimeo iframe {
		width: 480px !important;
                height: 360px  !important;
	}

}

    You can find the post ID for each portfolio post by looking in the address bar when you’re editing the project, or you’ll also see it on the body tag if you view the browser source on a project.

    The way this code should work is it sets the default Vimeo embed size to 770px by 434px on individual portfolio project pages. Specific projects where you want to override that default are then specified below the default setting. You can separate multiple specific projects by a comma, as I’ve shown you in the example above. Just replace xxxx with the real post ID.

    Let me know if this works as you’d like and we’ll keep you posted once the bug is fixed.

  • Unknown's avatar
    thoughtsnrumblings · Member ·

    Sweet, that worked great. But yea, let me know when the bug is fixed.

    Thanks!

  • thomasguillot · Staff ·

    Hi there,

    The issue has now been fixed :)
    Sorry for the inconvinence.

    Cheers,
    Thomas

  • The topic ‘Illustratr theme, custom content width help’ is closed to new replies.