April 18, 201214 yr Ok I spent all night trying to figure out this problem I have and it's bugging the hell out of me, I will feel soooo much better when I get it solved... I am trying to style my template so I have content dividing areas here are two examples... http://visumdesignz.com/ http://visumdesignz.com/pricing/ You will notice the grey texture area it is a div inside the wrapper (the wrapper is 1000px) i want to edit the CSS so I can create an ID or a class that keeps the content in a 1000px wrapper but allows me to get outside of the wrapper for appearance purposes here is my CSS content code /* Content area */ #wrapper{width:1000px; margin:0 auto;} #container_bg #content_full {} #container_bg #content {float:left; width:69.79%; padding:40px 0 40px;} #container_bg #content_right {float:right; width:670px; padding:40px 0 40px;} .content_shadow{width:960px; height:10px; margin-bottom:10px; background:url('images/content_shadow.png') no-repeat;} #container_bg .pricing-wrapper { clear:both; width:100%; height:100%; background:url('http://visumdesignz.com/wp-content/uploads/2012/04/rough_diagonal.png') } Here is the code I added for the grey background... how do I setup the CSS so I can get the grey 100% of the monitor and outside of the wrapper? #container_bg .pricing-wrapper { clear:both; width:100%; height:100%; background:url('http://visumdesignz.com/wp-content/uploads/2012/04/rough_diagonal.png') } Edited April 18, 201214 yr by visumdesignz
April 19, 201214 yr hi for that u have code in a different way say <div id ="top-header"> <div class="wrapper"> <!--content goes here--> </div> </div><!--top_header--> <div id ="navigation"> <div class="wrapper"> <!--content goes here--> </div> </div><!--navigation--> <div id ="content"> <div class="wrapper"> <!--content goes here--> </div> </div><!--content--> <div id ="footer"> <div class="wrapper"> <!--content goes here--> </div> </div><!--footer--> now in css .wrapper{width:1000px;margin:0 auto;} #top-header{width:100%;margin:0;background:orange;} #navigation{width:100%;margin:0;background:red;} #content{width:100%;margin:0;background:pink;} #footer{width:100%;margin:0;background:grey;} Edited April 19, 201214 yr by sash_oo7
April 19, 201214 yr Author Ok thanks but I am still lost... I added the CSS to the style sheet /* Content area */ #wrapper{width:1000px; margin:0 auto;} ------------------ YOUR CSS BELOW (THESE TEXT BARS ARE NOT IN MY CODE) .wrapper{width:1000px;margin:0 auto;} #top-header{width:100%;margin:0;background:orange;} #navigation{width:100%;margin:0;background:red;} #content{width:100%;margin:0;background:pink;} #footer{width:100%;margin:0;background:grey;} --------------------------------------------------------------- #container_bg #content_full {} #container_bg #content {float:left; width:69.79%; padding:40px 0 40px;} #container_bg #content_right {float:right; width:670px; padding:40px 0 40px;} .content_shadow{width:960px; height:10px; margin-bottom:10px; background:url('images/content_shadow.png') no-repeat;} #container_bg .pricing-wrapper { clear:both; width:100%; height:100%; background:url('http://visumdesignz.com/wp-content/uploads/2012/04/rough_diagonal.png') } Just for test purposes I added the HTML code to my pricing page <div id ="top-header"> <div class="wrapper"> <!--content goes here--> </div> </div><!--top_header--> <div id ="navigation"> <div class="wrapper"> <!--content goes here--> </div> </div><!--navigation--> <div id ="content"> <div class="wrapper"> <!--content goes here--> </div> </div><!--content--> <div id ="footer"> <div class="wrapper"> <!--content goes here--> </div> </div><!--footer--> and the result is http://visumdesignz.com/pricing/ I feel like I didn't follow your post very accurately I may be missing something but in this situation I need things to be simplified Edited April 19, 201214 yr by visumdesignz
April 19, 201214 yr hello i dint ask u to add that html to ur page i just gave an example how its done i havent looked at ur code in details this is just an example test my code in separate html file and use that css this is only for learning purpose
April 19, 201214 yr Author hello i dint ask u to add that html to ur page i just gave an example how its done i havent looked at ur code in details this is just an example test my code in separate html file and use that css this is only for learning purpose Ok I was looking for an easy solution but I decided to go ahead and use that code in my text editor and it really does make sense now! I get the structure but do I just need to delete the orig #wrapper and add that code to the CSS file and give the div ID to the grey area?
April 19, 201214 yr Author Well here is what I am suspecting the issue to be... the site is a WP template here is the page.php code <?php if (get_post_meta($post->ID, 'header_choice_select', true));{ get_header(get_post_meta($post->ID, 'header_choice_select', true)); } ?> <div id="container_bg"> <div id="content_full" > <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <?php endwhile; // end of the loop. ?> <?php get_template_part( 'loop', 'page' ); ?> <?php SEO_pager() ?> </div><!-- #content --> </div><!-- #container --> <?php get_footer(); ?> This is what the page looks like when I modified the CSS http://visumdesignz.com/pricing/
April 19, 201214 yr Author and whts there in loop.php? I mean is there a way to create a section above the main content area of the theme? for instance there is this site who has the style I am looking for www.wpzoom.com and their main content is below the grey area content <div id="features"> <div id="features_content"> <ul class="home_features"> <li class="feat1"><strong>WPZOOM Options Panel</strong><p>With our advanced WPZOOM options panel, you can easily customize every detail of your theme to best suit your needs.</p></li> <li class="feat2"><strong>Lifetime Support</strong><p>By purchasing one of our themes, you also buy our great premium support FREE for life! Our expert staff is here for you.</p></li> <li class="last_feat feat3"><strong>Documentation & Tutorials</strong><p>Every theme comes with great documentation to help you get started. We also have a great selection of tutorials to help you make the most of your theme.</p></li> <li class="feat4"><strong>SEO Options</strong><p>Make sure your website is seen by all the right people with our advanced Search Engine Optimization features built into every theme.</p></li> <li class="feat5"><strong>Professional Design & Code</strong><p>All our themes are painstakingly crafted by our team of professional designers and developers. </p></li> <li class="last_feat feat6"><strong>Custom Features</strong><p>With our custom features like image and video sliders, multi-tier menus, and social networking integration, you can be sure your website will stand out from the crowd.</p></li> </ul> </div> <div class="clear"></div> </div> <!-- /.features --> <div id="main"> <div id="main_content"> <div id="news"> They have created a features content right before the main.. can someone help me do something similar? Loop.php <?php /* If no posts. */ ?> <?php if ( ! have_posts() ) : ?> <div id="post-0" class="post not-found"> <h2 class="post-entry-title"><?php _e( 'Not Found', 'visum' ); ?></h2> <div class="entry-content"> <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'visum' ); ?></p> <?php get_search_form(); ?> </div><!-- .entry-content --> </div><!-- #post-0 --> <?php endif; ?> <?php /* Start the Loop. */ ?> <?php while ( have_posts() ) : the_post();?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'visum' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2> <div class="entry-utility"> <?php visum_posted_on(); ?> <!-- Category --> <?php if (get_option_tree('hide_category_from_meta', '')) {} else{ if(get_option_tree('blog_in_cat', '')) {$blog_in_cat = get_option_tree('blog_in_cat', ''); } else {$blog_in_cat = __('in', 'visum');} echo '<span class="cat-links">', $blog_in_cat . ' '; ?> <?php printf( __( '%2$s', 'visum' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?> </span> <?php } ?> <!-- Category END --> <!-- Comments --> <?php if (get_option_tree('hide_comments_from_meta', '')) {} else{ if(get_option_tree('blog_comment', '')) {$comment = get_option_tree('blog_comment', ''); } else {$comment = __('Comment', 'visum');} if(get_option_tree('blog_comments', '')) {$comments = get_option_tree('blog_comments', ''); } else {$comments = __('Comments', 'visum');} if(get_option_tree('blog_leave', '')) {$leave_comments = get_option_tree('blog_leave', ''); } else {$leave_comments = __('Leave a comment', 'visum');} echo '<span class="comments-link">'; comments_popup_link( ''.$leave_comments, '1 '.$comment, '% '.$comments); echo '</span>'; ?> <?php } ?> <!-- Comments END --> <?php edit_post_link( __( ' Edit', 'visum' ), '<span class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?> <!-- Tags --> <?php if (get_option_tree('hide_tags_from_meta', '')) {} else{ if( has_tag() ) { ?> <div class="tag-link"> <?php the_tags('<ul><li>','</li><li>','</li></ul>'); ?> </div> <?php }} ?> <!-- Tags END --> </div><!-- .entry-utility --> <div class="entry-content"> <?php $read_more = get_option_tree('blog_read', ''); if ($read_more){ the_content( __( $read_more , 'visum' ) ); } else{ the_content( __( 'Read more', 'visum' ) ); }?> <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'visum' ), 'after' => '</div>' ) ); ?> <div class="clear"></div> </div><!-- .entry-content --> </div><!-- #post-## --> <br/> <?php comments_template( '', true ); ?> <?php endwhile; // End the loop. Whew. ?> <?php SEO_pager() ?> Edited April 19, 201214 yr by visumdesignz
April 19, 201214 yr are u sure the pricing page using the page template? i mean there is no separate template for price page? can u list all the files in the theme?
April 19, 201214 yr Author I am pretty sure whatever is created inside the WP page area automatically goes into the main content area... how do I create a section above the main area? Edited April 19, 201214 yr by visumdesignz
Create an account or sign in to comment