On the society admin dashboard, one is graciously allowed to edit the Description box for their society. The editor accepts WYSIWYG entry, or HTML. HTML like <style> tags. If you want to include these in your own society page, just switch to Source mode:

Then add some <style> and </style> tags and copy-paste away!

Note that you’ll want to put your intro line above the <style> tags, or your society listing will show up like this:

Anyway, here was the old page for LUECS:

As you can see, it looks like pure, unmitigated bum. Here it is after a little bit of tinkering (and liberal use of !important CSS rules):

Much better, although there is still plenty to do. If you just want to copy what I’ve done and tinker with it, you can view the whole thing at the bottom by clicking here. In the article between here and there, I’ll go through each change step-by-step.

The world’s most 90s button ¶

First and foremost, this rascal needed to go:

At first I just stuck on a filter: hue-rotate(225deg); to shift the inexplicable orange around the colour wheel to the closest I could get to purple, but it looked too bright and still left me with the rest of the button. No, it all had to go:

This was achieved with the following CSS rules (NB: it should go without saying that all of this CSS is bashed out through trial-and-error and thus a horrible mess that is about as CRAPL’d as it can be):

.join-this-group.button-bottom {  
width: 100% !important;  
}  
.join-this-group.button-bottom a {  
margin: auto !important;  
background: none !important;  
text-indent: 0px !important;  
border-radius: 15px;  
padding: 8px 20px 8px 20px;  
text-align: center;  
color: #551F75;  
border: 2px solid #551F75;  
line-height: 40px;  
text-decoration: none;  
background-size: 100% 200% !important;  
background-image: linear-gradient(to bottom, transparent 50%, #551F75 50%) !important;  
transition: background .5s ease-in-out;  
}  
.join-this-group.button-bottom a:hover {  
background-position: 0 -100% !important;  
color: #fff;  
}  

First, we make .join-this-group.button-bottom fullwidth so that we can position .join-this-group.button-bottom a in the centre of it with margin: auto !important;. We then purge just about every hint of the original button with the background: none !important; and bring the original button text back into view with text-indent: 0px !important;. Lines 8-17 create a far nicer CSS button around the <a> element, with 15-17 and 20 creating a nice hover-over slide transition. Notably, the button now transitions between LUSU purple (#551f75) and white—there is no blasted turquoise.

Fixing the width ¶

We’re living in a glorious new responsive design future, where people might be viewing a website on a desktop, a phone, a tablet, a phablet, a phesktop, a toaster, a tablone, etc. Central column designs are a holdover from the newspaper days and should be done away with as soon as possible. To do so, add these rules:

.content, .header {  
width: 90%;  
}  
.bottom-union, .top-union, .uc-poweredby-nusdigital-logo {  
width: 100%;  
}  
.uc-poweredby-nusdigital-logo-wrapper {  
width: 100%;  
}  
.union-footer {  
margin: 0;  
}  

This stretches everything out to fill all of that lovely horizontal screen real estate that’s been ignored.

Hide your shame ¶

This one is more personal preference, but adding a quick

.uc-poweredby-nusdigital-logo {  
display: none;  
}  

to your rules will hide that ugly NUS logo along the very bottom of the page, because why would you want to tout your affiliation to the world?

Yeah ‘cause grey is the most exciting colour right? ¶

That info box on the right bumming you out with it’s grey-on-grey colour scheme? Try this CSS on for size:

.title h1 {  
background-color: #551F75 !important;  
}

.thumbnail,  
.group-category,  
.group_left_panel_menu,  
.typeCategory {  
background-color: #EAE5F2 !important;  
}

.tree-navigation li,  
.tree-navigation li a,  
.tree-navigation h4 {  
color: #551F75 !important;  
}

.group-category {  
padding-bottom: 6px;  
}

.galleryIcon img {  
border: 2px solid #551F75;  
}  

To start with, we change the colours. I went for LUSU purple for the title bar along the top, and then got the whitened purple from the Your Officers’ bar background (see blow) #EAE5F2 for the rest of the box (and, of course, making the text over it LUSU purple rather than white). Then I stuck a little padding on the bottom, because things were looking a bit too snug there for my liking. Finally, the white of the society logo suddenly giving way to the faded purple of the box looked bad, so I stuck a 2px LUSU purple border around the <img> tag.

Headings ¶

I liked the look of all the headings being coloured in LUSU purple, rather than black. Simple:

 
.content-wrap h1,
.content-wrap h2,
.content-wrap h3,
.content-wrap h4,
.content-wrap h5,
.content-wrap h6 {
  color: #551F75 !important;
}  

I then also took the rules from .contentBoxes h2 and applied them to <h2>s in general so that all your <h2> headings will look like the default ‘Description’ one at the top of the box:

h2 {
  background: none;
  border-bottom: 1px solid #e6e6e6;
  margin: 1.75% 0% 0%;
}

Want to actually show your exec. somewhere? ¶

Okay, this one took some time but it was worth it. Step one was to get the HTML from the Your Officers’ block on the homepage. All 257 lines of it. Luckily for you, I’ve already trimmed them to the lines you need. Here’s the HTML you’ll want to add to your page:

<h2>The Exec.</h2>

<div class="section stripe officersdesk" id="officers">  
<div class="stripe-wrap" id="officers-wrap">  
<div class="stripe-carousel officersdesk" id="officers">  
<ul class="jcarousel-skin-tango edit-mode-stripe">  
<!&#8211; repeat block for each exec. member &#8211;>  
<a href="#">  
<li>  
<span class="thumbnail-image"><img alt="POSITION HERE" src="IMG URL HERE" /></span>  
<span class="page-details"><span class="page-title">NAME HERE</span><span class="page-summary">POSITION HERE</span></span>  
</li>  
</a>  
<!&#8211; end repeat &#8211;>  
</ul>  
</div>  
</div>  
</div>  

Then add the following CSS, amending the width value for #officers a with the result of $ \left\lfloor\frac{1}{A} \times 100\right\rfloor $, where $ A $ is the number of exec. members you have:

 
.thumbnail-image img {  
height: 160px;  
width: 160px;  
object-fit: cover;  
object-position: 0 50%;  
}

#officers a {  
width: WIDTH HERE% !important;  
float: left;  
}

#officers li {  
width: 100% !important;  
}

