Shapely widgets not rendered correctly

Shapely
1

Hi,

I installed the shapely theme, customized and colors and set it to a static page (plus filling the site identify).

Now when I create a page, and put a text widget there, it looks like it should.
But when I instead put “[Shapely] Parralax Section F…” and select a picture and text, the picture is not rendered (does not matter if it is background, left, …), and the text is in the middle. When I add another widget of this type, the text of these two just clutter above each other. The more widgets, the more they clutter above each other.

If I add another Shapely Widget (e.g. Feature Section) it has the same issue.

What am I doing wrong or forgetting?

Only Jetpack and Yoast Seo plugins are active. (but the problem is also present without them)

2

I am using wordpress 4.5.3 btw

3

Hi @wphelp,

I hope you are well today and thanks for posting here.

Could you please share me your site URL where it’s happening so that i can troubleshoot it?

Also please share the screenshot from Widgets screen of widget settings in the admin area where you have added these widgets.

Kind Regards,
Movin

4

Hi @Movin

thanks for having a look at it!
the URL is http://balabanova-madl.com/frontpage/

With the screenshot of the widgets you mean the one for this example page? I have this attached.

Greets!

5

Please download the latest version of Shapely theme from this page https://github.com/puikinsh/Shapely and install it on your site and try temporary removing custom CSS code added in your site.

6

Hi @Movin,

I installed the shapely theme from the github and removed the custom css - sadly it still looks the same.

Greets

7

I troubleshooted it on your site and found it is happening because some invalid HTML added by the widget and its content so try removing widgets one by one to confirm which widget is causing the issue.

Also the custom CSS code that you have added in the style.css file of the theme like following is causing it not to display well so please temporary remove that custom CSS code from style.css file.

section, footer #colophon {
  position:absolute;
width:100%;
bottom:0;
height:160px;
padding-top:10px;
}

You can use the original CSS code of style.css file from here https://github.com/puikinsh/shapely/blob/master/style.css

8

Why was the style.css not overwritten when I reinstalled the theme from your github? Does that mean I did something wrong?

I changed the style.css with the one from the github via the wordpress edit function.

While playing with the widgets I find the following issues:

I start with a text widget and add “Call for Action” underneath. looks fine. Now I add another text widget below and two things happen: the call for action widget is always at the bottom of the page, doesnt matter the order. Plus it overlays the lower third of the second text widget - doesnt matter which text widget it is. Even if I remove all HTML from the text widgets and leave them pure text.
I have attached an image for this issue.

Then there is an issue with the “Parallax Section for …”.
I only put this as the only widget on the page. I renders fine if I set the picture to left/right/top/bottom, however if I set it to Background (either small or full) the image is not being displayed.
I think this is the main issue why the web site is not displayed correctly.
I added a screenshot with picture left one with and background full.

I left the page http://balabanova-madl.com/frontpage/ with just the Parallax Section for … widget with background full.

I hope this helps.

Thank you!

9
Why was the style.css not overwritten when I reinstalled the theme from your github? Does that mean I did something wrong?

Yes may be depending on how you reinstalled it. You have to completely delete the existing theme and then reinstall the downloaded theme.

I start with a text widget and add “Call for Action” underneath. looks fine. Now I add another text widget below and two things happen: the call for action widget is always at the bottom of the page, doesnt matter the order. Plus it overlays the lower third of the second text widget – doesnt matter which text widget it is. Even if I remove all HTML from the text widgets and leave them pure text. I have attached an image for this issue.

If you share the page URL from your site where it’s happening then i can help you to resolve it.

Then there is an issue with the “Parallax Section for …”. I only put this as the only widget on the page. I renders fine if I set the picture to left/right/top/bottom, however if I set it to Background (either small or full) the image is not being displayed. I think this is the main issue why the web site is not displayed correctly. I added a screenshot with picture left one with and background full.

This is happening on your site due to the javascript error message occurred on the site as shown in the attached screenshot.

This issue is fixed on the following pages in the latest version of Shapely theme on github so if you use the Shapely theme from github properly then it must resolve.

https://colorlibsupport.com/t/wp-tiles-and-shapely-issue/#post-51075

10

Thank you! This resolved it!

I installed the github version over the already installed version and that was the issue.
I removed the theme as you proposed, reinstalled fresh with the github version and now it looks like it should. also the call for action widget can now be at any position.

question: why is the github version not the version that is the download package here?
That would have saved me a lot of trouble.

11

You are most welcome here :slight_smile:

question: why is the github version not the version that is the download package here?

We update it periodically from github version and will update it soon again.