[noah]

Thanks. (I spend my time writing editorial for this site, and only deal with CSS and HTML intermittently. The result is I can forget basic things.)

[noah]

I write this for any other complete CSS idiots out there:

For some time, even years, I have thought you copied the right hand side CSS element box in the Chrome / Firefox inspector and copied this into your CSS file.

(This has not been altogether that successful over the years, but then I do the absolute minimum of this, using WordPress to ... convey words. I'm not a developer at all.)

Usually, what CSS I have done has been provided by kind souls, such as Victor, above.

I fact, you click on the link in the element inspector (in Chrome), get to a copy of the entire CSS file and make the amendments (if they have not been made by clicking the link).

You then copy that entire file and place it in your website's CSS stylesheet.

(Well, I did not know, so may be others don't.)

In this case, the order of doing the amendments was important:

1/ reduce the depth of the header;
2/ reduce the space around the search box widget area;
3/ Then increase the size of the logo.

I still have duplicated comment and post RSS for some reason under the menu, which I think means chopping off some HTML. Another time.

This will strike many here as terribly ill informed ... in mitigation the words on this site (approx 100,000 of them) have been quite influential ...

[noah]

I am sorry I am so useless at this.

Are you saying I just write:

add background-size: DO I SPECIFY 960?
contain; to .header-image #header #title-area

at line 202?

Not this, which is what I have copied from Chrome CSS edit?

.header-image #header #title-area {
background: url(images/logo.png) left top no-repeat;
}

.header-image #title-area, .header-image #title-area #title, .header-image #title-area #title a {
display: block;
float: left;
width: 620px;
height: 162px;
margin: 0;
padding: 0;
text-indent: -9999px;
overflow: hidden;
}

#header .widget-area {
width: 300px;
color: #333333;
float: right;
margin: 0;
padding: 0;
}

what I am trying to achieve is in this pic.

There is too much white space below the header as well.

And duplicated RSS for posts and comments for some reason below the menu.

[noah]

In the end I downloaded the Simple Custom CSS plugin and placed this:

/* Enter Your Custom CSS Here */.menu-item-12539 {
background: #e7112a;
border-radius: 12px
}

It is not very good, but a start.

http://www.leaseholdknowledge.com

[noah]

Hi Victor,

I have done this, adding the class community-nav to the menu builder (and parliament-nav).

But this is not working:

.community-nav {
background: #e7112a;
border-radius: 5px
}

[noah]

Double opt-in has always been active and has had no effect on the spam sign-ups.

I have had to dump Genesis eNews Extended. Can you add a captcha with Gravity Forms? I could not see security addressed on their website, yet it is essential to block bogus sign-ups.

[noah]

No, I have put the css in exactly the same place throughout.

I do not know why "inherit" should work. Somehow it is picking up the padding-bottom: 0px; of the first two edits, rather than the widget div padding-bottom: 2rem; which it possibly SHOULD inherit. I have no idea why this is working.

Adding this turns the header and theme colour for the categories etc red:

#categories-8.widget {
padding-bottom: 0px;

#taxonomy_dropdown_widget-2 {
    padding-bottom: 0px;
    }

So, I have removed it. All the settings are saying News Pro Blue.

It all seems incredibly hit-and-miss. Why does "inherit" work, when padding-bottom: 0px doesn't after it is already applied to two widgets?

And why can I edit the spacing of four widgets, and the theme changes colour by adding a fifth?

I suppose this is all quite intriguing, even fun, if you are a developer, but if you are trying to fill a site with editorial content, it is an appalling thief of time.

[noah]

Unfortunately, adding this edit turns the header text and category menus red.

No idea why.

#categories-8.widget {
padding-bottom: inherit;

#taxonomy_dropdown_widget-2 {
    padding-bottom: inherit;
    }

[noah]

It finally is showing and working.

The problem seems to have been: attempting to change the spacing of three widgets at once.

The changes seemed to work doing them one at a time.

Also, I could only change two of the widgets spacing with padding-bottom: 0px;

I used "inherit" on the last two widgets, which worked.

Any idea why this worked and previous attempts failed? It seems random.

#featured-page-12.widget { 
padding-bottom: 0px; 
border-bottom: 0px solid;
margin-bottom: -29px;

}

#featured-post-33.widget {
padding-bottom: 0px;
}

#featured-post-28.widget {
padding-bottom: inherit;
}

#text-11.widget {
padding-bottom: inherit;
}

[noah]

The problem is that I am using W3 Total Cache and Amazon Cloudfront.