#officers {  
overflow: hidden !important;  
margin-top: 10px;  
}  

Now for the excruciating part: uploading the images. On the website backend, click the Add Image’ button and then the Upload’ tab:

Upload your photo and wait five years or so for it to finish. Then, click the Image Info’ tab, followed by the Browse Server’ button. Click the image you just uploaded, and then OK’. In the URL’ box will be the URL for your photo – copy it and paste it into your HTML where it says Image URL here:

Copy this

Repeat this process, add names and job titles and Bob’s your uncle.

And your social media? ¶

You’d be forgiven for thinking that adding social media links on the backend would cause them to appear on the frontend. Nope, it’s another DIY job. First, the HTML:

<h2>Social Media</h2>

<ul class="social-media">  
<!&#8211; repeat block for each social media account &#8211;>  
<a href="URL HERE">  
<li>  
<div class="icon" style="background-image: url(<q>IMG URL HERE');"></div>  
</li>  
</a>  
<!&#8211; end repeat &#8211;>  
</ul>  

To style it, we set up the ul to remove the bullet points, remove its left-margin so it sits flush with the rest of the page and add an :after rule that clears the float rule that we bring in for all its child list elements to make them align horizontally:

 
.social-media {  
list-style: none;  
margin: 10px 0 10px 0 !important;  
}

.social-media:after {  
content: ”;  
display: block;  
clear: both;  
}

.social-media li {  
float: left;  
}  

Then we just add some styling to the icons themselves, and a nice bevel :hover effect:

 
.icon {  
height: 50px;  
width: 50px;  
border-radius: 10px;  
background-size: cover;  
background-repeat: no-repeat;  
background-position: center center;  
cursor: pointer;  
margin: 5px 10px 5px 0x;  
}

.icon:hover {  
-moz-box-shadow: inset 0 0 10px #000000;  
-webkit-box-shadow: inset 0 0 10px #000000;  
box-shadow: inset 0 0 10px #000000;  
}  

Standards-compliant session details ¶

If your society meets up regularly, such as for weekly training sessions, you can ensure you get featured on Anson Cheong’s neat LUSocieties app by ensuring you write your session dates in the following format: dddd, HH:MM-HH:MM, location. For example, Monday, 22:00-23:00, George Fox Foyer.

Full Code ¶

 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<style type="text/css">  
.content,  
.header {  
width: 90%;  
}  
.bottom-union,  
.top-union,  
.uc-poweredby-nusdigital-logo {  
width: 100%;  
}  
.uc-poweredby-nusdigital-logo-wrapper {  
width: 100%;  
}

.union-footer {  
margin: 0;  
}

.join-this-group.button-bottom {  
width: 100% !important;  
}  
.join-this-group.button-bottom a {  
margin: auto !important;  
background: none !important;  
border-radius: 15px;  
text-indent: 0px !important;  
padding: 8px 20px 8px 20px;  
text-align: center;  
color: #551F75;  
border: 2px solid #551F75;  
line-height: 40px;  
text-decoration: none;  
background-size: 100% 200% !important;  
background-image: linear-gradient(to bottom, transparent 50%, #551F75 50%) !important;  
transition: background .5s ease-in-out;  
}  
.join-this-group.button-bottom a:hover {  
background-position: 0 -100% !important;  
color: #fff;  
}

.uc-poweredby-nusdigital-logo {  
display: none;  
}

.title h1 {  
background-color: #551F75 !important;  
}

.thumbnail,  
.group-category,  
.group\_left\_panel_menu,  
.typeCategory {  
background-color: #EAE5F2 !important;  
}  
.tree-navigation li,  
.tree-navigation li a,  
.tree-navigation h4 {  
color: #551F75 !important;  
}  
.group-category {  
padding-bottom: 6px;  
}  
.galleryIcon img {  
border: 2px solid #551F75;  
}

.content-wrap h1,  
.content-wrap h2,  
.content-wrap h3,  
.content-wrap h4,  
.content-wrap h5,  
.content-wrap h6 {  
color: #551F75 !important;  
}  
h2 {  
background: none;  
border-bottom: 1px solid #e6e6e6;  
margin: 1.75% 0% 0%;  
}

.thumbnail-image img {  
height: 160px;  
width: 160px;  
object-fit: cover;  
object-position: 0 0;  
}  
#officers a {  
width: 100% !important;  
float: left;  
}  
#officers li {  
width: 11% !important;  
}  
#officers {  
overflow: hidden !important;  
margin-top: 10px;  
}

