Expanding post excerpt BG colour; removing top post info line on post excerpt, only

[Mike01]

Hello. It’s been a while since I put up a Weaver Pro site and I haven’t coded since then, so apologies if I ask a stupid question as I’m still relearning what I learned the first time!

Problem 1:
With reference to the example linked below, I want to expand the background colour of the post excerpt title to the edges of the post excerpt content area. I’m a long time out of practise, so please excuse my lack of accurate terminology, but the BG colour should pad out left, right, up and down to where the dotted line currently is. My problem is that the h2 heading of the post excerpt is nested amongst four other areas that border it, so I’m not sure where to begin.
http://lifedescribed.com/

Probem 2:
I’ve used the tick box ‘Hide Top Post Info’ to remove the top post info from the post excerpts, but this has also removed the top post info on single page views as well, and I want to keep those. So I tried entering the following rule in Post Specifics > Custom Post Info Lines > Top Post Info Line

div.entry-meta {display:none;}

But, as you will also see from the above link, this has not quite worked as intended! I can’t see what I did wrong with the formulation of this rule.

Thanks!

[scrambler]

Problem 1-
Extending the title background to the edges of the post block is a bit tricky.

First you need to remove the background color on the title, as it needs to be on the container with custom CSS
If you want the dotted line to also go edge to edge, remove the setings for it too on the title

Then use the custom CSS below in the page editing page per page style box
Removes the padding in the post area
Add styling to the container of the post title