As a result, edits to CSS don't show. Anyone had the same problem?

[noah]

OK, I bottled out of this and stopped ALL attempts to edit the css. Keeping the site active and looking reasonable is the priority.

If you are using a CDN it is not to be done unless you set aside a period when you can disable the CDN and sort the appearance of the site.

For me, this means no search widget by the header and living with too much space between the widgets in the sidebar.

At some point – possibly the spring – I will have another go, but MINIMAL changes to the site with an active CDN seem not to be possible. Or, they are possible but the changes will only be visible <24 hours.

Or, you can delete the Cloudfront setting, make the changes and start again. With the site working nicely, and a lot of traffic, that is not an attractive option.

Here is a good string from the WP Codex: http://wordpress.org/support/topic/plugin-w3-total-cache-editing-css-and-syncing-cdn-files?replies=8.

Brad, thank you for the coding tips.

[noah]

Hi Brad,

I have disabled W3 Total Cache.

Predictably, the code provided did not work straight off. (I suspect I need also to reduce header width.)

I will leave W3 switched off until morning. If the css has not taken by then, I will have to remove.

I do not know why caching, and the almost impossibility of seeing css changes in a reasonable time-frame is not more of a concern on this site and elsewhere.

I suspect the issue is Cloudfront, as I managed css changes five months ago. Now apparently impossible.

Playing with code, if it is not the primary purpose of your site, is an horrific thief of time.

[noah]

Hi Brad,

Thanks for that and for the earlier comment on trying to change a very simple css on sidebar widgets.

Nothing is working. I think I could probably delete the entire css file on my site and it will have no effect for some hours ....

The reason is I am using W3 Total Cache and Amazon Cloudfront. No changes are showing from three hours ago.

It took 15 minutes for Chrome / Firefox to register that I had deleted a widget! (I use Safari, which did register the change instantaneously.)

I don't know how you edit css in these circumstances. I must wait until the morning to see whether the changes have taken place, and possibly 24 hours? Switch off W3 Total Cache? Purge Cloudfront cache, which I am looking at at the moment?

For all I know, the changes to my sidebar css worked two hours ago.

I placed a search widget in my header which will knock out the header making it stack over three decks. But that won't happen for 15 minutes or so.

When I can see the widget in Firefox, I will identify where to place your suggested css.

I will place it and then go to bed and see whether it has worked by the morning.

Is this ... er, normal?

[noah]

I cannot get this to work (or any of the styles on the link you gave, substituting text-11 for whatever number is there).

I am probably doing something very basic wrong, as I only do this sort of thing once every 6 months or so (and then forget).

I am putting the changes to the bottom (and then top, and then line 1,515) of my complete News Pro Theme: Stylesheet (style.css).

Any idea why is not working?

[noah]

I followed Matt's advice in the link above and placed this in the Header and Footer Scripts.

But where do you actually edit the css? Immediately below? In the file itself via cPanel? FTP? It does not appear in the Editor drop down menu along with the other css files.

<link rel='stylesheet' type='text/css' href='http://www.leaseholdknowledge.com/wp-content/themes/news-pro/NewsProchild.css' media="all" />

[noah]

Thanks, but I just cannot get any of these to work on a browser of mine.

I will just have to use other widgets – featured page not a text widget – which might not add so much space.

[noah]

It is not having any appreciable effect when I add this to the bottom of the style.css file :

#text-11.widget {
   padding-bottom: 0;
}

#featured-page-8.widget { 
padding-bottom: 0;
}

(I am not sure why I would want to create another style.css file – a third? Isn't making backup copies of the News Pro child theme files sufficient?)

[noah]

Thanks for that, but it isn't working.

I tried this

#text-11.widget {
   padding-bottom: 0;
}

But also need to remove padding-bottom from #featured-page-8.widget, and the rule.

Any thoughts?

[noah]

The numbering I have discovered how to do.

[noah]

Hi Summer,

Your Home pages on both sites show exactly what I am trying to do.

On sliceofscifi, you have “More News”. At the bottom is the link “More Slice of SciFi News …”.

When you click this you get 15 DIFFERENT news items.

When I do this on Carlex – as you can now see – I first get the SAME items then the rest of the category. Readers would be completely confused by this and not scroll through.

(Also, the page numbers at the bottom of page 2 would be very useful. How are you doing this?)

I assume you are using a simple Genesis Featured Post widget?

Similarly, on dragonpage you have “Dragon Page Blog” displaying three items. Click on “More Blog Entries …” and you get more, but different entries.

And again the useful page numbering …

[Author]

Posts