Wordpress html widget needing CSS

[Silver007A]

Hi,

I would be really grateful for some help. I would like to use the same CSS styling for the content on my site, but in a text widget.

The text widget appears at the top. It starts "Relax and let us, Widgets Global, provide...". I'd like the content to appear the same as the content in the posts please.

Thanks for any help

:-)

[edited by: DrDoc at 6:14 pm (utc) on Oct 2, 2013]
[edit reason] No specifics, please [/edit]

[lucy24]

You mean the part whose source code says

<p align="justify"><font size="3">

?

:: snrk ::

I would like to use the same CSS styling for the content on my site, but in a text widget.<snip>
I'd like the content to appear the same as the content in the posts please.

I've read this three times and can't figure out whether

(a) this is someone else's site and you want the posts on your own site to look like the widget
or
(b) this is your own site and you want the widget to look the same as the posts

... which it basically already does, except that the line spacing (css line-height property) is tighter.

By my count there are two external stylesheets plus some internal css. So it shouldn't be too hard to find the named styles you're interested in. Frankly I'm more worried about the nine separate external javascript files. That seems excessive.

If it's your own site, inquiring minds want to know: What's with all the absolute links?

[Silver007A]

Thanks Lucy24,

Errr..well, yes, it is my site :-)

The <p align="justify"><font size="3"> I added.

In the widget I don't seem to be able to use a reference to the same css that styles the content in the posts.

I did add <div id="element.style">, but that doesn't seem to work.

I din't know about the "nine separate external javascript files" or the "absolute links"?

I bought this template from Studiopress who are normally quite good.

Could you help me with the code to include the correct css please?

Is there something very wrong with the java and absolute links?

Thanks

[lucy24]

I did add <div id="element.style">, but that doesn't seem to work.

I should hope not. An ID is unique by definition; there can only be one of it per page. But there can be any number of things using the same class, so that's what you'd normally use for styling.

Now, about that

<div class="post-780 post type-post status-publish format-standard hentry category-content-writing category-content-writing-blog tag-battery tag-content-marketing tag-content-writing tag-flamestower tag-google tag-seo tag-social-media entry genesis-grid genesis-grid-4 genesis-grid-even">

...

Maybe a good night's sleep will help. I make it 19 (nineteen) separate class names. Possibly the template designer thought he was making a keyword list?

[lucy24]

:: returning to dismember page structure ::

Whew. The page currently has 83 divs, nested up to-- I think-- eight deep.

The entire document, from beginning to end, is inside

<div id="wrap">

The header widget and the posts are both inside

<div id="inner">

and then

<div class="wrap">

The widget is inside the following nest:

<div class="page-title widget-area">
<div id="text-3" class="widget widget_text">
<div class="widget-wrap">
<div class="textwidget">
<div id="element.style">

(Huh? What's that literal period doing in an id? Seems to be just asking for trouble.)
winding up with a <p>

The posts are inside the nest

<div id="content-sidebar-wrap">
<div id="content" class="hfeed">
<div class="post-780 post type-post status-publish format-standard hentry category-content-writing category-content-writing-blog tag-battery tag-content-marketing tag-content-writing tag-flamestower tag-google tag-seo tag-social-media entry genesis-grid genesis-grid-4 genesis-grid-even">
<div class="entry-content">

winding up with a <p> again.

The very long list beginning "post-780" varies with each post. I have to assume someone, somewhere, knows the reason for all those classes. They definitely don't have anything to do with styling, except for "post" which occurs in the CSS.

If you now look in the stylesheet for everything to do with paragraphs, you get (cut-and-paste from search box)

p,
.page-title p {
.taxonomy-description p {
.entry-content p {
blockquote p {

(Whaaa?)

p.subscribe-to-comments {
.author-box p {
.after-post p {
p.wp-caption-text {
.sidebar p {
#footer-widgets p {
#footer p {
.comment-content p {
.page-title p {
#footer p 

... all of which are, I think, irrelevant except
.page-title p
and (earlier)
p
itself

Styling for generic paragraphs:

color: #333;
font-family: 'Lora', serif;
font-size: 16px;
line-height: 1.5625;
margin: 0;
padding: 0;
text-decoration: none;

(Explicit font size in pixels? Baaaad.) Note the line-height; that was what I originally noticed.

Styling for paragraphs within .page-title:

font-size: inherit;
line-height: 1.0;
margin: 0;

Well, what do you know. There's your line-height again.