Theme author note: home page sidebars are turned off by default!

I’ve clicked it, but still no sidebar. It also says “sidebars” and doesn’t specify one or two, right or left.

Also my child theme’s style.css is not overriding the theme’s. I want to get rid of borders in tables.

I don’t want to make a link to a developing IP but it can be copied and pasted: 207.210.108.146/~wageleco/

The layout is set higher up in the options page – there’s a row of images showing the sidebar choices e.g. one column, two column content left etc. This layout is universal to the site but you can turn those sidebars on or off on the home page i.e. the home page can be one column OR it can be the layout that you chose for the rest of the site. As yet it’s not possible to change the layout for individual posts and pages from the options page.
Your child theme has a little bit of CSS in the child theme stylesheet, including the borders being removed from tables, but that CSS is commented out.
UPDATE: just realised I need to change that style.css so that users don’t put css within the commented section. My mistake.

So can I fix that mistake on my end?

I have selected the left bar layout and if I use Simple Home Page 01 or 02, I see it, but I’m using Advance blank home page.

ANOTHER PROBLEM: The inside page I created goes to my server’s 404. The page permalink is at:
207.210.108.146/~wageleco/enneagram-5/

The Advanced blank page is literally that – blank – and it’s intended only for those who know PHP and HTML.

Your best bet is to try from a different angle. Copy the contents of home-page-simple-01.php and remove the central portion which begins with

<div class="outer-home-page outer-home-page-simple outer-home-page-simple-01"> and ends with

</div><!-- end outer-home-page outer-home-page-simple outer-home-page-simple-01 -->

Now add your HTML etc. where this was and copy and paste the whole lot into home-page-blank.php

The inside page you created – what did you click on to get to it (or not get to it)? Was it from the home page? Or was it from within the Admin area e.g. you created a Page then went to view it and it wasn’t there? If the latter then it could be a permalink problem (yo might have to resave the permalink page) or it could be because your test server (?) isn’t set up correctly.

OK, I was able to make the home page work, all except for the home-page-bottom-widget-spacer home-page-widgets-container which I set to height 0 and all the colors to my color number. I see it as a thin gray bar with a white border in Firefox, though it looks fine in Safari. I’m also still getting table borders.

You can now see the page I created in the side widget, but it still goes to my server’s 404 page.

TWO OTHER PROBLEMS: The text is not wrapping properly – words are breaking in every browser I’ve used. It also is not looking good in iPhone.

I’m getting ready to try another theme.

I’m not seeing the home-page-bottom-widget spacer etc. as gray but I accept that the div. shouldn’t appear if there are no widgets. My mistake – will rectify it in next update. I did extensive testing but never saw the div appear visually. An oversight.

Table borders – that was a design decision. There’s a theme unit test where tables are inserted and I figured that in the test they looked pretty naff without borders. So I put the borders in and if I remember rightly they’re the same color as the text color. The CSS in the header is this:

