"That page doesn't exist or is private" restyling with CSS

css

(Daniela) #1

Before:

After (categories on the right):

Or categories on the left:

  • page width increased
  • buttons and google search are always visible
  • categories aligned on the right (or left)
  • topics title cut if too long
  • added the content “Are you logged in?” as described here
  • tested only for desktop (not mobile)

Note: the code it’s still a work in progress!

Here the CSS I used:

/*-----------
GENERAL CSS
-----------*/

.span8 {
    width: 480px;
}

/*Categories aligned to topics title based on their styles*/

.not-found-topic a.badge-wrapper.box {top: 0px;}
.not-found-topic a.badge-wrapper.bullet, .not-found-topic a.badge-wrapper.bar {top: 7px;}
.not-found-topic a.badge-wrapper.none {top: 3px;}


/*Categories max width*/

.page-not-found-topics a.badge-wrapper {max-width: 100px;}


/*If topic titles are too long they will be cut off */

.not-found-topic > a {
    float: left; 
    max-width: 75%;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}


/*Repositioning the "More" buttons*/

.span8 .btn {margin: 10px 65px 0px 0px;}


/*More margin top to Popular and Recent titles*/

h2.popular-topics-title, h2.recent-topics-title, .page-not-found-search h2 {margin-top: 6px;} 


/*----------------------------------------------
SMARTPHONES,IPAD AND BIG SCREENS MEDIA QUERIES
----------------------------------------------*/

@media only screen 
and (min-device-width : 320px)
and (max-device-width : 479px)  {
    .not-found-topic > a {max-width: 95%;}
    .span8 {width: 100%;}
    .span8 .btn {margin: 2% 65% 0% 0%;}
    .not-found-topic:nth-of-type(1n+6) {display: none;}
}

@media only screen 
and (min-device-width : 480px)
and (max-device-width : 599px) {
    .not-found-topic > a {max-width: 95%;}
    .span8 {width: 100%;}
    .span8 .btn {margin: 2% 70% 0% 0%;}
    .not-found-topic:nth-of-type(1n+6) {display: none;}

}

@media only screen 
and (min-device-width : 600px)
and (max-device-width : 799px){
    .not-found-topic > a {max-width: 95%;}
    .span8 {width: 100%;}
    .span8 .btn {margin: 2% 80% 0% 0%;}
    .not-found-topic:nth-of-type(1n+6) {display: none;}

}

@media only screen 
and (min-device-width : 800px)  {
    .not-found-topic > a {max-width: 75%;}
    .span8 {width: 100%;}
    .span8 .btn {margin: 2% 80% 0% 0%;}   
}

@media only screen 
and (min-device-width : 1023px)  {
    .not-found-topic > a {max-width: 75%;}
    .span8 {width: 480px;}
}

@media only screen 
and (min-device-width : 1440px)
and (min-device-width : 1600px) {
    .not-found-topic > a {max-width: 75%;}
    .span8 {width: 480px;}
}



Coloured category boxes on Oops-page (404)
Extremely long category names cause CSS layout issues
(Christoph) #2

Great initiative! But I find that with the column layout the categories of the shorter titles become dissociated from the title. Have you tried putting the categories before the topic titles? I suppose it can’t be done via CSS, which leaves me with increasing the vertical spacing…


(Daniela) #3

Can you please send me the link of your site so I can try to adjust the categories alignment?
Which browser do you use?


(Christoph) #4

Tjis is not specific to my site (I have not even tried your CSS yet, too busy st work these days). I’m just looking at your screenshot above…


(Daniela) #5

Do you mean in this way?

In this case change to float: right; the element body .not-found-topic > a

EDIT: added this setting in the OP with the related image.


(Sam Saffron) #6

I think categories to the right is much better, I totally support this being the default, it makes the 404 page much less messy,

Send through a pull request.


(Daniela) #7

Do you mean that I have to send a pull request? :scream:

In this case I would prefer someone else could test it before.
I wrote it in a hurry and online, testing it only on Firefox. I do some tests at least on Chrome in the next hours/days.


(Christoph) #8

I guess the cleaner solution here would be to change the page_not_found.title copy in admin => customize => text content.

I was actually imagining it without the columns, but this looks good too. Well done!


(Daniela) #9

I’ve set a short width for categories thinking about those sites that use long categories names (if a name is longer than 100px it will be cut). Imho, the important thing in this page (and in general) is the title of the topics rather than the category name especially for new users.


(Daniela) #10

I’m testing the code (just revisited) on various sites with some customizations (different font style and size mostly) and it works very well.

http://forum.opensavannah.org:

http://danskdynamit.com:

https://community.smartthings.com:

https://forums.gearboxsoftware.com:

But I have some problem with sites that have very special customizations, such as this

https://labs.daemon.com.au:

As you can see the badge-wrapper they use is much larger than the standard one, so all the categories lost the alignment with the topics title.
This can easily be corrected by modifying the line-height of the element .not-found-topic > a from 2 to 2.5, eg.

So, my questions is, do I have to consider these particular cases and change globally (on that page) the line-height or not?

PS: Can you link me a site that uses the bar style on the categories? I have not found one yet


(Sam Saffron) #11

Nahh don’t worry about them, they can add the extra customization they need if they are overriding styles on 404.

Bar style … hmm not sure I know who uses this off the top of my head.


(Daniela) #12

Don’t worry, I found community.infinite-flight.com that use the bar style.


(Christoph) #13

Don’t you think these huge gaps are a problem?


(Sam Saffron) #14

not really… same problem exists on front page.


(Christoph) #15

The difference with the front page is that it is clearly recognizable as a table with columns, so there is no problem in interpreting what you see. But here, things are different.

Maybe add line dividers like on the front page?


(Daniela) #16

I do not really see a big difference in readability with a divide line here (even if it does not come up under the categories).


(Sam Saffron) #17

I think your change is fine without the divider, we can continue refining this later on.

I don’t see why hold off on a change that is 10x better than current just because we can make it 10.3x better.


(Daniela) #18

Ok, I tested with Firefox, Chrome, Edge, I.E. and Opera on Windows.
Everything works properly.

Tomorrow I will start some tests on Ubuntu.


(Jeff Atwood) #19

What does this look like on mobile?


(Daniela) #20

With some media queries the 404 page looks like this:

Galaxy S5 - Huawei Y62 vertical:

Galaxy S5 - Huawei Y62 horizontal:

(topic titles on Chrome Dev Toolkit appear to be with a bigger font size than they are actually) (I’m an idiot, I forgot that I can take screenshots from my mobile device!)

But I still have to work on mobile display and media queries, I want to finish checking the desktop view first.