Is this layout feasible?

Ian,

You can do the changes by changing the stylesheet, feasibility depends upon the browser used on users end, if the theme is responsive you can use css3 tags specifying the min and max width.

use Custom Css feature if your theme supports it.

Marvel Labs

Not sure if this is even worth pursuing, but I thought I would ask.

It’s possible if you want to do it.

1. For the header you can either just incorporate the design of the header part with the image used for the site’s background. So visually it would look like the header extends the whole width since they have the same image on the top part.
OR
This other solution which I think is better. You can disable the top bar and header on the options, leaving only the main menu. Then add a text widget on the “Body Widget Area”. It is automatically placed on top of the page outside of the container. Place your image or other needed things on that text widget.

2. For the slider, you can apply a negative property to the sliders container ex. left: -100px; then adjust the width to balance/stretch it on the right side. You’ll have to change all the overflow: hidden; to overflow: visible; on the elements that contains the slider. It might be better if you place the slider on the “Below Menu” widget area so you only have a few overflows to change. I’m not sure how all of this would affect the responsiveness though.

thanks for the feedback guys, I’ll start playing with those suggestions now. I’m sure more questions will arise once I’ve gotten my hands dirty..

-ian

@ronangelo
So I was working on the header, everything was looking great. Then I went back to work on it some more and while I was working, the site began to disintegrate in front of me, somewhere between saving the CSS and previewing the changes I lost all my custom CSS settings and for whatever reason the site is all in one skinny column.
Any idea how I can restore it, or do I have to start over?
Really strange..

Thanks,
Ian

*update*

It would appear that all of the settings were cleared, including content width, etc. thus causing the site to look like it did. I’ve managed to get everything back, except for the custom CSS.

Do you think this is a sign of being hacked? Or perhaps just a bug of some sort..

@iantskon

It would appear that all of the settings were cleared, including content width, etc. thus causing the site to look like it did. I’ve managed to get everything back, except for the custom CSS.

That is strange. The options should only be cleared when the “restore defaults” button is clicked, and even then it should contain the default values. I really have no idea what might have caused this. You only entered css codes right?

You could add this to extend the body widgets.

.widget-body {
    display: block;
    margin: 0;
}

So I may have hit reset instead of save by mistake while having the window shrunk down, lesson learned. I’m seeing the importance of backing up the custom CSS.

Are there any backup plug-ins or methods that you would recommend? (for the wordpress site itself, database, etc.)

How about security?

BTW. the code above works great, I was using text-(#) {width: 100%;} which was kind of buggy and bottom margins had to be set to negative.

Thanks,
Ian

@ronangelo
1. So I have the header created, but I am unsure of how to position the image and text inside of the “white” logo/header area so that it remains in the same position regardless of browser size
See example of positioning here
Right now everything is floating left, it looks great on the mobile version, but when I had it positioned where I wanted it via margin-left, etc., it would move as I re-sized the browser.

2. Everything was working with the slider until I changed the overflow of the “below menu” id to overflow: visible; which mde it disappear (the image(s) that is, the navigation arrows/circles are floating above the article area.
I left everything intact, so if you change the below menu to visible in your element inspector, you will see what I am saying.

If you’re able to help with this I’d really appreciate it.
Thanks in advance,

Ian

1. Try wrapping the widget’s contents in their own div then do the same thing you did with your 4th text-widget which is adding a width then floating to center.
Ex.

<div id="header-content-wrap">
   <img id="header_logo" />
   <span id="text"></span>
</div>

#header-content-wrap {
   width: 970px;
   margin: 0 auto;
   max-width: 100%;
}

With wrapping things in their own container, you could also just use one text widget instead of 4.

2. Try these.

#container {overflow: visible;}
#below-menu {
   overflow: visible;
   clear: both;
}

This worked great, now I’m just trying to get it so the fixed slide show returns to flexible from 1100px and under, i can do it in the chrome console, but can’t seem to pin the right class or id. I’ll play with it more tomorrow.
Thanks again, you’re always a huge help, dunno what I’d do without the great support!

Ian

@ronangelo
I can’t figure out how to change the height of each list element within the “slice show – slide show” to become max-height: 100%; after the browser is below 1100px in width, as it is now the slider becomes responsive below 1100px, but the height of one of the list elements is leaving a big space beneath the carousel.
When I view it in firebug, I am able to get it to work by changing the “inline element” for each slide from height: 350px to max-height: 100%
but how do I change that in my CSS?

Thanks,

Ian

I can’t figure out how to change the height of each list element within the “slice show – slide show” to become max-height: 100%;

max-height isn’t used to set height.

Try to add this in the 1100px media query

li.cycle-slide {height: auto !important;}

div.sliceshow-slideshow, li.cycle-slide {height: auto !important;}

ahh! that works perfectly.
I tried the height: auto; before, but on the wrong id.
thanks for the support! definitely going to continue using your theme(s) for future clients.

ian

@ronangelo
This header is becoming the bane of my existence >.<

So I put the header into one text widget, and it’s working well, except when I re-size the window down between 440px and 650px (width) then the text area that belongs within the white region of the header floats down into the orange area. I’ve tried fixing it by giving the text area DIV a background of white and adjusting the left padding by various %’s, but this didn’t work too well and seemed kind of like a sketchy way to solve the problem. So I guess the question is, how can I make the white DIV stretch height-wise to contain the text when the text DIV floats due to screen size?

Here’s some previews of what happens at various sizes between 440 and 650
one
two

Thanks!