Support » Fixing WordPress » Problem With Ecwid Store Widget in Sidebar on Blog Posts

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi,

    We inspected your site and it seems like the problem is caused by the custom CSS styles that you or your developers placed on the site. Here is the details.

    Your site styles contain the following code:

    /* store widgets */
    #content #text-10, #content #text-69, #content #text-9, #content #text-5, #content #text-4 {
      padding: 0px 15px 15px 15px;
      margin: 0px 14px 0px 14px;
      clear: both;
      height: 100%;
      overflow: hidden;
      border: 1px solid #080034;
      background: url('images/bar.gif') repeat-x left top;
      background-color: #fff;
    }
    /* end store widgets */

    File: http://alpacameadows.com/wp/wp-content/themes/alpacameadows/style.css
    Line: 890

    This code makes the sidebar widget look the way it looks (white background and purple header). In the beginning of the code, you see the elements that it applies to: #content #text-10, #content #text-69, #content #text-9, #content #text-5, #content #text-4 . In fact, those are the same element (sidebar widget), but it is marked with different IDs on different pages for some reason. Those different IDs is the root cause of the problem, because some of the new pages or post that you create assign different IDs to the same element, and on the new pages (like the blog post you mentioned), the sidebar widget is marked with a new ID, which break the CSS I mentioned.

    There are two ways to fix that:
    1) [Recommended] . Change the code of the sidebar widget in your WordPress site to make it appear with the same ID on each page. In this case, every new page or post you create on your site will inherit the styles your already have and the sidebar widget will look the same everywhere. This requires programming skills, so you will probably need help of a developer here. If you know the author of this theme or this particular widget, you should ask them to fix that.
    2) Quick fix for the particular blog post page. To add the blog post you just created to the list of the ‘proper’ pages, you can add a small fix to the CSS code I posted above. Just change the first line of it so it looks this as follows:

    #content #text-10, #content #text-69, #content #text-9, #content #text-5, #content #text-4, #content #text-130 {

    So the whole code blok will look as follows:

    /* store widgets */
    #content #text-10, #content #text-69, #content #text-9, #content #text-5, #content #text-4, #content #text-130 {
      padding: 0px 15px 15px 15px;
      margin: 0px 14px 0px 14px;
      clear: both;
      height: 100%;
      overflow: hidden;
      border: 1px solid #080034;
      background: url('images/bar.gif') repeat-x left top;
      background-color: #fff;
    }
    /* end store widgets */

    You can edit the styles.css file to change this code in your WordPress admin backend (Appearance -> Editor)

    Hope this helps.

    Thank you so much for taking the time to try and help me. I just wish I understood and could implement your answer. I am without a developer so trying to muddle through this myself. I attempted to edit the styles.css file as you suggested (Appearance->Editor) but now have the opposite problem with blog posts looking correct http://alpacameadows.com/doll-makers-customer-gallery/, but the Farm Blog page not looking right http://alpacameadows.com/whats-new/

    I am not sure at this point exactly what I did, but do know I am quite frustrated. I feel like it might have something to do with the various widgets?

    If there is anything you can do to simplify your answer for a non-developer and help further, I would certainly appreciate it.

    Thanks again!

    Julie Petty

    Welcome to Alpaca Meadows

    Hi,

    You’ve done everything right, as far as I can see. The only issue is that you missed a comma in the code you put on your site. Your code looks like this right now:

    #content #text-10, #content #text-69, #content #text-9, #content #text-5, #content #text-4 #content #text-130 {
    	padding: 0px 15px 15px 15px;
    	margin: 0px 14px 0px 14px;
    	clear: both;
    	height: 100%;
    	overflow: hidden;
    	border: 1px solid #080034;
    	background: url('images/bar.gif') repeat-x left top;
    	background-color: #fff;
    }

    In the code that I suggested, the first line looked like this:
    #content #text-10, #content #text-69, #content #text-9, #content #text-5, #content #text-4, #content #text-130 {

    Mind the comma after #content #text-4 . Your code misses that comma. To avoid this mistake, you can just copy and paste the code from my previous message.

    I apologize for not being back here for three months. I’d like to tell you my problem is resolved but now I have the same problem as before, except on a different page, http://alpacameadows.com/the-fiber-studio/

    Hope you can help!

    Julie

    Hello everyone,

    Just an update from Ecwid here. We emailed Julie regarding the issue, and it was solved more than a month ago. There was the same problem with styles and we just slightly changed the CSS to apply the styles for the sidebar on the Fiber Studio Page.

    We believe, Julie simply had no time for updating this thread.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Problem With Ecwid Store Widget in Sidebar on Blog Posts’ is closed to new replies.