Opened 22 months ago

Closed 22 months ago

Last modified 22 months 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


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 22 months ago.
theme-preview-fixed.jpg (238.9 KB) - added by benimub 22 months ago.
theme-preview-fixed-code.jpg (155.0 KB) - added by benimub 22 months ago.

Download all attachments as: .zip

Change History (12)

#1 @kafleg
22 months ago


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

#2 @benimub
22 months 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
22 months ago

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

#4 @benimub
22 months 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.

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

22 months ago

  • Keywords has-patch added

Fixed the pre tag for theme preview page in themes repo
Here is meta ticket link

#6 @dd32
22 months ago

#6392 was marked as a duplicate.

#7 @dd32
22 months ago

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

Hi @benimub,

The Theme Previewer,, 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 - ie.

#9 @joyously
22 months 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.