.post-area {padding:0px;}
.post-area .entry-header {background-color:#fefff1;margin-top:-7px;padding:0 10px;}

[scrambler]

Problem 2-
Custom CSS goes in the custom CSS area, by adding CSS to the custom post info line you are actually making the post info line display the CSS as text 🙂

So add your rule in the page editing page per page style box
div.entry-meta {display:none;}

[Mike01]

Hi Scrambler, thanks for your reply.

Problem 1: didn’t quite go as planned. I removed the left and right % padding that was entered under Post Specifics > Post Area and the dotted line under the title. I then entered your rules in the Post Title CSS box (style box?). The rule for removing padding seemed redundant given I’d cleared the boxes already.

This created the desired effect, except that now the text in the excerpt has no padding, as can be seen here:

In the excerpts…
http://lifedescribed.com/

On single page views…
http://lifedescribed.com/hopped-up-on-blogs/

Another problem is that the bottom post info on the excerpts has now reappeared and I don’t know why. There might be a tick box somewhere…

But my first thought is how to pad the excerpt text again. Instead of padding the container, I thought about padding the content area behind the text (if that makes sense – I think I’m using the wrong terms). The problem is targeting the relevant area. I’ve tried post-area and div-entry for example, using variations on rules like this, with various different selectors:

div.entry-summary-clearfix {margin-right: 50px; margin-left: 50px;}

I’ve been entering them in the Post Area BG style box. But my best result was to over-ride my Content Area padding and making everything very narrow, whilst not affecting the excerpt text at all.

I seem to be going around in circles.

Problem 2: I can’t see where to enter the rule. The rule works, but it removes the top post info from both the excerpt and single page views. I only want to remove it from the excerpts and keep it on the single page views. I’ve tried every style box on the Post Specifics tab, and even tried a variation under the Fonts and Custom tab.

Cheers

[Mike01]

I’m currently pondering editing the HTML to give the area I want a unique id. A little voice is telling me this is probably a bad idea.
Edit: I meant to add a class to the post excerpts that includes the padding, not an id.

[scrambler]

You need to read the answers

Pb1-
I told you to insert the rules  in the page editing page per page style box  NOT in the post title CSS+ box!

But you are also now mentioning the single post page, if so the rules should go in Main options > Fonts & Custom > Custom CSS Rule box and you need one modification to cover the single post pages
.post-area {padding:0px;}
.post-area .entry-header,  .post-area .page-header {background-color:#fefff1;margin-top:-7px;padding:0 10px;}

To add padding to the excerpt also add the rule below with the others
.post-area .entry-summary {padding:10px;}

Pb2-
I said to put the rule in the page editing page “Per page Style Box” This is a box inside the Page editing page itself, in the Xtreme options for this page.

[Mike01]

page editing page per page style box

Sorry. I thought that was the CSS box. I did a text search through the help file to be sure and nothing came up.

[Mike01]

Scrambler, thank you very much for your help with the titles problem. I could not have done it without you and it will significantly enhance the look of the website.

Please believe me that I read responses such as yours on fora such as this very carefully and interpret them as best I can, and that I am grateful for the time people such as yourself take, unpaid and often unthanked. That said, for the last half hour I have just been rereading the Weaver Theme Help file and examining the admin and I honestly cannot figure out where the page editing page “Per page Style Box” is. It might be right in front of me and I can’t see it for looking, just as it was in my first post on this topic when I put the ‘don’t display’ rule into the ‘display’ box and couldn’t figure out why it was being displayed!

Could you be just a little more specific as to its location?

Thanks, again.

[scrambler]

This is the page editing page, where the page content editor is as well as all the Xtreme options for this page.
Of course you need to have installed the Weaver Xtreme Theme support plugin to have all the page options.


Below the page content editor, you have a large section called Weaver Xtreme Options for this page. In the middle of that section there is one called “per Page Style” where you can place CSS rules that apply only to this page. It is a Plus Options, but as far as I can tell, you do have Plus.

[Mike01]

Is there an image in your reply? I’m afraid I can’t see it.

Yes, I have Plus and the Theme support plugin.

[scrambler]

When you are in your page editing page, below the content editor, do you have a section called Weaver Xtreme Options for this page?
Image of the page interface options below

https://lzgfcg.by3301.livefilestore.com/y3p8jixvdXEjGM6cNBo1wndb8swhyx109kCuxIhtu0sATnMnBnIRTr6cPX5KE9FVR3AEcPrT15GY4YkWawjDT2O1FYwP4ULO6vEwIdxyLzDK_BlbYGj1tnJ9F7cFDVQmfsWD3DdFPckDru19cWT3Yv61OoNZ-6eXm86GkCgviD_tKg/Page options.PNG?psid=1

[Mike01]

So that’s it! I’ve been looking in the Weaver admin the whole time. Thanks for your explanation. I think we’re finally on the same page, now (sorry, couldn’t resist the pun).

So, I went looking for the Weaver Options for the front/home page, but discovered that I don’t have one listed under WP Admin > Pages > All Pages. All that’s there is the default Sample page. So I then checked the following:

WP Admin > Appearance > Menus > Edit Menus tab > Pages section > View All

This shows two pages: Home and Sample page. However, as I said, I don’t see the Home page listed under All Pages, just ‘Sample page’. Thus, to state the obvious, I haven’t got access to the Weaver Xtreme Options for the current front page. Why isn’t the front page listed as the Home page? I thought this was automatic: your front page is Home by default until/unless you change it.

So I then experimentally created a page called Home2 and set its attributes to Page with Posts. I then added the div.entry-meta {display:none;} rule under Home2’s Weaver Options and it worked fine, but this created a new problem: it resized the first blog excerpt, making it narrower than all the others on the page. I have no idea why it’s done that.
http://lifedescribed.com/home2/

So, how do I set Home2 as my default Home page? (I can’t see a way to remove the old Home from the menu bar.) And what do you think is making the first excerpt narrower? I have not changed any content area or sidebar padding.

Cheers

[scrambler]

You may be using the default WordPress blog page for your home page.

In WordPress Settings > Reading, Front Page should be set to static, and a page you created selected (I believe your home2)
Nothing should be selected in the Post Page drop down list (showing –select–)

Then when you need a blog page, you create a regular page and select the page with posts template, for it and publish. that will give you all the theme page options.

All the blog excerpts have the same size for me on the page http://lifedescribed.com/home2/ ; so not sure what you are referring to

By the way, you do not need the rule div.entry-meta {display:none;}  on that page, as a page with posts has an option to hide the top info line, it is towards the bottom of the XTreme options for this page, just check that and remove the CSS rule

[Mike01]

Hi Scrambler,

Thanks for that. Got my home page sorted out, now. It’s really starting to look like my sketch plan, now! Now all I have to do is pad out the titles to make room for letters that have descenders.

I have discovered why you couldn’t see the problem with the blog excerpts: it’s only visible when logged in as admin. Here’s a screenshot of what I see when logged in.
http://i3.photobucket.com/albums/y77/MSR01/fore-shortened excerpt.jpg

On the subject of rules, I’ve now removed div.entry-meta {display:none;}
and ticked the ‘Hide top info line’ box, instead, as you advised. But I’ve replaced it with
footer.entry-utility {display:none;}. This is because while there is a
tick box option to hide the bottom info line, there is not also an
option to hide the excerpt footer that contained the info line. There are only options to hide the
footer for the entire page, or for the sidebars and widgets. (Perhaps this could be added in a future
update?)

I mention this to illustrate a question: what is
the likelihood of future theme updates causing conflicts with any of my
rules? Is it good policy to limit the use of rules as much as possible
to avoid this? 

Cheers

Edit: broken link

[scrambler]

The shorter excerpt is because of WordPress Added Edit button when you are logged in, so it is of no consequence for your site and you can ignore it.

I do not understand why you are adding   div.entry-meta {display:none;},  It does nothing when you have the hide bottom post info line option checked.

If I remove it on your site it makes no difference.
Unless it was to remove the dotted line of the area. That doted line  comes from your custom CSS rule
.entry-utility {border-top:1px dotted #666;}

If you don’t want that doted line border remove that globally by removing the rule, or locally by adding the rule below in the per page style box
.entry-utility {border-top:none;}

[Mike01]

To clarify: I am not adding div.entry-meta {display:none;}. I removed
that and used the tick box option that you suggested, instead.

I have added footer.entry-utility {display:none;}
because even though the bottom meta info is not displayed, there was
still a lot of white space left at the bottom of the excerpt. This rule
eliminates that white space and balances the look of the excerpt.

I have some other questions, but I think they deserve a new topic at this stage! Thanks for your help.

[Author]

Posts