.social-media {  
list-style: none;  
margin: 10px 0 10px 0 !important;  
}  
.social-media:after {  
content: &#8221;;  
display: block;  
clear: both;  
}  
.social-media li {  
float: left;  
}  
.icon {  
height: 50px;  
width: 50px;  
border-radius: 10px;  
background-size: cover;  
background-repeat: no-repeat;  
background-position: center center;  
cursor: pointer;  
margin: 5px 10px 5px 0x;  
}  
.icon:hover {  
-moz-box-shadow: inset 0 0 10px #000000;  
-webkit-box-shadow: inset 0 0 10px #000000;  
box-shadow: inset 0 0 10px #000000;  
}  
</style>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>The Exec.</h2>

<div class="section stripe officersdesk" id="officers">  
<div class="stripe-wrap" id="officers-wrap">  
<div class="stripe-carousel officersdesk" id="officers">  
<ul class="jcarousel-skin-tango edit-mode-stripe">  
<!&#8211; repeat block for each exec. member &#8211;>  
<a href="#">  
<li>  
<span class="thumbnail-image"><img alt="POSITION HERE" src="IMG URL HERE" /></span>  
<span class="page-details"><span class="page-title">NAME HERE</span><span class="page-summary">POSITION HERE</span></span>  
</li>  
</a>  
<!&#8211; end repeat &#8211;>  
</ul>  
</div>  
</div>  
</div>

<h2>Social Media</h2>

<ul class="social-media">  
<!&#8211; repeat block for each social media account &#8211;>  
<a href="URL HERE">  
<li>  
<div class="icon" style="background-image: url(<q>IMG URL HERE');"></div>  
</li>  
</a>  
<!&#8211; end repeat &#8211;>  
</ul>  

Work, work, work, work, work, work
He said me haffi
Work, work, work, work, work, work!
He see me do mi
Dirt, dirt, dirt, dirt, dirt, dirt!

I did one of these for my first year, and I’m all about creating and then upholding my own traditions. Second year was a different beast to first — I had to pay off my first year. Sisyphean barely covers it.

The Lancaster Photographer

Freshers’ Week is Still Pretty Great, Even If You’re a Rep ¶

There’s no rule stating that a freshers’ rep is not allowed to have fun as well (I mean, there are several if you define have fun as drink and wake up in strange beds). Have fun I did, and nobody died on my watch. I initially wondered why I was getting so drunk each night when I was only having a couple gin & tonics for pres, but on Thursday realised the problem — all my cups were pint cups. Oops.

Hot Damn Employment Is Easy ¶

As I cruised into the summer holiday, I was holding down no fewer than seven part-time jobs of varying part. I’ve written before about how much better a bunch of part-time gigs are compared to a full-time one, so I shan’t repeat myself here. Amazingly though, I even still vaguely remember what free time looked like!

South Park

Some People Really Need Hobbies ¶

After I pissed off a bunch of those kind of students by having an opinion and then defending said opinion, they found the time to complain about me to the Students’ Union, necessitating a full investigation and interview into whether I was a hate preacher (official verdict: STFU).

Even over half a year later they still showed up to a completely unrelated hustings to derail things and — whilst I can’t prove this definitively — I’m fairly certain are responsible for my phone number ending up on the Food Standards Agency’s food recall text alert system, as well as the m4m section of Craigslist for the South London area.

Those were some rather bizarre unsolicited texts and phonecalls, until one day I got the guy on the other end to chat for a bit and found where he’d got the number from.

Relationships Are a Bit of Alright ¶

In first year, what is now a good friend called me the biggest slut in Pendle (quantitatively untrue). This year, things took a turn for the slow with one of those relationships that you hear about on the evening news in third term.

Then she went to study in Indiana for a year, so looks like I’m back to Plan A.

The French Are the Actual Cutest ¶

Look at what my Frenchies did for my birthday:

Photo by the author

They even drew all the flat:

Photo by the author

I’m So Sick of Clubs It’s Unreal ¶

That’s what happens when you go out 5–6 times a week for a year in a city with 4 clubs. I spent as much of my drink time as I could this year in Pendle’s bar, having pints with friends and actually being able to hear each other. It was incredible.

The Top of Bowland Tower is Pretty Cool ¶

I finally saw Lancaster University’s #1 view:

Photo by the author

Everything Should Always Be Dry ¶

Storm Desmond. Fuck Storm Desmond.

Gabe

You know what my mom used to say: When life gives you shit, you just... Uh...

Tycho

Make Shit-ade? What?

Gabe

Wait, it's coming to me.

So, the new LUSU website. Negativity is all well and good (and jolly cathartic), but what’s the point if you can’t suggest something better? With that in mind, this article will serve as a counterpoint to the other one. Where that article will be updated every time I discover some fresh new hell or minor annoyance on the site, this will be updated when I have a way to work around/break it.

On the society admin dashboard, one is graciously allowed to edit the Description box for their society. The editor accepts WYSIWYG entry, or HTML. HTML like <style> tags. If you want to include these in your own society page, just switch to Source mode:

Then add some <style> and </style> tags and copy-paste away!

Note that you’ll want to put your intro line above the <style> tags, or your society listing will show up like this:

Anyway, here was the old page for LUECS:

As you can see, it looks like pure, unmitigated bum. Here it is after a little bit of tinkering (and liberal use of !important CSS rules):

Much better, although there is still plenty to do. If you just want to copy what I’ve done and tinker with it, you can view the whole thing at the bottom by clicking here. In the article between here and there, I’ll go through each change step-by-step.

The world’s most ’90s button ¶

First and foremost, this fucker needed to go:

At first I just stuck on a filter: hue-rotate(225deg); to shift the inexplicable orange around the colour wheel to the closest I could get to purple, but it looked too bright and still left me with the rest of the button. No, it all had to go:

