HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


9.0 - CSS (Tip) - Where's me pipe then, matey?

Login / Search

 [ Join | More ]
 Add topic 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#90100 (In Topic #18241)
Avatar

Community saint

As a long-term pipe smoker, I am very partial to using the pipe symbol to differentiate between zones in my Zone Menu.

So you can imagine my horror when I found that version 9.0 didn't seem to want to display one!

Did a trawl of the CSS (Chrome Developer Tool - but all the other browsers have something similar) and identified this as the culprit:

.menu_type__zone li:before, .menu_type__zone .divider {
           /*content: "\221E";*/ /* Swanky-looking infinity symbol */
           content: "\00A0"; /* an nbsp */
           vertical-align: middle;
           color: {$GET,pale_border};
           font-size: 0.8em;
           {$BETA_CSS_PROPERTY,opacity: 0.5;}
           padding: 0 17px;
}


Changed these lines (marked in red) and I am a happy pipe-symbol user again!

.menu_type__zone li:before, .menu_type__zone .divider {
           content: "\01C0"; /* Pipe symbol */
           /*content: "\221E";*/ /* Swanky-looking infinity symbol */
           /*content: "\00A0";*/ /* an nbsp */ ←(commented out)
           vertical-align: middle;
           /*color: {$GET,pale_border};*/ ←(commented out
                      - doesn't show up too well on my new background
)

           color: #000;
           font-size: 0.8em;
           {$BETA_CSS_PROPERTY,opacity: 0.5;}
           padding: 0 3px;
}


The only 'difficulty' I encountered was trying to track down the Unicode value for the character. So, if you're tearing your hair out wishing that you could use your pipe symbol again, here's the fix!

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#90109
Avatar

:). You could actually have put in "|" directly actually, the "swanky-symbol" is a unicode symbol and I didn't want to force the CSS files to be in unicode format. "|" is valid in any character set, like most symbols on the keyboard.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#90119
Avatar

Community saint

Chris Graham said

"|" is valid in any character set, like most symbols on the keyboard.
Yeah, even the Portuguese keyboard which has a multitude of 'standard' squiggly-wiggly characters. I did the laborious Unicode search because my knowledge is severely limited, and I didn't know whether that was an absolute requirement!

I sneakily had it like so (already, even), but didn't want to display my ignorance if I'd got it wrong …
.menu_type__zone li:before, .menu_type__zone .divider {
   content: "\|"; /* Pipe */
   /*content: "\221E";*/ /* Swanky-looking infinity symbol */
   /*content: "\00A0";*/ /* an nbsp */

……….. etc.


… but thanks for the confirmation.

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#90189
Avatar

Fan in action

Fletch said

Chris Graham said

"|" is valid in any character set, like most symbols on the keyboard.
I sneakily had it like so (already, even), but didn't want to display my ignorance if I'd got it wrong …

I'm compelled to display my ignorance. It's part of the aging process... 'course I could sit on the porch, sip lemonade, pretending to contemplate profound thoughts while nodding sagely at passersby...:cool:

"I think ...therefore I'm in a mess..."
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: