Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 464
  • Last Modified:

How to deal with header and blur background on my website?

Hi,

3 questions for you! :)
I'm a newbie in building my own website <http://www.juraglo.com/>. It's a Canvas Theme on Wordpress. The HTML and CSS have been already slightly customized by a friend on a child theme.

1. I'm struggling with header: I want to put it outside the body of the content when I box-layer the content.

2. I also need the primary navigation to be outside "the box."

3. About the background color of the "box," I want it to be blurry. I found a CSS code

.wrapper {
  background-color: url(images/bg-blurry.jpg) no-repeat fixed !important;
}

online but I don't understand what suppose to be this <url(images/bg-blurry.jpg)>? The code doesn't work on the custom CSS.

Any suggestions beside the one that I should go back to a friend to finish customizing? :D
0
Lempute
Asked:
Lempute
  • 2
1 Solution
 
Jason C. LevineNo oneCommented:
Honestly, go back to your friend. Unless you have a good understanding of HTML, CSS, and some PHP along with knowledge of how WordPress expects a theme to be constructed you are not going to have a pleasant experience.

For 1 and 2, you need to modify the theme to move elements around.  Most of this will be in header.php

For 3, that CSS code requires an image to use as the background. The code just calls the image, it doesn't magically make stuff blurry.
0
 
Tom BeckCommented:
When you say you want the background blurry, do you mean that you want the off-white background to be semi-transparent? If so, you could make this change (in bold):

#wrapper {padding-left:30px; padding-right:30px;background-color:rgba(240, 241, 245, 0.7);margin-top:20px;margin-bottom:20px;border-top:1px solid #dbdbdb;border-bottom:1px solid #dbdbdb;border-left:1px solid #dbdbdb;border-right:1px solid #dbdbdb;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow: 0px 1px 5px rgba(0,0,0,.3);-moz-box-shadow: 0px 1px 5px rgba(0,0,0,.3);-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,.3);}

When you say you want the header and navigation outside the box, do you mean it should be in a separate box above the main content box?
0
 
Tom BeckCommented:
Try this:

Temporarily comment everything out that you have for #wrapper by enclosing it in comment delineators, /*#wrapper {...*/

Then add this definition for #content:

#content {
    padding: 40px;
    background-color: rgba(240, 241, 245, 0.7);
    border-radius: 5px;
}

This will put only the content in a semi-transparent off-white box with rounded corners. The header and navigation will be floating above it on the page background. Footer will be outside the content box as well.
0
 
LemputeAuthor Commented:
Genius, you are Genius! :D
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now