How to format text with alternating colors?


#1

Hi, do you know if its possible to format the price-list page like this: http://stikkogreis.no/priser/ in Squarespace.

That you have both white and grey horisontal columns that help dividing the text.

Thanks,
Tor Martin


#2

Yeah, you can achieve that with a simple CSS called nth-child. Something like this:

div.sqs-block-content p:nth-child(2n+2) {
  background-color: silver;
}

It will of course depend on what content you want, though.

I also changed your post title to something more descriptive. :)


#3

Can you help us with making a page like this: http://www.reisemedisin.no/Prisliste/Bergen+og+Oslo
Thinking on how the prices are looking, with alternating white and grey background.

Tried with the "menu block" : http://reiseklinikken.net/prisliste/
But the client does not like it. And I understand why, the first link it much easier to read.

Regards,
Tor M


#4

I can tell you to apply the nth-child code there it would be this:

div.menu-items div.menu-item:nth-child(2n+2) {
  background-color: silver;
}

However, you could probably apply it to a markdown and get a very satisfying result. I'll get back to this once I get the time.


#5

Hi, look at this page now: http://reiseklinikken.net/prisliste/

This was made with the: http://www.tablesgenerator.com/html_tables

Its not bad at all, but its not responsive. So on smaller screen, the table is cut of.

The code that is being created with the generator is below. Do you see anything that stands out?

Thanks,
Tor M

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;border-color:#ccc;border:none;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#fff;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#f0f0f0;}
.tg .tg-0ord{text-align:right}
.tg .tg-zapm{background-color:#f9f9f9;text-align:right}
.tg .tg-lz1j{font-weight:bold;font-family:"Trebuchet MS", Helvetica, sans-serif !important;;text-align:center}
.tg .tg-0qhn{font-weight:bold;font-family:"Trebuchet MS", Helvetica, sans-serif !important;}
.tg .tg-0a6l{background-color:#eff9ff}
.tg .tg-4eph{background-color:#f9f9f9}
.tg .tg-vo56{background-color:#eff9ff}
</style>
<table class="tg" style="undefined;table-layout: fixed; width: 531px">
<colgroup>
<col style="width: 454px">
<col style="width: 5px">
<col style="width: 72px">
</colgroup>
  <tr>
    <th class="tg-0qhn">Konsultasjonspriser for reisemedisin (vaksinering, resepter og råd)</th>
    <th class="tg-0a6l"></th>
    <th class="tg-lz1j">Pris</th>
  </tr>
  <tr>
    <td class="tg-4eph">Første gangs konsultasjon ved ny reise</td>
    <td class="tg-vo56"></td>
    <td class="tg-zapm">kr 350,-</td>
  </tr>
  <tr>
    <td class="tg-031e">Grupperabatt (&gt;2 personer), per person:</td>
    <td class="tg-0a6l"></td>
    <td class="tg-0ord">kr 290,-</td>
  </tr>
  <tr>
    <td class="tg-4eph">Andre fremmøte for samme reise, bare vaksinedose, blodprøve eller resept. <br>NB: For konsultasjoner i forbindelse med en ny reise regnes det som første gangs konsultasjon selv om man har vært på Reiseklinikken tidligere.</td>
    <td class="tg-vo56"></td>
    <td class="tg-zapm">kr 175,-</td>
  </tr>
  <tr>
    <td class="tg-031e">Tillegg for hver vaksine som blir gitt (se Priseksempler)</td>
    <td class="tg-0a6l"></td>
    <td class="tg-0ord">kr 150,-</td>
  </tr>
  <tr>
    <td class="tg-4eph">Tillegg for konsultasjon etter kl. 17:00, og lørdager</td>
    <td class="tg-vo56"></td>
    <td class="tg-zapm">kr 50,-</td>
  </tr>
</table>

#6

I see width and, mostly, <table> standing out. Table's are inherently very responsive-unfriendly. Here are a few tricks to go around them

https://css-tricks.com/responsive-data-tables/

I tried to tweak for a little while and see if I could fix it, but nope. I'd still go with a much simpler markdown and lists <li>


#7

How much would it cost for you to "make it work". You can choose how to attack it, but its important for the client that the prices reads clearly. Its a awful long list of prices..

Regards,
Tor M


#8

What else is important, though?

I suppose being able to easily edit it.

The main problem with the markdown-and-list approach is building columns. But if it's just 2 columns I could hack in a javascript to push right whatever comes with a pre-determined string, such as a $ sign or kr.

On a second thought, I could do just the same to the menu block instead of using markdown, it will probably be better, without need of a script... Why he didn't like the Menu, though? Did you try setting it up as a Simple Style?

In any case, I could "make it work" for U$123 because it's fairly very simple.


#9

The client is willing to let you tackle this responsive table challenge. Whats important:
• The price list should look as it is now (with alternating colors on the background). It could be wider on desktop and iPad.
• Fairly easy to update. This guy can handle getting his hands dirty in html, but if you find an easier solution for him to update the prices, that a great bonus indeed.

So, send me an invoice for Tor Martin Norvik - Be kind design.
Looking forward to another project with you!

Regards,
Tor Martin


#10

Couldn't get in.

Over Contributor Limit

Invoice sent.

And work mostly done. Just apply this to Custom CSS and use the Menu Block you already know:

// table spreadsheet by cregox.com
div.menus {
  width: 100%;
  .menu-section-header {
    background: gray;
    padding: 10px;
    margin-bottom: 0; //replace default
    text-align: left;
  }
  .menu-item:nth-child(2n+2) {
    background: silver;
  }
  .menu-item {
    background: lightgray;
    padding: 10px;
    margin: 0; //replace default
    .menu-item-title {
      text-align: left;
      padding-right: 150px;
    }
    .menu-item-description {
      display: none;
    }
    .menu-item-price-bottom{
      margin-bottom: -30px;
      text-align: right;
      position: relative;
      top: -30px;
      width: 150px;
      margin-left: ~"calc(100% - 150px)";
    }
  }
}

You can see it working here: http://www.cregox.com/table-spreadsheet


#11

Try now if you are able to log into the site?


#12

Light gray is: #f9f9f9
And white is: #ffffff
And the top bar is: #f0f0f0

I have also a dividing line that is: #eff9ff (bluish) If its hard to make, then dont do it.

How do you write in the menu block to get it to work nicely?

Thanks for your help!
Regards,
Tor Martin


#13

I succeeded to make a nice meny block that works smile Can you help with the colors?
Thanks!


#14

I also manage to do the colors!

What are my options regarding text formatting? I.e. bold or not bold and so on?

Thanks!


#15

just so you know, I´ll give permissions to the client in a few hours again, and I reckon you will loose yours. I thought that you could have +2 people on board on basis plan..

Tor M


#16

Looking nice! smile

CSS is not so simple to format text, but also not that hard. Attributes to change it are within text and font: http://www.yourhtmlsource.com/stylesheets/csstext.html

I find easier to use the browser inspector first, as it has auto complete: https://thewc.co/articles/view/web-inspector-tutorial

If you want just bold and italics:

font-weight: bold;
font-style: italic;

And it's fine, you can remove my permission. wink