How to edit the "About Us" Page?


#1

Hi,

I’d like to edit the “About us” Page.

What I’ve tried:

  1. Searched the meta site using the search feature - I don’t think anyone has asked this question before. I couldn’t find any such question. I’m guessing I’m the first one to ask this.
  2. I’ve checked admin->settings - and couldn’t find anything there either.

Please assist.


(Jeff Atwood) #2

Edit it in what way? Can you explain what it is you wish to achieve?


#3
  1. I’d like to remove the “Site Statistics” section.
  2. I’d like to add a new para of content explaining new users what the site is all about.

(Joshua Rosenfeld) #4

Hiding Site Statistics can easily be done via CSS.

.about-page .about.stats {
    display: none;
}

Where exactly do you want this content? Is it going to be plain text, or are you looking for something more fancy?


#5

@jomaxro
Regarding site statistics - excellent - that will work for me.

Regarding adding new para of content - its going to be plain text. Currently at the top of the about-us page, I have the site title (From settings), and site description (From settings). I want these 2 to be removed from there. And I would like to add 2 para of plain text content there.


(Joshua Rosenfeld) #6

OK.

To remove the header of “About [site name]”, you can use the following CSS:

.about-page .about h2 {
    display: none;
}

I’m not succeeding in finding a simple CSS fix to add two paragraphs of content. The site description shares a class with all the other sections on the about page, so I’m not sure how to target it by itself. Also, the CSS hack I have in mind won’t allow for multiple paragraphs of content…


#7

Will your hack work if we need to add just one paragraph of content. I’ll be happy with one para also (if 2 is not possible)


(Joshua Rosenfeld) #8

No, I can’t figure out how to target only the site description. Right now, all my attempts are also hiding the other <p> elements on the page, like the contact us section. I’m thinking we might need a code change here to get a specific CSS class for the description area.


#9

@jomaxro
I’m fine with the site description.
I would like to add a paragraph of content below that.
Any idea how to do that?


(Joshua Rosenfeld) #10

Same issue as before, there isn’t a specific CSS class for the site description. @codinghorror, thoughts on adding one?


(Joshua Rosenfeld) #11

Here’s a PR to add a specific class to the description section. If the team agrees that it is needed and gets merged @nixie, then I can share a solution with you.


(Joshua Rosenfeld) #12

Alright, PR has been merged. @nixie for this CSS to work you’re going to need to manually update your site. Visit /admin/upgrade to do so.

The following CSS will hide the “About [site name]” (use this instead of what I shared above) as well as add two paragraphs of text after the site description.

.about-page .about.description {
   h2 {
       display: none;
   }
   p:after {
       white-space: pre-wrap;
       content: "\A\A First paragraph\A\ASecond Paragraph";
   }
}

How to change my about-us section?
#13

This is excellent. I’ll be doing this during “after-hours” today and will let you know how it goes.


#14

@jomaxro
It works.
But then line break doesn’t happen automatically.
For example, in my phone, I’m having to scroll horizontally in order to completely read the para. (same is the case in pc too (even though the screen size is huge).

How can this be fixed?


(Mittineague) #15

That’s because of the “pre”. If the double line feed (the \A\A) is separating the “first” and “second” paragraphs OK, I guess you could insert singles within the paragraphs where you want a new line to start. Though that doesn’t seem like a very responsive approach.

If you remove the white-space: pre rule does it work?
I’m guessing doing so will lose the paragraph separations, but it’s worth a try.


#16

@Mittineague

The line feed (the \A) works.
But then its impossible to adjust according to different screen sizes (pc monitors, cell-phones has tons of screen sizes)

How to remove the white-space: pre - rule?


(Joshua Rosenfeld) #17

Removing the pre rule will make the line feeds useless. Instead, let’s try making the white-space rule pre-wrap

white-space: pre-wrap;

Desktop:

Mobile:

Note: /about can only become so narrow before you will be forced to scroll sideways on desktop. If you try and make your browser window smaller than the width of the stats table (that you’ve hidden), you will get a horizontal scroll bar.


#18

@jomaxro
Excellent. Its working.

(Please edit your previous reply and include “white-space: pre-wrap;” there - I’m going to select that as the solution - I’m sure this will be helping more folks)