Title: Replacing wave Last modified: August 30, 2016 --- # Replacing wave * Resolved [catwingz](https://wordpress.org/support/users/catwingz/) * (@catwingz) * [10 years, 5 months ago](https://wordpress.org/support/topic/replacing-wave/) * Hi, * I loved using this theme for a different site and now have an opportunity to have some fun with it on another. My intention is to create a child theme where the wave graphic is replaced with something more specific to this client. The site is [here](http://www.watkinscounseling.com), but at this point I don’t think there is anything to see if you go there. * I have located the #banner-curve (and #no-banner-curve) styles and the wave images in the theme. The thing I am not yet clear about is how the images are called, and also how this will affect how I name the file. If you could give me some guidance on which files I will need besides the style.css it would be much appreciated. * Thank you! Viewing 15 replies - 1 through 15 (of 17 total) 1 [2](https://wordpress.org/support/topic/replacing-wave/page/2/?output_format=md) [→](https://wordpress.org/support/topic/replacing-wave/page/2/?output_format=md) * Theme Author [Shaped Pixels](https://wordpress.org/support/users/shaped-pixels/) * (@shaped-pixels) * [10 years, 5 months ago](https://wordpress.org/support/topic/replacing-wave/#post-6884129) * The image is loaded from the sidebar-banner.php file which grabs the curve images from the theme’s image folder. There are two curves, one for the large and one for the smaller curve. In the sidebar-banner file, there are several instances of the images, for example: * ``` echo ''; ``` * The **wave-fp** is the larger curve while the **wave-page** is the smaller. * Was this what you were looking for? * Thread Starter [catwingz](https://wordpress.org/support/users/catwingz/) * (@catwingz) * [10 years, 5 months ago](https://wordpress.org/support/topic/replacing-wave/#post-6884212) * That’s about all I have been able to figure out. Last night I wasn’t able to get much past that point. * As a start I have placed a copy of sidebar-banner.php in the child theme, together with an images directory containing a copy of the file intended to replace the home page wave. This file I have temporarily renamed wave-fp-default.png to see if I am on the right track. I haven’t created a smaller one for the other image yet. The site doesn’t show my replacement file, so I am thinking that I am missing how the path to the image file is in the sidebar-banner.php code. Either that or there is another piece that still needs to be incorporated in the child theme. My php is pretty minimal. * What am I missing? * Theme Author [Shaped Pixels](https://wordpress.org/support/users/shaped-pixels/) * (@shaped-pixels) * [10 years, 5 months ago](https://wordpress.org/support/topic/replacing-wave/#post-6884228) * This will more likely be the issue… * Change this: * **get_template_directory_uri()** * to * **get_stylesheet_directory_uri() ** * Reference: [https://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri](https://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri) * Thread Starter [catwingz](https://wordpress.org/support/users/catwingz/) * (@catwingz) * [10 years, 5 months ago](https://wordpress.org/support/topic/replacing-wave/#post-6884231) * I really appreciate your help with this. I have been envisioning this for awhile and am looking forward to seeing it work. * That got it a step closer. I changed all instances of that line of code in the sidebar-banner.php. When I refreshed the wave had been replaced by a horizontal grey band with ‘banner curve’ in small text in the lower left corner of the band. Possibly an alt tag?—this is the only text on the page which can’t be selected. It does this on all pages now. * I tried inspecting the element and it comes up with the id of ‘no-curve’ even though the settings are for the curve to show on all pages, large on the home page. * Next? * Theme Author [Shaped Pixels](https://wordpress.org/support/users/shaped-pixels/) * (@shaped-pixels) * [10 years, 5 months ago](https://wordpress.org/support/topic/replacing-wave/#post-6884235) * It’s kind of hard to actually envision this because I cannot see your results or really have an idea of what kind of graphic is replacing the curves; is to exist on all pages; is it still required to overlay the bottom part of the banner image? etc… * The small text in a grey background sounds like that is the ALT tag, but your custom image is a broken path. I just tried a child theme on my local test site and was able to show the custom image when I replaced the curve image. So it sounds like your sidebar-banner file is not finding your custom image. When I did mine, I did this for the full path: * ``` banner curve ``` * It also worked this way when I renamed the custom image as test-default.png: * ``` banner curve ``` * That one of course is if you plan to have different colours of your custom graphic that are assigned to the same colour as the parent theme choices are. * Thread Starter [catwingz](https://wordpress.org/support/users/catwingz/) * (@catwingz) * [10 years, 5 months ago](https://wordpress.org/support/topic/replacing-wave/#post-6884285) * My objective is to come fairly close to recreating what you have done with the wave, using the large one at the top of the home page, and the smaller one for the other pages. At this point I am only working with the home page. My file is slightly taller than the wave is. Instead of a wave it is a border of foliage and flowers. I know I will need to adjust the positioning after I am able to see it. As with the wave, there will be some overlap of the banner. * I didn’t see any errors in my code, but after seeing your examples I have simplified mine to exclude the color scheme option. It isn’t showing yet so I am clearly missing something. * `get_stylesheet_directory_uri() . '/images/foliage-fp.png" alt="foliage"` * [Here](http://www.awesomescreenshot.com/image/868010/e86d33eb012e8627a112599f3b139d6a) is a shot of the file structure and [this](http://www.awesomescreenshot.com/image/868021/5919a50bedfa1e1358b7fdafe5784f93) is a shot of what I am currently seeing. Thank you * Thread Starter [catwingz](https://wordpress.org/support/users/catwingz/) * (@catwingz) * [10 years, 5 months ago](https://wordpress.org/support/topic/replacing-wave/#post-6884286) * I clipped the code when I copied it. Here is the full block— * ``` foliage'; ``` * Theme Author [Shaped Pixels](https://wordpress.org/support/users/shaped-pixels/) * (@shaped-pixels) * [10 years, 5 months ago](https://wordpress.org/support/topic/replacing-wave/#post-6884290) * The screenshot tells me that the image is not found and only the ALT is showing…. but even the ALT tag is not correct if it says “banner curve” instead of “foliage”. * Again, it’s hard to tell what is happening unless I had access to the site because I use the browser’s webmaster tools to troubleshoot (I use chrome for that). * But is seems that something is not done correctly with your child theme somewhere. Again, moments ago I was able to get a custom image to replace the curve on my test child theme. * There is one thing though….make sure the code you change to your custom image is in the correct area of the sidebar-banner file. There are two instances, one for the front page and one for pages. The top part is for the front page otherwise the bottom half is for pages. * Can you post a link to your curve replacement image here? I’m going to use your image on my test. * Thread Starter [catwingz](https://wordpress.org/support/users/catwingz/) * (@catwingz) * [10 years, 5 months ago](https://wordpress.org/support/topic/replacing-wave/#post-6884318) * The path is [here](http://watkinscounseling.com/wp-content/themes/longevity-child/images/foliage-fp.png) * (It was nice to see it again—even though it’s still not where it belongs!) * Thank you * Theme Author [Shaped Pixels](https://wordpress.org/support/users/shaped-pixels/) * (@shaped-pixels) * [10 years, 5 months ago](https://wordpress.org/support/topic/replacing-wave/#post-6884319) * OK, I think I know what might be happening here. First, I have to make assumptions here because I don’t have access to the site or really know what your overall plan is for this. * First, if your image is named as **foliage-fp.png**, then make sure your code path looks like this: * ``` short description ``` * Next, if you have no banner published, but you want your foliage image to show, then that path above needs to be added to the sidebar-banner.php file around line 39. This is the part of the code that says, if no banner is published, then use this. Also make sure the Show banner curve setting is checked to be seen and not disabled. * As for positioning, you will have to play around with some CSS because by default, the curve graphic is not as big as your image is, so it requires little space in height; yours requires a LOT more. The default positioning of the curve graphic is this: * ``` #banner-curve { bottom: -5px; } ``` * But that is based on a curve image that is only 90px in height, your’s is 333px. You’re going to have to increase the bottom: -5px to something much larger, like- 160px (a negative position). * But it doesn’t stop there, you need to adjust the #content padding at the top because now your new graphic is going to move down overlapping your content area. Do you will need to increase the padding-top to something large as well. Something like * ``` #content {padding-top: 200px;} ``` * As simple as it seems to replace the curve graphic, it’s actually a lot more complicated because of the size. However, the above should point you in the right direction. * One side note…when publishing a banner, this kind of changes the dynamics of your negative px positioning when no banner is used. So you will have to work out how to do CSS to change when a banner is published because then your banner curve container needs to have a bottom of 0 * ``` #banner-curve { bottom: 0; } ``` * Then your #content container needs to be back to normal then for the top padding. * What seems simple can often become very complicated. I’m encountering that with my next theme I’m developing; I wanted to do something I thought would be easy but it turned out it was a lot more complicated…in fact, not really achievable, so I had to make some sacrifices. * Thread Starter [catwingz](https://wordpress.org/support/users/catwingz/) * (@catwingz) * [10 years, 5 months ago](https://wordpress.org/support/topic/replacing-wave/#post-6884326) * Yahoo! I still need to make some of the adjustments from the rest of your instructions, but the first part gave me an “ah-ha.” I added a dummy banner image and the wave- replacement was immediately visible. You can see it in place [here](http://www.awesomescreenshot.com/image/870582/76f18ae601b21874936c681f174c4552). I think she is going to want a skinny banner image, so having the tall wave replacement may end up taking up about the same amount of space. * I am going to leave this unresolved until I am sure I have a handle on the adjustments, but I would count this 95% of the way there. 🙂 * Thank you! * Theme Author [Shaped Pixels](https://wordpress.org/support/users/shaped-pixels/) * (@shaped-pixels) * [10 years, 5 months ago](https://wordpress.org/support/topic/replacing-wave/#post-6884328) * Good to hear….now, although this topic is really outside of support and related more to customization issues, I hope to get a glowing review and stars for helping out here 🙂 * Thread Starter [catwingz](https://wordpress.org/support/users/catwingz/) * (@catwingz) * [10 years, 5 months ago](https://wordpress.org/support/topic/replacing-wave/#post-6884329) * I believe I have already given you a 5-star review from the last site, but if I have I think I can add to it 😉 * Theme Author [Shaped Pixels](https://wordpress.org/support/users/shaped-pixels/) * (@shaped-pixels) * [10 years, 5 months ago](https://wordpress.org/support/topic/replacing-wave/#post-6884330) * lol…not required. I was thinking that you did but I went looking for your username but wasn’t able to see it in any of my free theme reviews. Anyway, what is important here is to make sure your setup is working 100%. * Thread Starter [catwingz](https://wordpress.org/support/users/catwingz/) * (@catwingz) * [10 years, 2 months ago](https://wordpress.org/support/topic/replacing-wave/#post-6884426) * I am picking this up where I left off, sort of… This is a [different site](http://barlowstrategies.com)( which you won’t be able to view yet) and different images, but the same files and code. The first site lost it’s owner and is waiting for the right one to come along to be able to go live. * In the current site I have the home page working perfectly with a new banner and a file looking like deckle-edged paper in place of the wave. Now I have moved onto the other pages and have gotten stuck. Once again, I am getting the alt tag description but not the image standing in for the wave. The following is a link to the [ pastebin file](http://pastebin.com/rEtmXBJN) for the sidebar- banner.php. I am assuming that is where my problem is but haven’t been able to spot it. Any assistance would be hugely appreciated. * Thank you Viewing 15 replies - 1 through 15 (of 17 total) 1 [2](https://wordpress.org/support/topic/replacing-wave/page/2/?output_format=md) [→](https://wordpress.org/support/topic/replacing-wave/page/2/?output_format=md) The topic ‘Replacing wave’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/longevity/1.5.2/screenshot.png) * Longevity * [Support Threads](https://wordpress.org/support/theme/longevity/) * [Active Topics](https://wordpress.org/support/theme/longevity/active/) * [Unresolved Topics](https://wordpress.org/support/theme/longevity/unresolved/) * [Reviews](https://wordpress.org/support/theme/longevity/reviews/) ## Tags * [child theme](https://wordpress.org/support/topic-tag/child-theme/) * 17 replies * 2 participants * Last reply from: [catwingz](https://wordpress.org/support/users/catwingz/) * Last activity: [10 years, 2 months ago](https://wordpress.org/support/topic/replacing-wave/page/2/#post-6884429) * Status: resolved