Fixing the Site Description on News/Welcome page TUTORIAL

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Fixing the Site Description on News/Welcome page TUTORIAL

Postby RETheUgly » March 21st, 2018, 3:07 pm

I was having trouble with making the comic description retain its line breaks when it shows on the comic's site - I used separate paragraphs in the description but when I displayed the description using the template those line breaks would disappear. The solution to this problem is adding the style declaration "white-space: pre-wrap;" to the paragraph that contains the {SITE_DESCRIPTION}. This can be done with CSS or by adding the style attribute directly to the HTML tag.

If you don't know how to do this, though, I made a tutorial! It was originally posted to a Discord group I am part of, but I'll change up some of the formatting to make it better for this forum.

(The images are super huge, so I'm adding them at the end, and if you want to see them properly you should click on them to go to the image as hosted by Discord itself)
-----
If you've got a webcomic on SmackJeeves, you might have noticed that if you use line breaks (the enter key) in your webcomic description, those line breaks might not show up properly on the comic's website itself; instead, the entire description is just a single paragraph.
The fix for that is very simple, only (or despite) requiring a very small change to the HTML (or technically, the CSS) that makes up your page.

[IMAGE 1]

    Number 1 would include your webcomic name, not mine.
    Number 2 is the first step you need to do, navigate to your comic's settings and use the "jump to" menu to get to "page design/appearance".
    Number 3 would show whatever theme you are using, "RETU CUSTOM" is the name of the theme I was messing with.
    Finally, Number 4 is your next step, open the "New / Welcome Page" (most of the time, this is the only page where the description is shown)

Now, find the place where {SITE_DESCRIPTION} is, and then the <p> that should be either on the same line just before {SITE_DESCRIPTION}, or on the line just above {SITE_DESCRIPTION} (in my case, it is on the line just above, but I might have changed that myself, I don't remember).

[IMAGE 2]

First thing's first, make <p>, {SITE_DESCRIPTION}, and </p> all be on the same line. That is,
Code: Select all
<p>{SITE_DESCRIPTION}</p>
<!-- INSTEAD OF -->
<p>
    {SITE_DESCRIPTION}
</p>


Now add
Code: Select all
style="white-space: pre-wrap;"
to the inside of that <p>:
Code: Select all
<p style="white-space: pre-wrap;">{SITE_DESCRIPTION}</p>


[IMAGE 3]

Now, scroll to the bottom of the page and click "submit", then "back to template selection", and then type in a new name for your modified template in the text field I marked (the name could be anything, and if you were already using a custom template then you can just use the template's name again).

Then press save - if you chose a new name you're done, if you chose to overwrite an existing template then you need to press "yes" on the next screen
and that should work!

-----

IMAGE 1:
Image

IMAGE 2:
Image

IMAGE 3:
Image
My accounts : CodePen, DeviantArt, GitHub, and my Discord is RETheUgly, #6469!
User avatar
RETheUgly
 
Posts: 2
Joined: October 10th, 2017, 1:25 pm

Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 2 guests

cron