[Tracy]

yes I am and I think I read that link but didn't think it pertained to Executive Pro. Will read it again. Thankyou

[Tracy]

Thankyou for your reply. It is however too late, I've done something else

[Tracy]

Ok, for the header; I can move my #header .logo-area around on the @media and I can give my #header a border so I can actually see it while testing but nothing I have done has affected it whatsoever other than display:none; which also removes my .logo-area (obviously, because it is inside the #header

[Tracy]

Tony, now for my wrap I have this;
`#wrap {
position:relative;
background-image:url(***container_texture.jpg);
margin: 30px auto;
width: 1120px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding:20px;
border-style: solid;
border:4px double #333;
border-width: 62px 58px 57px 61px;
-moz-border-image: url(***/outer_border.png) 62 58 57 61 round;
-webkit-border-image: url(***/outer_border.png) 62 58 57 61 round;
-o-border-image: url(**/outer_border.png) 62 58 57 61 round;
border-image: url(***/outer_border.png) 62 58 57 61 round;
}

and it looks fine and I can see it does on my iPhone and maybe it would be better for another site but with this site (I think) because of the 50px borders on each side it is way too skinny. I have left it there for you to see what I mean. Thanks again.
Now I'll work on the header again.

[Tracy]

Tony, first of all.. thankyou so much for your help. So, I changed the #header .logo-area to width: 100%; max-width: 920px; and it resizes my logo fine now but when I added
`-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
to the #wrap it made my content area too small and pushed the sidebar down so I didn't leave it in. I'm happier with it now but there is a long space between the logo and the menu too. Do you know how to fix that as well?

Also, sorry for the bother but I never did understand how to edit the css area @media so, I haven't done anything with the #wrap area there?

[Tracy]

Thankyou, I am going to make those changes now and see what happens. You were correct, I did try it with the background image header but I wanted to overlap the border with my logo so have changed things many times.

[Tracy]

