Making WordPress.org

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#6391 closed defect (bug) (invalid)

pre tag broken in theme preview in themes directory - classic themes

Reported by: benimub's profile benimub Owned by:
Milestone: Priority: normal
Component: Theme Directory Keywords: theme-preview has-patch
Cc:

Description

When you preview classic themes in the theme's repo, the content in pre tag is showing scroll. We can fix it by adding a line of CSS.

If you click on the Dhor theme preview. Click on the Element and scroll down you can see the scroll bar in pre section. Please check the below screenshot.
Broken screenshot: theme-preview-broken.jpg
Fixed screenshot: theme-preview-fixed.jpg

Attachments (3)

theme-preview-broken.jpg (287.6 KB) - added by benimub 3 years ago.
theme-preview-fixed.jpg (238.9 KB) - added by benimub 3 years ago.
theme-preview-fixed-code.jpg (155.0 KB) - added by benimub 3 years ago.

Download all attachments as: .zip

Change History (12)

#1 @kafleg
3 years ago

@benimub

Would you please provide the steps on how to fix that? Maybe we need to write the CSS code?

#2 @benimub
3 years ago

@kafleg you can add this code in style.css under the pre.

pre {
    background: #eee;
    font-family: "Courier 10 Pitch", courier, monospace;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
    white-space: normal;
}

I have added white-space: normal;

#3 @poena
3 years ago

Each theme needs to solve this individually.
The theme directory can not add CSS that affects the theme presentations.

#4 @benimub
3 years ago

I found a similar issue in the block themes too. Do block themes also need to fix in that way?
I've created another ticket too. https://meta.trac.wordpress.org/ticket/6392

This ticket was mentioned in PR #82 on WordPress/wordpress.org by benimub.


3 years ago
#5

  • Keywords has-patch added

Fixed the pre tag for theme preview page in themes repo
Here is meta ticket link https://meta.trac.wordpress.org/ticket/6391

#6 @dd32
3 years ago

#6392 was marked as a duplicate.

#7 @dd32
3 years ago

  • Resolution set to invalid
  • Status changed from new to closed

Hi @benimub,

The Theme Previewer, wp-themes.com, only displays CSS that the themes themselves have defined.

If you find a theme which does not style pre tags correctly, you can report this to the Theme Author through the Theme Support forums (View a theme in the directory, and find the forums link in the right hand sidebar).

The file you've patched controls the Theme Directory styles, but NOT the styles used within the individual previews (Which are iframes of wp-themes.com - ie. https://wp-themes.com/dhor/)

#9 @joyously
3 years ago

Not only is this not a preview problem, the theme in question is styling it correctly.
Preformatted text (<pre> tag) is for preserving white space, so the scrollbar is the best way to do that.

Note: See TracTickets for help on using tickets.