Solved

Make a stripe in header go across the length of the page

Posted on 2011-02-16
5
399 Views
Last Modified: 2012-08-13
Hello .
I'm attempting to finish customizing a script I purchased from studiopress.com (the going green theme) and one of  the things in my initial vision was to have the brown stripe do 2 things 1) go across the top regardless of screen size and 2) fall behind the nav but above the center page background.  I've attached a screenshot of what i'd like it to look like.    

The goal
Unfortunately, I've been able to customize pretty much everything else except for these two Items.  I'm not a complete novice at css, but enough to be asking for help as this project is overdue.   Any detailed help you can offer is greatly appreciated!!

Here's the site in progress:  http://wedding.circleofsisters.com  

Thanks again!
0
Comment
Question by:vfleary
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 4

Assisted Solution

by:DangerousJeff
DangerousJeff earned 250 total points
ID: 34906492
Hi, I really like your proposed design.
I'm not really a CSS guru either but one potential (hacky?) way of doing the full width stripe is this:
- Create another div containing the whole "wrap" div
- Give it an id, eg "stripe"
- In its CSS assign its background to be a vertical slice of your logo image repeating on the x axis and aligned at the top.

#stripe {
    background: url("images/logo-slice.png") repeat-x scroll center top transparent;
}

Open in new window


You can probably move your Nav to within the title area div, but your text-indent property will cause issues there, failing that potentially using absolute positioning.

Do you only have control over the CSS?
0
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 250 total points
ID: 34906657
You could add a div outside of the wrapper class in the header.php file. Add something like this to your header.php file just after the closing </head> tag:
<div id="top-bar">
        <div class="wrap">
             YOUR CODE IS HERE
                     index.php
                             sidebar.php
                                 footer.php
        </div> <-- this ends the wrap div --->
      </div> <------- add this div as the last div in the footer.php -------->


Now you just style the css for the new div. Maybe something like this:

#top-bar {
      background-color: #300;
      width: 100%;
      position: absolute;
      padding: 0;
      height: 200px;
      top: 25px;
        overflow: hidden;
        left: 0;
        right: 0;
}
0
 

Author Comment

by:vfleary
ID: 34909439
Thanks to both... normally this would be super easy but because studiopress uses the Genesis Framework, finding where just outside the </head> tag is so I can edit it and add the additional div styel has become quite the adventure.  

If you have any clues, please fill me in.  Otherwise, stay tuned!
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 36508812
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question