Thankyou Tony for your reply. I have changed the border completely to what I had tried before as I didn't get any responses or help (although not compatible with IE) I'm so confused at the moment as to what the problem was with the 'quantity button' in woocommerce but it is working. I'm back to using Genesis Simple Hooks to get my 'absolute' positioned logo as I wanted it with the code placed in the genesis_header Hook and this in my css, You will see that I tried the background-size: contain; as you mentioned but it still doesn't look good on the iPhone. Any more suggestions? I do appreciate them for sure.
`#header {
margin: 0 auto;
min-height: 170px;
max-height:170px;
overflow: hidden;
text-shadow: 1px 1px #000;
width: 100%;
}

#title-area {
float: left;
min-height: 150px;
overflow: hidden;
padding: 15px 0 0;
width: 100%;
}

#title {
font-family: 'PT Sans', sans-serif;
font-size: 32px;
line-height: 1;
margin-top: 105px;
margin-left:340px;
text-transform: capitalize;
font-style:italic;
}

#title a,
#title a:hover {
color: #900000;
text-decoration: none;
}

#description {
font-family: 'PT Sans', sans-serif;
font-size: 14px;
text-transform: uppercase;
}

p#description {
color: #777;
}

#header .widget-area {
float: right;
padding:0;
width: 600px;
margin:40px;
}

#header .logo-area{
position:absolute;
background-size: contain;
width:920px;
height:300px;
margin-left:-100px;
margin-top:-110px;
z-index:1;
overflow: hidden;
}

[Tracy]

I'm fairly disapointed not to mention frustrated at this point. I've simply been trying to replicate my custom design with wordpress so I can easily use woocommerce. I simply wanted to overlap my custom container frame with my logo. Simple enough when you know how to use positioning (relative and absolute) right? So I managed this fairly easily using the Genesis Simple hooks. But noticed for some reason this made my woocommerce 'quantity' buttons disappear. Not because of the Simple hooks but because of the relative/absolute positioning.
After many hours trying to figure this out, changing to different themes for testing with no luck I then spent more hours designing a full header with the border and placing it outside of the wrapper just to get the effect I was after. it was looking ok finally only to find that the Simple Hooks breaks the mobile responsiveness!!
What a freaking hastle! I started using WordPress for ease, speed, cms etc! It certainly isn't that. This is the website I am trying to replicate and this is what I have come up with (so far)

[Tracy]

Sorry, the site I am trying to replicate is http://avianstainless.com and what I have come up with (so far) is http://cowichanwebsites.com

[Tracy]

I'm fairly disapointed not to mention frustrated at this point. I've simply been trying to replicate my custom design with wordpress so I can easily use woocommerce. I simply wanted to overlap my custom container frame with my logo. Simple enough when you know how to use positioning (relative and absolute) right? So I managed this fairly easily using the Genesis Simple hooks. But noticed for some reason this made my woocommerce 'quantity' buttons disappear. Not because of the Simple hooks but because of the relative/absolute positioning.
After many hours trying to figure this out, changing to different themes for testing with no luck I then spent more hours designing a full header with the border and placing it outside of the wrapper just to get the effect I was after. it was looking ok finally only to find that the Simple Hooks breaks the mobile responsiveness!!
What a freaking hastle! I started using WordPress for ease, speed, cms etc! It certainly isn't that. This is the website I am trying to replicate and this is what I have come up with (so far)

[Tracy]

Ok, so spent another couple of hours with a new child theme hoping it would help my issue with the missing woocommerce quantity buttons. I want the effect of my logo overlapping the upper left frame so the only way I know how to do this is by positioning my #wrap with position:relative; and my .logo with position:absolute;. This is infact what is screwing with my woocommerce quantity buttons no matter what theme I use. I tried the simple Genesis Sample child theme and the same thing. Can anyone help with this?

[Tracy]

update after more testing, I had positioned my wrap "relative" and my logo "absolute" so my logo would overlap my border and then after much changing and testing I realize combined with that theme, woocommerce and the positioning it conflicted. Not only that but it also does something to the mobile responsiveness of the theme! I think I have to start over with a new child theme

[Tracy]

No, when you are on a specific product page there should be an option to add more (quantity) of the same product with a + and - such as this site/page http://oliversgarden.com/shop/medium-toys/chunky-monkey-med/ and then when you are viewing the cart or checking out there should be the same option such as this site/page

[Tracy]

No, only the add to cart buttons appears to be correct. If you look at this site/page to the left of the add to cart button is the option to change the quantity of products and then in the cart and checkout pages you have the same option to change the quantity such as this site/page *note I guess you may need to actually add something to cart yourself to see this in the 'view cart' stage but both of these pages are different from what my site shows

[Tracy]

I've done more investigating and the #wrap container I worked so hard on to get the border is conflicting somehow with those cart buttons. Here is my code used;
`/* Wrap
------------------------------------------------------------ */

#wrap {
position:relative;
background-image:url(images/container_texture.jpg);
margin: 30px auto;
width: 960px;
padding:20px;
border-style: solid;
border:4px double #333;
border-width: 62px 58px 57px 61px;
-moz-border-image: url(images/outer_border.png) 62 58 57 61 round;
-webkit-border-image: url(images/outer_border.png) 62 58 57 61 round;
-o-border-image: url(images/outer_border.png) 62 58 57 61 round;
border-image: url(images/outer_border.png) 62 58 57 61 round;
}

#wrap .logo{
position:absolute;
left: -121px;
top: -95px;
z-index:1;
}

#wrap .text{
position:absolute;
left: 126px;
top: 62px;
}

[Tracy]

Funny thing is that I started with all the same versions and themes and plugins on my localhost (wampserver) and I just looked at it again and those + and - quantity buttons are there. If everything else is the same, now I am really stumped. Any ideas? Thankyou

[Tracy]

No it is not resolved. The 'Add to Cart' buttons are there but you should be able to adjust with +or- the quantity of products you want to 'add to the cart' . This option should be on the specific product pages as well as in the 'View Cart' page and 'checkout page' such as these 3 site/page links (you will need to add to the cart in order to see it in the 'View Cart' page obviously)

[Tracy]

Phewww, I've sorted it out. I must have upgraded the Woocommerce plugin and it overwrote my changes I made to the short description and description code within it. I had been smart enough at the time to save backups of those. Lesson learned once again!

[Tracy]

Maybe I actually want to know how to add an entirely new div around the whole theme container. Again, I am using the Genesis Sample Theme

[Tracy]

Susan, thankyou very much for your reply. I did actually get it to work but honestly at the moment don't remember what I ended up doing. Thanks anyways

[Author]

Posts