New welcome page mostly up, overhaul started

Workspaces LOTE4 “The Stewardship”
, , ,
1

I promised to help with a radical simplification of the LOTE4 minisite. I started today by:

  • making a new Welcome page at /welcome-to-lote4 – about 130 words in all, with 4 pictures. I have still a couple of tweaks to do, but to do them I need to learn to use the CSS injector. I will wait for @matthias to come back from his holiday, but this is already much cleaner than what we had before.

  • giving the minisite menu an overhaul. The welcome page is now where the LOTE4 item in the main menu points to; I changed some of the menu item names to make it shorter.

  • I also tweaked the FAQ page at /about-lote. If you don’t like it, just go back in the revision history.

  • For some reason, the registration page retains Ben’s avatar even after panelization. I had to copy-paste the content into a brand new minisite page, that panelized correctly.

1 Like
2

CSS Injector &c

CSS Injector is quite simple, you can just create a new rule as a test environment and try. For reference, you can look at the Group menu CSS Injector rule at /admin/config/development/css-injector/edit/16 (also contains the LOTE4 group menu styling) and Ben’s LOTE program rule at /admin/config/development/css-injector/edit/18.

Just put CSS code in there, and if necessary restrict the rules by URL path (if you find CSS selectors that make this non-necessary, even better because it’s simpler). You can also ask @Ben – he has also mastered CSS Injector :slight_smile:

About the user icon, this is added by Drupal Commons custom code when the inserted element in Panelizer is “Node: Node content”. When inserting “Node: Title” and “Node: Body” separately, the user picture is not shown, for any node type.

3

Is there some override?

It’s not quite that easy, @matthias. I did put in the rule at /admin/config/development/css-injector/edit/21 and the code in /welcome-to-lote4 (check out David’s photo), but it does not run (though at least it does not break). What I am trying to get is this effect. I copied the code from that example, except I used

content: attr(data-hovertext);

Instead of

content: attr(title);

Which is supposedly OK according to the author of the article.

4

Works now.

We had two mistakes, one by me and one by you. Mine was the same I made with instructions to Ben: I forgot to mention to clear all caches (under /admin/config/development/performance) and then reload the page (F5 or Ctrl + R) to see CSS changes.

Yours was saying td.hovertext {…} instead of a.hovertext {…} to match <a class="hovertext" …></a>. You can avoid this by experimenting with CSS first in your browser only, by using its “Inspect Element” feature or (if you like that better) installing the Firebug extension in Chrome or Firefox. Changes you do there are only visible to you and gone after page reload, so you can safely and quickly test things out and take over working changesets into the CSS Injector rule.

Fixed 'em, works now.

5

But can I use td too?

Can I use instead

<td class="hovertext" …> </td>

?

6

Sure you can.

Just change the HTML source and CSS accordingly. If both match, it works. You can assign any CSS class to any tag, no problem.

(In other cases, Drupal might not provide a way to influence CSS classes of certain tags, in which case you’d need to work with what is there. But not here, since you write the HTML source. And BTW, another fitting selector for your original source would have been td .hovertext {}, with the space in between.)

7

It does not alway work

I wrote a CSS class zeroborder in /admin/config/development/css-injector/edit/22:

td.zeroborder

But no joy. Tried it on this other page, in the right-hand side block. I used a two-column layout instead of a single table with four columns to be friendlier to small screens: Edgeryders had about 1K visits from mobile last month, with the iPhone being the most popular mobile device with 316 visits.

8

HTML mistake :wink:

In this case, your CSS was all fine, but you had a mistake in the HTML (missing start quote in <td class =zeroborder" >). Took me a bit to find it, but when Firebug does not show your class as being applied even though the CSS file is accessible by the browser (here, in this case), the suspicion is that the HTML is the culprit.

Also, I changed your rule a bit since the enclosing table also had a border (and border-collapsing) that had to be removed. Anyway, no borders left now.

9

P.S. Simpler is better

I like the new welcome page and menu. Now the program page is the most complex one … @ben, what about the intended column-wise display on the program page? Do you still intend to make it that way, or did you get stuck? (I answered your CSS questions somewhere already, I think …)