Community Forums › Forums › Archived Forums › Design Tips and Tricks › I Need a Bit of Help Formatting the CSS Style Sheet
- This topic has 7 replies, 2 voices, and was last updated 10 years, 5 months ago by Michael.
-
AuthorPosts
-
November 19, 2013 at 1:20 pm #74218MichaelMember
Greetings!
I am currently building a site at http://www.jesusoftestimony.com/ This website is for a client who is a documentary film maker and will be the website for his new film and trailer. The trailer, when finished will be displayed at the home page with some other information in the widget areas below the video area.
Here is what I have done so far- My experience with CSS and coding is very limited and I have been doing this by the seat of my pants! There may be better ways to do what I am doing and perhaps I need to back up and start over. I don't know. I'm almost where I want things to be and need just a bit of help to fine tune everything. Your help is much appreciated!
I am using the Executive Pro Child Theme and to display the video trailer I am using a premium plug in called SlideDeck. I wanted the SlideDeck video slide to be outside the main content area (right against the background) so I created a new widget area for it and placed it above the content area with the genesis_after_header hook. I have the nav menu where I want it but there are obviously a couple of issues-
1. I would like the SlideDeck Video slider to be centered over the content area and with the rest of the page. I'd also like some space between the video slider and the content area below. I have tried using margin and padding in .slidedeck-slider but it shifts both the slider and content area right when all I want right is the slider itself.
2. At one time the footer was showing up in the main content box and for some reason it's barely visible now.
I'm hoping these are relatively easy fixes and won't require too much of your time!
Thank you in advance!
Michael
http://www.jesusoftestimony.com/November 19, 2013 at 1:29 pm #74221nutsandboltsMemberWhat happens if you put the SlideDeck widget in the existing Home Slider widget area? One issue with your new widget area is that it's outside
.inner
. It also looks to be missing a closing </div> because that area is encompassing the entire page, which may be why your footer isn't displaying correctly. I know you mentioned that you wanted the video outside the content area but I'm just curious whether it aligns correctly in that widget area versus the new one.Another thing you might try is using the
genesis_before_content_sidebar_wrap
hook instead ofgenesis_after_header
.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 19, 2013 at 1:48 pm #74234MichaelMemberThanks nutsandbolts! If I install the SlideDeck widget into the Home Slider widget area, it's still not centered and it also puts the slider in the main content area, so to answer your curiosity, no, it doesn't help and it also takes the slider into the content area which I don't want.
Also, I tried the genesis_before_content_sidebar_wrap hook and it didn't get me what I want either. If I remember right, that hook kept me in the main content area too.
I did find what appears to be a missing closing </div> which might help solve most of this. It was also a part of my code so yes, very prone to error!
However, I cannot find the proper place to put the closing div tag- Here is what I currently have-
/** Add the SlideDeck Slider section */
add_action( 'genesis_after_header', 'slide_deck_slider' );
function slide_deck_slider() {if ( ! is_home() )
return;genesis_widget_area( 'slidedeck-slider', array(
'before' => '<div class="slidedeck-slider widget-area">',
) );
}I tried putting the </div> in and it broke things pretty bad but it appears there is the missing code. Do you know exactly where I should close the div?
November 19, 2013 at 1:54 pm #74236nutsandboltsMemberTry this:
genesis_widget_area( 'slidedeck-slider', array( 'before' => '<div class="slidedeck-slider widget-area">', 'after' => '</div>', ) );
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 19, 2013 at 2:05 pm #74238MichaelMemberI added the 'after' => '</div>', section and no effect. I'm a bit perplexed. Thanks again for your suggestions though!
November 19, 2013 at 2:06 pm #74239nutsandboltsMemberOh no, it did have an effect. Now the div is closing properly and it will be easier to do everything else.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 19, 2013 at 2:09 pm #74241nutsandboltsMemberChange your CSS rule for the widget area to this:
.slidedeck-slider { border-bottom: none; border-top: none; font-family: 'Lora', serif; font-size: 30px; line-height: 1.0; overflow: hidden; padding: 0px 0px 0px 0px; text-align: center; width: 90%; margin: 0 auto; }
Voila! Centered video.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 19, 2013 at 2:39 pm #74253MichaelMemberThanks so much nutsandbolts, amazing, thank you!
Working on getting the footer back in which may be easier now that I have that pesky div closed!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.