Background image and video player

  • rodeboy

    #8854

    I am putting a site together at http://www.tonycleary.com for a customer.

    On the home page I have put the menu down the left in a widget and the content down the right together with a background image of a microphone. Ideally my customer would like this background image to go all the way to the top and bottom, and then over to the right. Is this possible please?

    You may feel that my construction of the layout is not best to achieve this, so feel free to comment!

    In addition I will need to host some videos on the site (as well as linking to some on YouTube, which I am okay with) Is there a recommended plugin that works well with Graphene (and Graphene Mobile Neo as this is included)? Finally which is the best format to have the videos in? This is my first site with videos and if there is a proven combination that works with the theme I am happy to take advice.

    Thanks as always,

    Chris

    rodeboy

    #42297

    Any thoughts on this please? I am being chased by my customer!!

    Thanks, Chris

    Mod

    Kenneth John Odle

    #42298
    Quote:
    Ideally my customer would like this background image to go all the way to the top and bottom, and then over to the right. Is this possible please?

    Have you tried adding that picture (or an appropriately sized one) to the #content area?

    Quote:
    You may feel that my construction of the layout is not best to achieve this, so feel free to comment!

    I’ve never cared for a main menu on the bottom, because its position shifts around depending on page content and confuses some users.

    Quote:
    Is there a recommended plugin that works well with Graphene (and Graphene Mobile Neo as this is included)? Finally which is the best format to have the videos in?

    Not that I’m aware of. WordPress supports o-embed, so of course, you’re covered with YouTube. For other videos, these may help:

    https://codex.wordpress.org/Embeds

    https://codex.wordpress.org/Video_Shortcode

    As far as I can tell, it really is more of a WordPress issue than a theme issue, but for what it’s worth, I’ve published audio using the Blubrry PowerPress Podcasting plugin:

    http://wordpress.org/plugins/powerpress/

    Prasanna SP

    #42299
    Quote:
    ….Ideally my customer would like this background image to go all the way to the top and bottom, and then over to the right. Is this possible please?

    Like this?

    2qBSJ2h.png

    body {
    background-image: url("http://www.tonycleary.com/wp-content/uploads/2014/03/home-background.jpg") !important;
    }
    * {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    }

    rodeboy

    #42300

    Kenneth and Prasanna, you guys are awesome, thanks so much for giving up your time to share your experience with everyone on here.

    Kenneth – your feedback is most welcome and will be taken on board. My customer is a retired Graphic Designer, so is the kind of guy who knows what he wants! Your points are very valid and I will discuss them with him.

    Prasanna – I have placed this code into the Custom CSS and it works perfectly … naturally! However my customer has requested two things that differ from this (sorry if I was not clear at the outset).

    Firstly with the background colour coded as #758f89 (which it is within Appearance coding) the microphone image is to appear only to the right of a line drawn all the way to the top and the bottom at the left hand edge of where the content area starts. The content width is defined as 400px, with 520px for the sidebar. Therefore, just over half of the page will be #758f89 on the left and the remaining 400px to the right will have the microphone image as the background, top to bottom as you have guided. Hope this makes sense.

    Secondly this is to apply to the home page only. All other pages are entirely #758f89. I guess .home .page needs to be included in the first CSS somehow, somewhere…

    I would be grateful for your further guidance please.

    Many thanks,

    Chris

    Prasanna SP

    #42301

    I didn’t get it (Sorry.. hectic Monday..) Can you post a picture showing where you want the background colour and where you want background image?

    rodeboy

    #42302

    My scanner/printer is playing up and that’s why I tried to describe it. However I have taken a picture of a printed page that shows the layout. Then I couldn’t see how to attach it to the reply so have uploaded it to the site and shown the link below (what is it with Mondays?!)

    Firstly please totally ignore the dark block near the bottom.

    Secondly, hopefully you can see the line down the page which is just to the right of centre. To the left is the sidebar set at 520px. To the right is content, set at 400px behind which the microphone image is to display. It is to be just the one image, so I may have to re-size (if there is a preferred size to do this please advise) He doesn’t want several microphones going down the page!

    Finally, this is for the home page only. All other pages are with the standard background colour #758f89

    Home-page-1024x685.jpg

    I hope that this is clear. Many thanks.

    Chris

    rodeboy

    #42303

    P.S. It appears that I have found out how to attach an image!!

    rodeboy

    #42304

    Hi Prasanna, did the photo help explain?

    Chris

    rodeboy

    #42305

    Hi, I am keen to get this resolved as I am being chased by my customer!

    Hope all is okay Prasanna and you are just taking a break. Syahir, or Kenneth are you able to advise please?

    Thanks to all,

    Chris

    rodeboy

    #42306

    Prasanna, I have met up with my customer today, and he has had a change of mind. It is to appear on all pages, not just the home page.

    All other aspects are the same. Many thanks and look forward to hearing from you, Chris

    Prasanna SP

    #42307

    Okay. Is this close enough?

    zdHk8oo.png

    It is quite difficult to achieve this with the current layout. I moved the portrait from header widget to within the content and moved the whole content-main div upwards with a negative margin of about 330px.

    .home #content-main {
    background: url("http://www.tonycleary.com/wp-content/uploads/2014/03/home-background.jpg") no-repeat !important;
    margin-top: -331px;
    background-size: cover !important;
    width: 44.5% !important;
    position: absolute;
    height: 100%;
    }
    body {
    background: #758F89 !important;
    }

    It is really really a bad approach. I’ll look for better solutions. If it is just for the homepage, we can just redesign the homepage layout with the child theme.

    Prasanna SP

    #42308

    Resized screenshot,

    LogI21p.png

    rodeboy

    #42309

    Prasanna, the screenshot is perfect.

    I have added the image to the home page content and placed this latest code in Custom CSS, and took out the coding;

    body {
    background-image: url("http://www.tonycleary.com/wp-content/uploads/2014/03/home-background.jpg") !important;
    }

    from the original code, leaving the coding

    * {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    }

    from the original code (as it appears to be needed), and left it for your inspection.

    Three points;

    1) Should that part of the original code still be in there?

    2) Your latest code changes just the home page by including .home within the code (I assume)

    3) I am getting the background colour down the right and at the bottom.

    Thanks so much for your time on this.

    Chris

    rodeboy

    #42310

    Prasanna, have you had an opportunity to consider better solutions please? The customer is back to having the layout on all pages now, so just ignore the ‘home page only’ reference.

    Many thanks, and regards,

    Chris

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.