Background image and video player
-
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
ModQuote: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:
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?
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;
}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
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?
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
I hope that this is clear. Many thanks.
Chris
Viewing 10 posts - 1 through 10 (of 15 total)
- 1
- 2
- You must be logged in to reply to this topic.