Docs

[fibroidcincinnati]

Hi,

I am trying to format and style three widget areas I have added. I want them to look just like the three footer widget areas I am using (same padding and horizontal format etc).

I have added them through functions.php with this code:

function arphabet_widgets_init() {

 register_sidebar( array(
 'name'          => 'Blog sub-index area 1',
 'id'            => 'blog-sub-index1',
 'before_widget' => '<aside id="%1$s" class="widget %2$s">',
 'after_widget'  => '</aside>',
 'before_title'  => '<h4 class="widget-title">',
 'after_title'   => '</h4>',
 ) );

 register_sidebar( array(
 'name'          => 'Blog sub-index area 2',
 'id'            => 'blog-sub-index2',
 'before_widget' => '<aside id="%1$s" class="widget %2$s">',
 'after_widget'  => '</aside>',
 'before_title'  => '<h4 class="widget-title">',
 'after_title'   => '</h4>',
 ) );

 register_sidebar( array(
 'name'          => 'Blog sub-index area 3',
 'id'            => 'blog-sub-index3',
 'before_widget' => '<aside id="%1$s" class="widget %2$s">',
 'after_widget'  => '</aside>',
 'before_title'  => '<h4 class="widget-title">',
 'after_title'   => '</h4>',
 ) );

}
 add_action( 'widgets_init', 'arphabet_widgets_init' );

Then I called them into the blog index page (wp-index.php) in my child theme by adding this code (I am including the code just above and below so you can see where I placed it):

      <?php x_get_view( 'global', '_index' ); ?>

    </div>
  </div>

<div id="blog-sub-index-area" role="contentinfo" class="x-colophon top" class="x-container max width">

<div id="blog-sub-index1" class="subindex-1" class="x-column x-md x-1-3" class="x-widget-area">
<?php if ( is_active_sidebar( 'blog-sub-index1' ) ) : ?>
<?php dynamic_sidebar( 'blog-sub-index1' ); ?>
<?php endif; ?>
</div><!-- #blog-sub-index1 -->

<div id="blog-sub-index2" class="subindex-2" class="x-column x-md x-1-3" class="x-widget-area">
<?php if ( is_active_sidebar( 'blog-sub-index2' ) ) : ?>
<?php dynamic_sidebar( 'blog-sub-index2' ); ?>
<?php endif; ?>
</div><!-- #blog-sub-index2 -->

<div id="blog-sub-index3" class="subindex-3" class="x-column x-md x-1-3 last" class="x-widget-area">
<?php if ( is_active_sidebar( 'blog-sub-index3' ) ) : ?>
<?php dynamic_sidebar( 'blog-sub-index3' ); ?>
<?php endif; ?>
</div><!-- #blog-sub-index3 -->

</div><!-- #blog-sub-index-area -->

<div>
<?php get_footer(); ?>
</div>

This successfully created the widget areas and calls them into the blog index page below the index, and above (I think?…) the footer widget areas, and then the footer itself.

Here comes the problem… when I try to style them to look just like the footer widget areas (I want three across with the same padding etc), they meld somehow with the footer widget areas below them… and also don’t have the same padding etc. This is the code I am using in global CSS:

@media screen and (min-width: 768px) {
	.subindex-1 {
		float: left;
		width: 30%;
		margin-right: 5%;
	}

	.subindex-2 {
		float: left;
		width: 30%;
		margin-right: 5%;
	}

	.subindex-3 {
		float: right;
		width: 30%;
		margin-right: 0;
	}
}

I think there are two parts to my style problem. 1. I can’t figure out what class to apply and how to apply it to get the new widget areas styled like the ones in the footer. and 2. I am somehow connecting them to the footer widget areas with regards to the floating so they don’t lay out correctly.

Any advice on how to fix this? I think it is simply my inexperience with CSS styling (and possibly where in wp-index.php I am placing the code) that is giving me the trouble.

I can provide a login if needed, but am using Clef and would have to disable it first.

I will attach pics before and after the style code being added.

[Jade]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[fibroidcincinnati]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for the credentials, I’d suggest that you apply the same structure and classes of the top footer. So your custom footer will inherent that same styling.

<div id="blog-sub-index-area" role="contentinfo" class="x-colophon custom">
	<div class="x-container max width">

			<div id="blog-sub-index1" class="x-column x-md x-1-3 subindex-1">

			</div>

			<div id="blog-sub-index2" class="x-column x-md x-1-3 subindex-2">

			</div>

			<div id="blog-sub-index3" class="x-column x-md x-1-3 subindex-3">

			</div>
					
	</div>
</div>

Please do this and remove the custom CSS you applied.

Let us know how it goes.

Cheers!

[fibroidcincinnati]

Great thanks! This totally worked. I added what you had above to the wp-index.php surrounding the appropriate code.

I then deleted the styling for this section I had under global CSS and replaced it with this:

/*style sub blog index areas*/
	.subindex-1 {
		margin-bottom: 45px;
    text-align: center
	}

	.subindex-2 {
		margin-bottom: 45px;
    text-align: center
	}

	.subindex-3 {
		margin-bottom: 45px;
    text-align: center
	}

I really appreciate the help.

I’ve seen several people ask how to customize the blog index page. So here is one successful example of doing that to add custom widget areas that don’t move to the right or left like the sidebars do.

Thanks again!

[Paul R]

Hi,

Kindly add a semicolon at the end of text-align:center

/* style sub blog index areas */
	.subindex-1 {
		margin-bottom: 45px;
                text-align: center;
	}

	.subindex-2 {
		margin-bottom: 45px;
                text-align: center;
	}

	.subindex-3 {
		margin-bottom: 45px;
                text-align: center;
	}

Thanks

[Author]

Posts