This was achieved with the following CSS rules (NB: it should go without saying that all of this CSS is bashed out through trial-and-error and thus a horrible mess that is about as CRAPL’d as it can be):

22.join-this-group.button-bottom {
23    width: 100% !important;
24}
25.join-this-group.button-bottom a {
26    margin: auto !important;
27    background: none !important;
28    text-indent: 0px !important;
29    border-radius: 15px;
30    padding: 8px 20px 8px 20px;
31    text-align: center;
32    color: #551F75;
33    border: 2px solid #551F75;
34    line-height: 40px;
35    text-decoration: none;
36    background-size: 100% 200% !important;
37    background-image: linear-gradient(to bottom, transparent 50%, #551F75 50%) !important;
38    transition: background .5s ease-in-out;
39}
40.join-this-group.button-bottom a:hover {
41    background-position: 0 -100% !important;
42    color: #fff;
43}

First, we make .join-this-group.button-bottom fullwidth so that we can position .join-this-group.button-bottom a in the centre of it with margin: auto !important;. We then purge just about every hint of the original button with the background: none !important; and bring the original button text back into view with text-indent: 0px !important;. Lines 8–17 create a far nicer CSS button around the <a> element, with 15–17 and 20 creating a nice hover-over slide transition. Notably, the button now transitions between LUSU purple (#551f75) and white — there is no fucking turquoise.

Fixing the width ¶

We’re living in a glorious new responsive design future, where people might be viewing a website on a desktop, a phone, a tablet, a phablet, a phesktop, a toaster, a tablone, etc. Central column designs are a holdover from the newspaper days and should be done away with as soon as possible. To do so, add these rules:

 5.content,
 6.header {
 7    width: 90%;
 8}
 9.bottom-union,
10.top-union,
11.uc-poweredby-nusdigital-logo {
12    width: 100%;
13}
14.uc-poweredby-nusdigital-logo-wrapper {
15    width: 100%;
16}
17
18.union-footer {
19    margin: 0;
20}

This stretches everything out to fill all of that lovely horizontal screen real estate that’s been ignored.

Hide your shame ¶

This one is more personal preference, but adding a quick

45.uc-poweredby-nusdigital-logo {
46    display: none;
47}

to your rules will hide that ugly NUS logo along the very bottom of the page, because why would you want to tout your affiliation to the world?

Yeah ‘cause grey is the most exciting colour right? ¶

That info box on the right bumming you out with it’s grey-on-grey colour scheme? Try this CSS on for size:

49.title h1 {
50    background-color: #551F75 !important;
51}
52
53.thumbnail, 
54.group-category, 
55.group_left_panel_menu, 
56.typeCategory {
57    background-color: #EAE5F2 !important;
58}
59
60.tree-navigation li,
61.tree-navigation li a, 
62.tree-navigation h4 {
63   color: #551F75 !important;
64}
65
66.group-category {
67   padding-bottom: 6px;
68}
69
70.galleryIcon img {
71    border: 2px solid #551F75;
72}

To start with, we change the colours. I went for LUSU purple for the title bar along the top, and then got the whitened purple from the Your Officers bar background (see blow) #EAE5F2 for the rest of the box (and, of course, making the text over it LUSU purple rather than white). Then I stuck a little padding on the bottom, because things were looking a bit too snug there for my liking. Finally, the white of the society logo suddenly giving way to the faded purple of the box looked bad, so I stuck a 2px LUSU purple border around the <img> tag.

Headings ¶

I liked the look of all the headings being coloured in LUSU purple, rather than black. Simple:

71.content-wrap h1,
72.content-wrap h2, 
73.content-wrap h3, 
74.content-wrap h4, 
75.content-wrap h5, 
76.content-wrap h6 {
77   color: #551F75 !important;
78}

I then also took the rules from .contentBoxes h2 and applied them to <h2>s in general so that all your <h2> headings will look like the default Description one at the top of the box:

79h2 {
80   background: none;
81   border-bottom: 1px solid #e6e6e6;
82   margin: 1.75% 0% 0%;
83}

Want to actually show your Exec. somewhere? ¶

Okay, this one took some time but it was worth it. Step one was to get the HTML from the Your Officers block on the homepage. All 257 lines of it.

What.

Want to know how they managed to make a simple ul of six lis stretch to 257 lines?

Unchecking a couple rules later, and:

Like I said in the last article: it really is fractal. Regardless, that bloat clearly needs to get trimmed. Luckily for you, I’ve already done it. Here’s the HTML you’ll want to add to your page:

140<h2>The Exec.</h2>
141<div class="section stripe officersdesk" id="officers">
142   <div class="stripe-wrap" id="officers-wrap">
143      <div class="stripe-carousel officersdesk" id="officers">
144         <ul class="jcarousel-skin-tango edit-mode-stripe">
145            <!-- repeat block for each exec. member -->
146            
147               <li>
148                  <span class="thumbnail-image"><img alt="POSITION HERE" src="IMG URL HERE" /></span> 
149                  <span class="page-details"><span class="page-title">NAME HERE</span><span class="page-summary">POSITION HERE</span></span>
150               </li>
151            
152            <!-- end repeat -->
153         </ul>
154      </div>
155   </div>
156</div>

Then add the following CSS, amending the width value for #officers a with the result of \( \left\lfloor\frac{1}{A} \times 100\right\rfloor \), where \( A \) is the number of Exec. members you have:

 85.thumbnail-image img {
 86   height: 160px;
 87   width: 160px;
 88   object-fit: cover;
 89   object-position: 0 50%;
 90}
 91
 92#officers a {
 93   width: WIDTH HERE% !important;
 94   float: left;
 95}
 96
 97#officers li {
 98   width: 100% !important;
 99}
