Output formatting messed up

  • Resolved zimbo000

    (@zimbo000)


    10 years, 2 months ago

    I have been using the plugin successfully for quite a while on this live site.

    I am now trialing a new theme, Enfold, for the client on this dev site but despite the shortcode being identical on both sites the new theme/site is not displaying the same.

    For instance the top and bottom borders set by
    #content .rotatingtweets are missing from the dev site but visible on the live site, and I can’t figure out why they’re not showing. Any ideas?

    The height of the rotatingtweets element is also smaller on the dev site. I think I need a margin: 15px 0; around the tweets (I use a child theme) but am not sure which is the correct element to target – can you help?

    https://wordpress.org/plugins/rotatingtweets/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Martin Tod

    (@mpntod)

    10 years, 2 months ago

    The following CSS in the Rotating Tweets style.css is getting ‘caught’ by the old template, but not by the new template.

    #content .rotatingtweets,
#content .norotatingtweets  {
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	margin-bottom: 3%;
}

    You may want to add a rotatingtweets.css file to wp-content/uploads that contains something like:

    #after_section_1 .rotatingtweets,
#after_section_1 .norotatingtweets  {
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	margin-bottom: 3%;
}

    or

    #main .rotatingtweets,
#main .norotatingtweets  {
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	margin-bottom: 3%;
}

    or even:

    .rotatingtweets,
.norotatingtweets  {
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	margin-bottom: 3%;
}

    or if you are editing your own style.css file for the site, just chuck it in there!

    Thread Starter zimbo000

    (@zimbo000)

    10 years, 2 months ago

    Thanks, the first one worked in my child CSS file.

    I’ve also noticed that

    #content .rotatingtweet {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
}

    is being stripped from each tweet as well. What would be the CSS to include to get that padding re-inserted?

    Plugin Author Martin Tod

    (@mpntod)

    10 years, 2 months ago

    In essence, the problem is that the new location of Rotating Tweets doesn’t have #content in it. The easiest way to see how an element is identified on the page is to right click and then select Inspect (or [CTRL]+[SHIFT]+I). In Chrome, the identifier for the element appears immediately under the HTML in the middle of the page.

    So you need to switch #content for something that is an identifier – like #after_section_1 – which gives you:

    #after_section_1 .rotatingtweet {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
}

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Output formatting messed up’ is closed to new replies.