This upgrade has broken a number of appearance elements on my site, and after poking around a bit I'm not sure how to solve.

The biggest problem is the sudden appearance of a largish (25px?) margin between the top of the page and the %logo. Previously the %logo was flushed to the top of the page. I thought, perhaps, that I'd included an html or css insert to accomplish this but I don't see it in that section, which is otherwise intact with the custom inserts I'd previously set. Regardless, I'd like to know how to remove this margin. You can see it here: http://tonyortega.org

The second biggest problem (and perhaps it's related) is that I don't believe the CSS inserts are being recognized. I can see them there in settings, but they're not working so I don't know what's happening. This is especially problematic because I am/was using a CSS insert to position my banner ad, which has now disappeared (I am/was positioning it inside the header image using the Overlay Header Image feature).

What release did you upgrade from/to?

I don't believe the CSS inserts are being recognized. I can see them there in settings, but they're not working so I don't know what's happening.

This generally means you have a syntax error in your CSS causing everything after it to be ignored.

Thanks for the reply Juggledad. I do not recall which version I upgraded from, but it's been awhile and I probably missed a few updates. It's safe to say that it wasn't from the last version/update.

With respect to the CSS inserts, the code itself is fine, and is the same code that was fine in the previous version (whatever that version was). I'll paste below, however, the full contents of my CSS Inserts field:

#banner-top { position: absolute; right:7px; top: 7px; }

h1 { font-size: 23px; line-height: 1.3; margin: 1em 0 .2px; }
h2 { font-size: 23px; line-height: 1.3; margin: 1em 0 .2em; }
h3 { font-size: 18px; line-height: 1.3; margin: 1em 0 .2em; }
h4 { font-size: 15px; margin: 1.33em 0 .2em; }
h5 { font-size: 1.2em; margin: 1.67em 0; font-weight: bold; }
h6 { font-size: 1.1em; margin: 1.67em 0; font-weight: bold; }

div.widget-title {
font-size: 12px;
}

.widget ul li {
padding: 10px;
border-top: 3px solid #ccc;
border-bottom: 6px solid #fff;
font-size: 12px;
line-height: 1.3;
}

Also be sure you go into the header and footer sections of the theme options and hit the green save button. That is necessary because of some changes to the theme code.

Thanks lmilesw. I didn't even notice that the footer was gone (it was only a short copyright notice) but saving that resolved not only the footer but the white space at top as well, for whatever reason.

My CSS Inserts problem remains, but I only just responded to Juggledad.

If you are trying to move your ad banner to the top you should use "top: -60px" or something around that to move it up.

The placement of the banner isn't an issue; the banner isn't appearing at all. None of the CSS Inserts are showing up.

div.widget-title {
font-size: 12px;
}

why are you doing this in the CSS Inserts and not the 'Style WIDGETS' theme settings?

Originally Posted by juggledad

why are you doing this in the CSS Inserts and not the 'Style WIDGETS' theme settings?

I don't know why I did that like that; but probably because I was having a problem getting that style to read via the Style Widgets settings. Regardless, that's the least of my problems; I can tell that the size and line height of the H1 H2 etc classes aren't correct, and I obviously the banner ad isn't appearing. For what it's worth, the banner ad is being called up via the following code inside OVERLAY HEADER IMAGE:

<div id="banner-top">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-3646955839994638";
/* 468x60 */
google_ad_slot = "4955358935";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

And again, all this worked fine just prior to upgrading.

I'm seeing a banner AD in the header. have you cleared your browser caches - tried another browser or another machine?



Your CSS Inserts are being applied, but they are overridden by mre specific CSS. Take the H# for the widget title. The code is thus:

<div id="categories-3" class="widget widget_categories">
<div class="widget-title">
<h3>Categories</h3>
</div>

your h3 CSS is not applied because there is a CSS statement using 'div.widget-title h3' as the selector and since that selector is more specific, it will be used.

You have two choices, use the same selector in your CSS Insert or add the '!important' option to your CSS. Just remember if you add it to the rules for the selector 'h3' it may affect other h3 where you don't eant it to.

Thanks Juggledad. Indeed, there it is now. I had cleared my cache earlier, I don't know why it disappeared and reappeared; it just made sense that it had to do with the other CSS inserts not appearing. But maybe it had something to do with Google.

With respect to the CSS , I guess something changed between updates with respect to who wins in a CSS fight between Atahualpa and x or y widget or WP. Because only two months ago these same styles used to render the content widgets thusly:

https://web.archive.org/web/20140214...onyortega.org/

Isolating to one example, for instance, with the title "Categories", the same code...

<div id="categories-3" class="widget widget_categories"><div class="widget-title"><h3>Categories</h3></div><select name='cat' id='cat' class='postform' >

...looks completely different in February than it does today, and I did nothing to effect that change. But my reading of this is that the CSS Insert [h3 { font-size: 18px; line-height: 1.3; margin: 1em 0 .2em; !important}] is now being ignored in favor of, as you say, the more specific CSS. Anyway, I'll figure it out through trial and error. I appreciate the help from both of you.

There are several differences in the CSS for the archived a page and the current page
1) new page has

div.widget-title {
font-size:12px
}

old page did not

2) new page has

h2 {
font-size:23px;
line-height:1.3;
margin:1em 0 .2em;

}

old page did not

The difference in size would probably have to do with the base PX size times the EM value.