100
101#officers {
102   overflow: hidden !important;
103   margin-top: 10px;
104}

Now for the excruciating part: uploading the images. On the website backend, click the Add Image button and then the Upload tab:

Upload your photo and wait five years or so for it to finish. Then, click the Image Info tab, followed by the Browse Server button. Click the image you just uploaded, and then OK. In the URL box will be the URL for your photo — copy it and paste it into your HTML where it says Image URL here:

Copy this

Repeat this process, add names and job titles and Bob’s your uncle.

And your social media? ¶

You’d be forgiven for thinking that adding social media links on the backend would cause them to appear on the frontend. Nope, it’s another DIY job. First, the HTML:

159<h2>Social Media</h2>
160<ul class="social-media">
161   <!-- repeat block for each social media account -->
162   
163      <li>
164         <div class="icon" style="background-image: url('IMG URL HERE');"></div>
165      </li>
166   
167   <!-- end repeat -->
168</ul>

To style it, we set up the ul to remove the bullet points, remove its left-margin so it sits flush with the rest of the page and add an :after rule that clears the float rule that we bring in for all its child list elements to make them align horizontally:

103.social-media {
104   list-style: none;
105   margin: 10px 0 10px 0 !important;
106}
107
108.social-media:after {
109   content: '';
110   display: block;
111   clear: both;
112}
113
114.social-media li {
115   float: left;
116}

Then we just add some styling to the icons themselves, and a nice bevel :hover effect:

115.icon {
116   height: 50px;
117   width: 50px;
118   border-radius: 10px;
119   background-size: cover;
120   background-repeat: no-repeat;
121   background-position: center center;
122   cursor: pointer;
123   margin: 5px 10px 5px 0x;
124}
125
126.icon:hover {
127   -moz-box-shadow: inset 0 0 10px #000000;
128   -webkit-box-shadow: inset 0 0 10px #000000;
129   box-shadow: inset 0 0 10px #000000;
130}

Full Code ¶

  1<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
  2eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  3
  4<style type="text/css">
  5   .content, 
  6   .header {
  7       width: 90%;
  8   }
  9   .bottom-union, 
 10   .top-union, 
 11   .uc-poweredby-nusdigital-logo {
 12       width: 100%;
 13   }
 14   .uc-poweredby-nusdigital-logo-wrapper {
 15       width: 100%;
 16   }
 17   
 18   .union-footer {
 19       margin: 0;
 20   }
 21   
 22   .join-this-group.button-bottom {
 23       width: 100% !important;
 24   }
 25   .join-this-group.button-bottom a {
 26       margin: auto !important;
 27       background: none !important;
 28       border-radius: 15px;
 29       text-indent: 0px !important;
 30       padding: 8px 20px 8px 20px;
 31       text-align: center;
 32       color: #551F75;
 33       border: 2px solid #551F75;
 34       line-height: 40px;
 35       text-decoration: none;
 36       background-size: 100% 200% !important;
 37       background-image: linear-gradient(to bottom, transparent 50%, #551F75 50%) !important;
 38       transition: background .5s ease-in-out;
 39   }
 40   .join-this-group.button-bottom a:hover {
 41       background-position: 0 -100% !important;
 42       color: #fff;
 43   }
 44
 45   .uc-poweredby-nusdigital-logo {
 46       display: none;
 47   }
 48
 49   .title h1 {
 50       background-color: #551F75 !important;
 51   }
 52
 53   .thumbnail, 
 54   .group-category, 
 55   .group_left_panel_menu, 
 56   .typeCategory {
 57       background-color: #EAE5F2 !important;
 58   }
 59   .tree-navigation li,
 60   .tree-navigation li a, 
 61   .tree-navigation h4 {
 62      color: #551F75 !important;
 63   }
 64   .group-category {
 65      padding-bottom: 6px;
 66   }   
 67   .galleryIcon img {
 68       border: 2px solid #551F75;
 69   }
 70
 71   .content-wrap h1,
 72   .content-wrap h2, 
 73   .content-wrap h3, 
 74   .content-wrap h4, 
 75   .content-wrap h5, 
 76   .content-wrap h6 {
 77       color: #551F75 !important;
 78   }
 79   h2 {
 80      background: none;
 81      border-bottom: 1px solid #e6e6e6;
 82      margin: 1.75% 0% 0%;
 83   }
 84
 85   .thumbnail-image img {
 86      height: 160px;
 87      width: 160px;
 88      object-fit: cover;
 89      object-position: 0 0;
 90   }
 91   #officers a {
 92      width: 100% !important;
 93      float: left;
 94   }
 95   #officers li {
 96      width: 11% !important;
 97   }
 98   #officers {
 99      overflow: hidden !important;
