Docs

[newskywebsites]

Hi there,

Site: http://newsite.benfranklincraftswi.com/
I’m trying to make this site look more craftsy with a ripple edge in the footer widget area or anywhere else between sections. I was able to achieve this look with Cornerstone on pages that are full width by adding a section with a background image pattern that repeats and no padding (as seen in attached).

However, this won’t work for pages that use a right side bar. The section won’t go all the way to the right, so the image won’t repeat across.

What is a better way to achieve this look? Is there a way to add it to the footer widget so it automatically appears on every page of the site?

Maybe a way to add a 0 padding repeating image across top of footer widget area?

Latest version of everything, child theme, renew stack.

Thanks!
Dawn

[Nico]

Hi There,

Thanks for writing in.

Best options would be to set up a child theme – https://community.theme.co/kb/how-to-setup-child-themes/, then copy the file wp-content/x/framework/views/global/_footer-widget-areas.php to wp-content/your-child-theme/framework/views/global/

Once this is done, open _footer-widget-areas.php from your child them, you should see something like below:

<footer class="x-colophon top" role="contentinfo">
    <div class="x-container max width">

Add a div with a ripple edge background. For example,

<div class="ripple_edge"></div>

Don’t forget to add heigh or width to the CSS so that it will show the background.

Hope it helps.

Let us know how it goes.

Thanks.

[newskywebsites]

Thank you. Sounds really complicated. Please bare with me. I am already using a Child theme. However, I don’t understand how to copy the file wp-content/x/framework/views/global/_footer-widget-areas.php to wp-content/your-child-theme/framework/views/global/ – can you offer more specific step by step instructions to start me off there? I don’t normally work in the editor at all…

Thanks for your patience and hand holding. I will document this so I don’t have to ask again in the future. 🙂

Thanks!
Dawn

[Rupok]

Hi Dawn,

Thanks for writing back. Let me explain a bit for you.

Parent theme folder is x and Child Theme folder is x-child

So all you need to overwrite the same file of parent theme by the Child Theme and that’s the idea.

You will already see the directory /framework/views/global/ within your Child Theme folder (x-xhild/). You need to create the file _footer-widget-areas.php here. So apparently there is same file already exist on the parent theme folder (x) that you need to copy and place on your newly created file. The do the suggested change.

Hope this explains better.

Cheers!

[newskywebsites]

Thank you! I completed the first part of copying the _footer-sidget-areas.php file from X to X-child folder using Filezilla. Now, don’t laugh but how do I open it and edit the php like you suggested? I don’t see it in the Child Editor in WP…? I don’t seem to have software for opening it directly…

And once you send those directions, please give more details about how to do this: “Don’t forget to add height or width to the CSS so that it will show the background.”

Thank you so much!!
Dawn

[newskywebsites]

Okay, I tried using Notepad… seems like it worked? Here’s what I have now:

<?php

// =============================================================================
// VIEWS/GLOBAL/_FOOTER-WIDGET-AREAS.PHP
// —————————————————————————–
// Outputs the widget areas for the footer.
// =============================================================================

$n = x_footer_widget_areas_count();

?>

<?php if ( $n != 0 ) : ?>

<footer class=”x-colophon top” role=”contentinfo”>
<div class=”x-container max width”>
<div class=”ripple_edge”></div>

<?php

$i = 0; while ( $i < $n ) : $i++;

$last = ( $i == $n ) ? ‘ last’ : ”;

echo ‘<div class=”x-column x-md x-1-‘ . $n . $last . ‘”>’;
dynamic_sidebar( ‘footer-‘ . $i );
echo ‘</div>’;

endwhile;

?>

</div>
</footer>

Is that right??

If so, I just need to know what CSS to add now… With height and width. Is it for the image that will repeat? See the image I want to repeat attached. It is 30px x 18px.

THANKS!!
Dawn

[newskywebsites]

and now this css seems to not work. Before messing with the php it adjusted the footer widget area to show 3 columns but 1/2+1/4_1/4 sizing. Does this need to be edited? Or can I no longer have that layout?

/* 1/2+1/4+1/4 footer with 3 columns */

/*.x-colophon .x-column.x-md:nth-child(2) {
display: none
}
.x-colophon .x-column.x-md:first-child {
width: 45%;
overflow: hidden
}*/

So complicated… 🙁
Dawn

[newskywebsites]

Also, I found this Javascript in customizer:
(function ($) {
$.fn.replaceClass = function (pFromClass, pToClass) {
return this.removeClass(pFromClass).addClass(pToClass);
};
$(‘footer.x-colophon.top .x-column:first-child’).replaceClass(‘x-1-3′,’x-1-2’);
$(‘footer.x-colophon.top .x-column:not(:first-child)’).replaceClass(‘x-1-3′,’x-1-4’);
}(jQuery));

[newskywebsites]

This reply has been marked as private.

[Friech]

Hi Dawn,

You want to see a magic? lets forget the child theme for now and add this on your Custom CSS on Customizer.

footer.x-colophon.top {
    background-image: url('http://newsite.benfranklincraftswi.com/wp-content/uploads/2016/11/tan-Ripple-30.jpg');
    background-repeat-y: no-repeat;
}

And then remove the section where you applied the ripple background.

Hope it helps, Cheers!

[newskywebsites]

I LOVE CSS MAGIC!!! You are the best!! Thanks so much!!
Dawn

[Rahul]

Glad we were able to help you out!

If you have anything further to ask, kindly let us know. We’d be happy to assist you with anything.

Thanks!

[newskywebsites]

Rahul, in an attempt to undo the php instructions from earlier, I deleted the new _footer-widget-areas.php file I was told to add earlier. Now my site is terribly broken. Can you or someone take a look?

Urgh,
Dawn

[newskywebsites]

This reply has been marked as private.

[newskywebsites]

Please disregard. I re-installed my child theme and everything works now. It’s all good! Thanks!!

[Author]

Posts