Forum Replies Created
-
AuthorPosts
-
csbeckMember
If you set your ".content-sidebar #content, .sidebar-content #content" to 560px you can set your ".sidebar" to 300px.
You make these changes in the style.css.
csbeckMemberIt all comes down to math.
Your #inner .wrap is set to 960px. Your #content is set to 600px with 40px on your left and right padding. Your #sidebar is set to #280px.
That means that 960 = 680 + 280. If you want the sidebar to be wider, you need to do one of the following (or a mixture depending on what you want visually):
widen your #inner .wrap
make your #content narrower
or you could widen your #inner .wrap (but 960px is a pretty good standard these days)Then you can widen your #sidebar.
You do all of this in your Appearance/Editor and editing your style.css.
csbeckMemberLooks like you're almost there. Did you want it to look differently? Perhaps send a mockup of what you are hoping.
If you are close, how did you accomplish this? Did you use the Simple Hooks code from that sample post?
If you like the page title in that grey bar (the way it is now), then you could make a new div and put the entry-title within that div (do this in your Simple Hook code). Give the new div a style and make it have the grey background and keep it 100% wide. Then make the entry-title the same width of your inner div (960px) and set the margins to 0 auto with no background.
Let me know if that helps.
Chris
csbeckMemberOK, I think your videos will work perfectly if you use that "wmode" adjustment.
Best of luck. Chris
csbeckMemberPlease ignore this note...
csbeckMemberLooks like your videos are still overlapping. Do you have the ability to set your YouTube videos wmode to opaque or transparent. Not sure which one works right off. You'll have to add one of these to the end of your YouTube embed code.
&wmode=opaque
&wmode=transparent
Here's a sample:
<iframe width="425" height="349" src="http://www.youtube.com/embed/8tPnX7OPo0Q?wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>
Let me know if this works. Chris
csbeckMemberOK. I found where the CSS is making those buttons appear over your header.
There's a style being used by your social buttons called: a.sd-button > span
There's an attribute of opacity: 0.8;
When I turn that off, the buttons go behind the header div. Weird.
So you could do either of these things:
Overwrite that style by adding a new style in your style.css:
a.sd-button > span {
opacity: none !important;
}
or
Edit your #header style by adding:
z-index: 100;
Either one of these things should fix that.
Let me know how it goes. Chris
csbeckMemberHi Mike,
Lookin' good.
To fix the menu issue (not showing all of your dropdowns) remove this line (or comment it out) from #header:
overflow: hidden;
That should do it.
I'm getting another funny / weird artifact (at least in FireFox). If you go to one of your posts and scroll your page up and down, the social buttons are floating over the header. Not sure what to do about that at this moment. I need to look at that more.
Your videos are doing the same thing.
Chris
csbeckMemberHi Michael,
I've made some changes to your style.css file. Try this:
https://gist.github.com/csbeck/5155707
Look for all the places that I commented with /** added **/
I believe you will still have to fix the background image so you don't get the white below the black area.
Hopefully this helps. Don't hesitate to ask for more info if this doesn't help enough.
Chris
csbeckMemberWell you could add a new div by using Genesis Simple Hooks and put a div above the inner section. Then style that div like the breadcrumb section is now styled. Then change the breadcrumb styling to something less prominent.
Were you able to still see the breadcrumbs but after the title of the page? That was the part that I didn't check to see if it actually worked.
csbeckMemberI guess I'm thick-sculled but I don't understand what you are asking. Your breadcrumbs look appropriate on this link. What do you want them to be instead of the page or post title?
Or do you mean you want the title on top and the breadcrumbs under the title?
Perhaps this will help:
http://my.studiopress.com/snippets/breadcrumbs/#reposition
Chris
csbeckMemberOK I made a mess above.
So should your code be this instead?
<a class="my-button" href="#"><i class="genericon genericon-show"> View</i></a>
<a class="my-button" href="#"><i class="genericon genericon-audio"> Listen</i></a>Or did you get it to work?
csbeckMemberSorry, never used Gerenicons before.
I had some messy code in here, please see below.
Or did you get it to work?
csbeckMemberLooking at it a bit more, I notice that the background graphic for the #header has a little white gradient for the shadow. This doesn't look totally polished as you scroll the page down. You can see the white pixels.
If you have Photoshop, I'd suggest making a modification to the graphic. Take it in Photoshop and use one of these methods:
crop out the bottom few pixels and upload it to your theme images folder. For the shadow and add a drop shadow to the #header style using CSS (http://css3generator.com/) - watch out for compatibility though - older IE and others might not display the shadow.
delete the white shadow and add a transparent shadow (either using a gradient fill or a layer effect (watch out with the layer effect though - drop shadows don't go all the way to the edges because it's only making a drop shadow for the pixels. You'll have to save the drop shadow layer as a layer and stretch it or increase the layers pixels so the shadow goes the full width. I can explain more about this if you want to go this direction - it's a Photoshop thing)). Save the graphic out as a PNG with transparency and upload to your theme images folder.
This way anything visible below it will look like it's got a shadow on it from the #header. Does this make sense?
Chris
csbeckMemberYeah, almost there.
You've got 2 sets of quotes for the background image. You'll need to remove those. That will fix your background.
Now you have to push your inner div down so it doesn't get cut off. Use:
#inner {clear: both;
margin-top: 50px;}
And then you'll have to remove the background from the first wrap div.
#wrap {
background: url("images/bg.png") repeat-x scroll 0 0 transparent;
}
You can either remove the background line or comment it out like this:#wrap {
/***background: url("images/bg.png") repeat-x scroll 0 0 transparent;***/
}
Everything should look good then.
csbeckMemberHi Michael,
Yes, I did have that information in my style.css (Appearance/Editor).
In fact, if I were you, I would find the section in your style.css with "/* Header" and add a new style and attributes:
#header {
background: url("images/bg.png") repeat-x scroll 0 0 transparent;
margin: 0 auto;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
Or something like this. This way, your background will stay with your header.Good luck. Chris
csbeckMemberI've done this recently on a site I completed (http://www.wealors.com). It's not as flashy (no fade or sliding etc.) but it does the trick. I just made sure that the header/menu area had these attributes:
.header {
position: fixed;
top: 0px;
}
I hope this helps.
csbeckMemberThanks so much Brian. This was a great help. It took a while to go through these (I guess I'm not as proficient in PHP so it was a little vague as to where all of this code needed to go). I found that I had to add the code to my functions.php. I was then able to set my pages templates to the blog template and it worked (mostly). http://www.beckerstudio.com/portfolio/design/websites/
I still wasn't able to see the 2 feature items on my particular pages. I did see the 2 features though if I went to an archive page.
http://www.beckerstudio.com/category/portfolio/portfolio-design/portfolio-websites/
I wonder if there's a way to get my regular pages set to the page_blog.php template to show this layout. I'm using a custom template on these pages because I wanted to show some introductory content above my portfolio pieces. Perhaps there a better way to do this?
My page_blog.php template uses this code:
<?php
/**
* WARNING: This file is part of the core Genesis framework. DO NOT edit
* this file under any circumstances. Please do all modifications
* in the form of a child theme.
*
* Template Name: Blog with Content
* This file handles blog post listings within a page.
*/
add_action('genesis_loop', 'genesis_standard_loop', 8);
genesis();I appreciate anyone's additional help or direction if possible. I'm almost there.
Thanks, Chris!
csbeckMemberOops, sorry about the wink face. Glad you were able to understand nevertheless.
Chears! Chris
csbeckMemberOh, so if that's the issue, there might be an extra closing div </div> or something that's closing everything out earlier than desired.
Good luck. Chris
-
AuthorPosts