100      margin-top: 10px;
101   }
102   
103   .social-media {
104      list-style: none;
105      margin: 10px 0 10px 0 !important;
106   }
107   .social-media:after {
108      content: '';
109      display: block;
110      clear: both;
111   }
112   .social-media li {
113      float: left;
114   }
115   .icon {
116      height: 50px;
117      width: 50px;
118      border-radius: 10px;
119      background-size: cover;
120      background-repeat: no-repeat;
121      background-position: center center;
122      cursor: pointer;
123      margin: 5px 10px 5px 0x;
124   }
125   .icon:hover {
126      -moz-box-shadow: inset 0 0 10px #000000;
127      -webkit-box-shadow: inset 0 0 10px #000000;
128      box-shadow: inset 0 0 10px #000000;
129   }
130</style>
131
132<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
133eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
134minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
135ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
136velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
137cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 
138est laborum.</p>
139
140<h2 class="subheading">The Exec.</h2>
141
142<div class="section stripe officersdesk" id="officers">
143   <div class="stripe-wrap" id="officers-wrap">
144      <div class="stripe-carousel officersdesk" id="officers">
145         <ul class="jcarousel-skin-tango edit-mode-stripe">
146            <!-- repeat block for each exec. member -->
147            
148               <li>
149                  <span class="thumbnail-image"><img alt="POSITION HERE" src="IMG URL HERE" /></span> 
150                  <span class="page-details"><span class="page-title">NAME HERE</span><span class="page-summary">POSITION HERE</span></span>
151               </li>
152            
153            <!-- end repeat -->
154         </ul>
155      </div>
156   </div>
157</div>
158
159<h2 class="subheading">Social Media</h2>
160
161<ul class="social-media">
162   <!-- repeat block for each social media account -->
163   
164      <li>
165         <div class="icon" style="background-image: url('IMG URL HERE');"></div>
166      </li>
167   
168   <!-- end repeat -->
169</ul>

Fractal Wrongness: The state of being wrong at every conceivable scale of resolution.

I may have made my thoughts on the new NUS Digital/UnionCloud-based LUSU website, brought in for the start of the 2016/17 academic year, known previously. I may have said that one day, I’ll learn to stop giving the NUS even the slightest modicum of credit, and described UnionCloud as a CMS only its mother could love. Hardly high praise.

But then I had to actually use the damn thing, in all its fractal, fractal wrongness.

Now, I won’t lie — I wasn’t involved in the development process. I don’t know just how much one is given by the NUS to work with. However, UCUM’s SU are on the same system: check it out. They were on it back at the end of last year, so perhaps these issues are just teething problems that UCUM worked out whilst I wasn’t looking. In that case, consider this a public service announcement. No names named, no beefs: just a professional suggestion (or ten).

Because frankly, this is the most superfluous button I’ve ever seen:

This article won’t be a publish & forget kinda deal either, I’ll update it every time I come across a new issue. Expect many updates. Some will be nitpicks, some will be great big security vulnerabilities, some will just be personal aesthetic quibbles. All will have gotten on my tits at least once. Without further ado:

The colour scheme ¶