div.left-sidebar table, div.left-sidebar th, div.left-sidebar tr, div.left-sidebar td {border-color:#fffff0;}

It ought to be be over-ridden by inserting the following in the very top options box:

<style type="text/css">div.left-sidebar table, div.left-sidebar th, div.left-sidebar tr, div.left-sidebar td {border:none;}</style>

or if that isn’t specific enough border-width:0

The words not wrapping is a faulty design decision of mine, again rectified in next update. I put:

table {word-break: break-all;}

Somewhere during the testing phase I had tables that weren’t showing their contents correctly – I can’t remember the ins and outs of it, probably tables that were stretching beyond their content width because words were too long. Didn’t think that one through. So the temporary workaround is:

table {word-break:normal}

Won’t look good in Iphone. At the moment this isn’t a responsive theme for fixed layouts – fluid layouts are more responsive in the sense that they retain their proportional width. That’s an option that I’ll be adding in due course.

The workaround will be to add something like this into the top options box (untested) or into a child theme’s stylesheet:

@media screen and (min-width: 640px)  {
div.wrapper {width:100%;}
div.content {width:80%;}
div.left-sidebar,
div.inner-wrapper div.long-left-sidebar-background {width:10%;}
div.right-sidebar,
div.inner-wrapper div.long-right-sidebar-background {width:10%;}
}

@media screen and (min-width: 768px)  {
div.wrapper {width:100%;}
div.content {width:80%;}
div.left-sidebar,
div.inner-wrapper div.long-left-sidebar-background {width:10%;}
div.right-sidebar,
div.inner-wrapper div.long-right-sidebar-background {width:10%;}
 }

Change percentages to px or ems or whatever as you wish.

Update: the links to 404 pages doesn’t appear to be a theme issue. The theme shows the same link as the 404 url. It doesn’t show a broken or mangled link. So it’s something server-side, I suspect.

My child theme’s stylesheet is not overriding the main theme. The custom stylesheet seems to be making some effect.

I tried inserting the code as you wrote into the header option box and that did get rid of the table borders, but it also took away the stated width. It also got rid of the bottom widget area, but when I added div.wrapper {width: 85%;} the widget area showed up again in Firefox on Mac. Then I decided to add the word-break code in there, too, and again the widget area disappeared. When I added a 3rd variable to that area, it appeared again, but it wasn’t working, so I deleted it. The @media code was actually affecting the left & right sidebars in my desktop browser, too, so I changed them to 20% for left and 0% for right.

The text seems to be wrapping correctly except on iPhone where I’d prefer the text to shrink only in the sidebar so that it would fit and it might be nice to have a larger sidebar on just the mobile version and the top search field repositioned so as not to obstruct the header image. I’ll have to figure out how to edit those items, but first I’ve got to figure out how to make inner pages work.

Thanks!

Your child theme’s css is within comments. CSS comments look like this:

/* stuff */

You need to remove those comments for that CSS to work. My fault – I didn’t make it clear in the theme. Rectified in the next update.

The reason the width appeared to go was that you pasted the media styles into style-custom.css and those media styles have a width of 100%. They were meant to be example media styles only. You would need to create a whole bunch of them for different widths. A good starting point would be this:

@media screen and (min-width: 600px)  {
your css
  }

@media screen and (min-width: 640px)  {
your css
  }

@media screen and (min-width: 768px)  {
your css
  }

@media screen and (min-width: 800px)  {
your css
  }

@media screen and (min-width: 980px)  {
your css
  }

@media screen and (min-width: 1024px)  {
your css
  }

  @media screen and (min-width: 1280px)  {
your css
   }

A very useful tool is in Firefox and it’s called ‘Inspect Element’ (right click on the page and select ‘Inspect Element’.) The toolbar will probably appear at the bottom of the page and what you’re looking for is a square icon with an arrow in it. Click on that and hover your mouse over the page and a dotted line appears around the elements you’re hovering over. Click on the element and in the right hand side you’ll see the styles for that element, which can be turned on or off and adjusted, whilst in the left hand side you’ll see the HTML for that element.

Another brilliant one (probably on other browsers but I use FF) is an ‘Addon’ called Webdeveloper. One of its many options is ‘CSS’. You can view all CSS on one page which makes it easy to see what’s going on.

I got the inside pages to work, though I’m not sure what I did right – fooled around in the PhP Admin, but I didn’t actually edit anything. Unfortunately, the one inside page I created is not formatted as shown in the editor. There should be spaces between the lines. I was going to figure out how to center the titles, but there are more problems with it than that. The paragraph tags are not behaving as expected.

Also the top menu is showing up again. I had put

div.top-navigation .top-navigation {
display: none;
}

in style-custom.css in the child theme. It may have happened after I changed the widget from Pages to Custom Menu, but I unchecked everything in Menus that go to Top Menu.

I use the Firefox inspector tool to find out what style sheet is affecting an element and the name of an element, though I don’t know how to use some of the other parts of it.

I haven’t yet used your recommendations for editing the mobile styles, I am planning to do that once I get the desktop view right.

I’ve spent so much time on your theme that I’d rather not change it. I very much appreciate the help.

The spacing is a bug or an oversight on my part – I have a bug fix page

https://www.alchemweb.co.uk/bugs-fixes/

The solution is to paste this into the very top options box as a temporary workaround:

<style type="text/css">

h1{
margin: .67em 0
}
h2{
margin: .75em 0
}
h3{
margin: .83em 0
}
h4,
p{
margin: 1.12em 0
}
h5{
margin: 1.5em 0
}
h6{
margin: 1.67em 0
}

</style>

The reason for all these CSS bugs is that I decided to make font sizes and font families easy to change in the Premium version of the theme. This meant going through the stylesheet with a fine toothcomb trying to simplify it. I was using ems, which are contrary. I used rems in a few key places to replace them. In the process I oversimplified and missed one or two bits out. As always, rectified in the next version.

Menus – the only way at present is to remove all the menu items from the top menu but in ‘Manage locations’ have the top menu selected. Next version I shall change this. There is a WordPress code option to have a default menu of pages if no menu exists and this is the option that I chose for the top menu. But too many users find it confusing so I shall change it.

OK, I appreciate all the help with this theme. One more:

I’m using a plugin on the left sidebar and it shows up horizontal with other themes. How can I turn off the list that is being created there that makes it show vertically?

Do you mean the social media icons? If so I would suggest that there’s a setting there that can display them horizontally. If not try this in the top options box (wrapped in style tags):

ul.scfw_16px li, ul.scfw_24px li, ul.scfw_32px li, ul.scfw_16px li a, ul.scfw_24px li a, ul.scfw_32px li a {
    display: inline-block;
}

I don’t know what you mean by “top options box”. I put it in my child theme’s custom css which works for some styles, but it didn’t work for this. Where should I put it? Did you mean the “Add CSS, javascript or shortcode in the <head> </head>” area? I tried that, too, and it didn’t work.

Thanks!

Note: I added “!important” and it worked. Thanks again.

Yes, the ‘Add CSS etc.’ box. Make sure that the styles begin and end with:

<style type="text/css">
your CSS
</style>

This should over ride any child themes as it’s further down the pecking order of style sheets – external styles, then internal styles, then inline styles take precedence over previous styles.

The reason the custom css sometimes works, sometimes doesn’t is that in the header of this theme there are external styles e.g. style.css called, then internal styles, then the external style style-custom.css I should have made it much clearer that style-custom.css is only to be used in very rare circumstances (I’ve done that now in the next version) because sometimes the internal styles will take precedence over style-custom.css and sometimes the other way round.

Usually internal styles take precedence over external styles but it depends if the external styles come before or after the internal styles and it also depends on how ‘specific’ styles are e.g. div.outer div.inner {color:red;} is more specific than div.inner {color:red;} and so carries more weight.

If you’ve got this far then the short answer is take your CSS out of style-custom.css and put it in your child theme’s style.css and it might work, or failing that put it in that very top options box again (so long as there’s not loads of it because internal styles have to be loaded every time a page is loaded whilst external styles are cached on the user’s computer).

If it still fails to work you’ve probably done something wrong with the CSS – first thing to do is validate it. https://jigsaw.w3.org/css-validator/

I always choose direct input and copy and paste it in.

One more querk: The post-date icon in the corner of all search results. How do I get rid of it, preferably without deleting your code. Thanks!