LUSU has a quite nice shade of purple (#52237f, to be precise) to call its own. Colours that go with purple? Complementarily, yellow. Analogously, pink or dark blue. Triadically, orange and dark green. Tetradically, red, green and yellow. Do you know what all those colours have in common?

They’re not fucking turquoise.

The width ¶

Y’know, there’s a reason achieving this kind of layout is called the Holy Grail of web design. That’s not an excuse to just leave ½ of the page blank.

The not-even-consistent width ¶

The top looks like this:

The bottom looks like this:

Fine. Cool. Whatever.

The border bleed ¶

Even with that, the Your Officers bar extends beyond the boundaries of everything else. Was it intentional? Was it a mistake? There’s no way to know, for both seem as one when it comes to the LUSU website.

How well it renders on a phone ¶

Like poetry, really.

The Your Officers block ¶

When you see a layout like that, and the highlighting of the President on the left there, what do you assume? I even did bloody training for this thing, and I still assumed clicking the other officers would restrict the articles below them to ones from their area of expertise.

The fact that Website Training is still a category ¶

The fact that a society I’m on the exec. of is in it ¶

The fact that I’m still not in said society, despite emailing LUSU support about it two months sgo ¶

In fact, let’s go back to that last picture a sec ¶

How come I only seem to exist as a product of the sum of my society exec. memberships? Where’s the page for Ben Goldsworthy, student? I’m a human being, man!

I mean, there is a page for entering in details and a profile picture. There just doesn’t seem to be any directory of students or anything that’d make that worthwhile.

You can attach your social media accounts though!

The incredible disappearing header bar ¶

Now you see it:

Now you (view a club or society and) don’t:

That’s not how you do infinite scrolling ¶

Infinite scrolling is supposed to replace indexed pages. If your Load More button

1. has to be clicked; and
2. just appends another page to the end of the list AND there's no way of linking to specific pages

you have no benefits of either method of navigation.

The most garish, Fisher-Price CMS dashboad I’ve ever seen ¶

I would write exactly why this is hideous, but I’m busy throwing up in my mouth and also everywhere else.

The buttons ¶

Okay, so this is where things get a little technical (although to be fair, why are you reading me whinge about web design if you aren’t willing to slog through a bit of that?). This is the button on the society information pages:

It looks like arse and doesn’t fit the website in any way, shape or form, right?

Here’s its CSS:

.join-this-group.button-top a, 
.join-this-group.button-bottom a {
    background: url("default/jointhisgroup-button.png") 
                no-repeat scroll left top transparent;
    display: block;
    height: 41px;
    overflow: hidden;
    text-indent: -999px;
    width: 216px;
}

Oh shit bruv, what you doin'?

Ignoring briefly the use of a background-image for the button, the initially overlooked text-indent: -999px; caught my attention. Was someone having a giggle? I changed it to text-indent: -80px;, bringing whatever it was that was being shoved 999 pixels over to the left rightward. Lo and behold:

This is the strangest way of doing a button I’ve ever seen, but it got me thinking. Another article kind of thinking.

It accepts arbitrary Javascript ¶

As the Wu-Tang Clan famously sang, XSS ain’t nothin’ to fuck with.

The Submit button on the issue reporting form disappearing if you enter something incorrectly ¶

I’m just trying to tell you about how massively vulnerable your website is, why must you make it so difficult?

How long it takes to upload images ¶

I timed it. It took 26 s to upload a 416 KiB .png. That means we’re working on 16 KiB/s. Jesus wept.

That’s not how CSS IDs work ¶

What makes attributes of type ID special is that no two such attributes can have the same value in a conformant document, regardless of the type of the elements that carry them; whatever the document language, an ID typed attribute can be used to uniquely identify its element.

This W3C Markup Validation Service result ¶

Nah let’s just use whatever naming convention we damn well please ¶

.thumbnail,
.group-category,
.group_left_panel_menu,
.typeCategory {
    background-color: #915BB1 !important;
}

That is an actual CSS rule I had to write. Hyphenated, underscored and camelCased class names all together. It’s anarchy.

Telling me to clear my cache for no reason ¶

Still telling me to join groups that I’m on the Exec. of ¶

£0 Cash Memberships ¶

Is this really the only way of creating a free membership?

The URLs ¶

Okay, so LUECS’ is https://lusu.co.uk/groups/european-culture, which makes sense. What about LUB?

Yeah ‘cause that’s intuitive.

Linked social media profiles not showing up anywhere ¶

What’s the point, if no link gets added to the society page?

The world’s longest and least-collapsible category list ¶

Every single category and every single child category, all standing between you and the Save & Approve button at the bottom. No means of collapsing the list. Let’s do this.

On the bright side, you do get some amusement as you scroll. For example, the juxtaposition of Fetish and First Aid (not to mention Darts — is someone from Pendle College behind this?):

These .clear elements ¶

They have one rule: clear: both;. Just stick it on an :after and clear up your HTML.

The only link to the ideas directory being through the frontpage ¶

Specifically this small, unstyled See more:

Not being able to click on the thumbs to vote on ideas ¶

So you’re looking through the list of ideas and see one you feel strongly about. Intuitively, you’d probably click one of the thumbs:

Then nothing would happen, and you’d look closer, finally seeing that orange block on the bottom. Yes, you have to click that to get to the idea’s page, where you can click the thumbs to vote (or the incredibly superfluous orange text underneath works too):

Want to know where this is particularly egregious? On the website homepage, this is what you get:

And of course, the whole block with the thumbs and the tallies for both responses is just one big link to the idea’s page. Of course.

The middle button not actually linking to anything ¶

The colourscheme (again) ¶

I mean, seriously? The orange is a bad clash, but at least it’s a bad clash consistently throughout the website. The turquoise too. But to stick in a different fucking shade of purple takes real balls.

The liberation officers not being listed ¶

Maybe this is a personal beef, but I’ve had a run-in before with a liberation officer who had a peculiar interpretation of what being an elected public position should entail. Item one is that you be publicly listed as holding that position so people can contact you.

The breadcrumbs not working half the time ¶

So this works (until you click on a society and the whole top header disappears; see earlier):

But then:

This button ¶

The Found a problem with the site? button from which this article derives its title looks as though it was originally suppose to be on a LUSU purple background, rather than a white one, and thus sticks out like a sore thumb.

1. increase readership of the Witch; and
2. update the College websites.

These promises usually last until the dust has settled on voting and a new officer has been chosen to spend the year failing to achieve everything they set out to do.

So I did everything I promised to do, because I’m great like that.

Screenshot by author

Who’s what for? ¶

The first issue was what to do with Pendle College’s two websites. The College website at lancaster.ac.uk/colleges/pendle was considered the SCR’s site, and the one at pendle.lusu.co.uk the JCR’s. This makes some sort of instinctive sense — the JCR is a body within the LUSU whereas the SCR is a University construct, so it would make sense that their website hosting would be split thus.

However, in practice it wasn’t ideal. Whilst authorship may have been clear, there was no such delineation in audience. Information would be present on one site and not the other, or duplicated across both of them, with little rhyme or reason. For example, the page of information on the annual College Awards for third-year students was only present on the SCR page.

In light of the interlinked nature of the JCR and SCR, the semantics of the hosting of each and (especially importantly) the relative ranking of both for an online search of Pendle College, the only solution was to divide one site into a current students site and the other into an everyone else site. pendle.lusu.co.uk would be the former as LUSU would only hold relevance for current students, whilst lancaster.ac.uk/colleges/pendle would be the latter as it is the earlier hit for an online search, as well as non-students being more likely to search for the site via the Lancaster University website.

I used the wonderful draw.io to create sitemaps of both sites. After collecting the leaves from each graph, pendle.lusu.co.uk \( \cup \) lancaster.ac.uk/colleges/pendle produced the complete set of all pages that anyone, over the years, had considered likely to be of worth to someone, sans duplicates. Then I divvied them up into two sets. There were a couple that were arguably relevant to the audiences of both sites (e.g. Merchandise, which would be of interest to both current students and alumni), so I left these aside for the time being.

pendle.lusu.co.uk ¶

Screenshot by author

The first to tackle was the LUSU-hosted site, since it was technically the only one actually in my remit as Media & Comms Officer. I logged into the WordPress backend and like an archaeologist unearthing an ancient lost city could see the remains of hundreds of years’ worth of human activity, all amounting to nought. Countless Pages, created by countless past Media & Comms Officers, and all abandoned with nary a speck of content on them. Contact addresses that still led to Officers over half a decade gone. Photos of students for whom uni is now but a distant and hazy memory.

It all went in the bin.

Screenshot by author

The few that had actual content on had it salvaged beforehand, but many were too far gone to be saved and would have to be rewritten. After this great purge, I stuck on a couple of lorem ipsum Posts and Pages and got to work on redesigning the layout. Which is where I discovered Thesis.

All the LUSU college sites used Thesis. Now, I don’t know if it’s Thesis’ fault, or if there was some LUSU meddling that left it the state it was, but restrictive hardly does it justice. For a suite that purports to be all about empowering the designer, it was an ordeal to do anything more than change the colour scheme of the website (slightly). Considering the site features such classic infomercial lines as There’s a dirty little secret other theme companies don’t want you to know, I’m inclined to not cut it too much slack.

One email to LUSU IT Support confirmed what I’d also been worried about: whenever Thesis was bought (I suspect around 2011, judging by the publication date of this review), the login needed to access any form of support or documentation wasn’t deemed worth retaining for future use.

Basically, LUSU had lumped me with a $197 white elephant. And disabled the Add New button on the Themes page. I had clearly hit against the same wall that stopped all my predecessors, and after hours of fruitless work was about ready to give up in kind.

But wait, what’s this? They left in Twenty Fourteen? Lovely, customisable Twenty Fourteen?

Screenshot by author

If at first you don’t succeed, break everything and build on the rubble.

With Thesis ditched, I spent hours playing with all the settings offered by Twenty Fourteen, tweaking the site to be just how I wanted it. The end result, I think, is something of a large step up:

Screenshot by author

Obviously, it would have been better to be able to customise more in-depth, for example getting the content to stretch right across the screen rather than leaving that unsightly blank gap on the right half of the page, but an improvement is an improvement.

To finish off, I went through my set of Pages that I’d assigned to this site and added them in one-by-one. Most of the text had to be completely rewritten, so it’s a good thing chatting shit is one of my many skills.

One quickly-made trailer and post on the Pendle College Facebook page later and it was done. I even got a shoutout from the LUSU Twitter account:

New @PendleCollege website is looks pretty good! Well done #TeamPendle Take a look https://t.co/SIqDMInDZM pic.twitter.com/yjlCDefBtO

— Lancaster Uni SU (@LancasterSU) February 10, 2016

lancaster.ac.uk/colleges/pendle ¶

With what I’d learned on pendle.lusu.co.uk, this was less of a challenge. It didn’t use Thesis, just some ancient terrible Theme called Productz. Aware that using Twenty Fourteen again would yield two very similar-looking websites, I took advantage of the fact that the Add New button wasn’t disabled here and downloaded Sydney. Hours of tweaking later, and we had a fully respectable new site.

It was time again to add the Posts and Pages, and when that was finished, figure out what to do with the third set of pages. Eventually, I settled on having pages like Merchandise on pendle.lusu.co.uk, with links in the navbar of lancaster.ac.uk/colleges/pendle to them — this seemed the best compromise to avoid redundancy, which is a surefire way of leading to information decay and inconsistency.

Screenshot by author

One slip of a mention into an end-of-year post later, and I was done.

Then LUSU shat the bed ¶

As I sat, resting on my laurels, I began to hear disconcerting things through societies on whose execs I sat. LUSU were bringing in some sort of new digital system, and as a consequence all societies were being subsumed into pages within it. I inquired. What I found horrified me to my core.

It was something called NUS Digital. NUS. I shuddered: stop the ride, I want to get off.

Screenshot by author

I’ve talked about the NUS in the past, but now they had moved out of just ludicrous student politicking and onto my turf. I remained optimistic, however. Maybe it’ll be good, I thought to myself. One day, I’ll learn to stop giving the NUS even the slightest modicum of credit.

Okay, so it’s a CMS only its mother could love, thought I. But maybe the colleges, being bigger than societies, will get to keep their sites. SCAN does. Again, my optimism was misplaced.

I may one day write a more about my issues with NUS Digital and their UnionCloud service, but for the time being I just had to salvage what I could of the site before it was taken down. Rushing back from T in the Park, with nary a pause to retrieve what was left of my legs from the all-covering muck, I exported everything and imported it into lancaster.ac.uk/colleges/pendle. A bit of fine-tuning and messing about and I had everything sitting smoothly in its new home — lancaster.ac.uk/colleges/pendle was now the home of everything Pendle, for everyone, be they a student prospective, current or past.

Now the uni’s going to shit the bed ¶

I know that all Principals have been approached by the University about College websites coming into line with departmental ones…there seems to be a lot going on about that at the moment. Tell me about it, College Administrator.

I got more information from the Principal. The central University system is currently developing a more corporate Content Management System for all colleges, to be rolled out more or less immediately. Fair enough, it is the University exercising its right to market itself in the way it determines is best globally, but it’s still a bit like adopting a kid and then having them emancipated. After you’ve paid for college.

We were all of us cogs in a great machine which sometimes rolled forward, nobody knew where, sometimes backwards, nobody knew why.

Alas, forces greater than myself had had their say and if The Wire taught me anything, it’s that the individual is powerless in the face of an establishment that has made up its mind. I exported everything from lancaster.ac.uk/colleges/pendle just in case and wrote this up so that, when the last traces of both sites have been expunged, there will be some evidence of their brief existence.

However, optimism ¶

I wonder how I can break UnionCloud to look nice.