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.


[PARTIALLY RESOLVED] - 9.0.2 - Archives display borked

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#92936 (In Topic #18614)
Avatar

Community saint

Like Harry, here's my request for an extra eyeball or two on a display issue.



All suggestions welcome …!!

 O_o


Last edit: by Fletch

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:
#92938
Avatar

The CSS involved is…

Code

.comment_count {
   display: inline-block;
   white-space: nowrap;
   border: 1px dotted {$GET,dark_border};
   background: {$GET,main_background} !important;
   text-align: center;
   width: 1.1em;
   font-size: 0.9em;
   position: relative;
}
.comment_count:hover {
   border-right-color: transparent;
}
.comment_count strong {
   background: {$GET,main_background} !important;
}
.comment_count span {
   display: none;
   padding-right: 2px;
   background: {$GET,main_background} !important;
}
.comment_count:hover span {
   display: inline-block;
   position: absolute;
   padding-left: 0.3em;
   margin-top: -1px; /* Brings it up to the 1px dotted borders level (need to do as out of flow) */

   /* Similar styles to tooltips */
   background-color: {$GET,area_faded_background};
   border: 1px dotted {$GET,dark_border};
   z-index: 1000;

   border-left: 0;
}

The actual inner span comes from the language string:

Code

_COMMENTS=<strong>{1}</strong> <span>{1|comment|comments}</span>
Maybe you have an old override of that language string without the span?


Essentially .comment_count turns off word-wrapping, .comment_count span hides the nested span (making it invisible by default), and .comment_count:hover span makes the span show on mouse hover.


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:
#92944
Avatar

Community saint

Chris Graham said

… Maybe you have an old override of that language string without the span?
You know me too well, but thanks for the clear explanation which gave me a fighting chance to attack this little issue.

The override was 'deliberate' and served a purpose - still does - as I didn't see the point of showing the number and not the word(s) 'comment/comments'.

Tried many attempts at the CSS and global.ini, but couldn't get the display to stop bleeding, or worse, arbitrarily electing to display on the wrong line (wish I'd made some screenshots of that!).

My preferred solution (for now) is to suppress the comment-count altogether by editing 'display: inline-block' to 'display: none'. I am not aware what else might 'break' with this approach, but a positive spin-off was that I could re-size the customized 'read more' box I've built for each news entry, and not have to worry about the comments bleeding out of those boxes too!



 :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:
#92945
Avatar

I'd guess turning off "white-space: nowrap;" would have done it, but I haven't tested.


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:
#92946
Avatar

Community saint

Chris Graham said

I'd guess turning off "white-space: nowrap;" would have done it, but I haven't tested.
I did. Didn't have the desired effect!


Even tried inserting "word_wrap: wrap-word;", but that didn't help much as long as there was any 'em' of padding.

Who knows, I might have a 'Eureka' moment, but it is currently being elusive …!!

 :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:
#92947
Avatar

Wouldn't surprise me if "display: inline-block;" broke wrapping too, as a block will never wrap.


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:
#93050
Avatar

Community saint

I open this again, because I got the same problem with the IOTD block, look at the picture. I miss here the word comment, only if you hover over its visible




Harry


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#93052
Avatar

This is meant to happen, it's to keep the styling neat.


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:
#93054
Avatar

Community saint

Ow oke, thanks Chris for the explanation.

Harry


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#93111
Avatar

Community saint

Harry-S said

I open this again, because I got the same problem with the IOTD block, look at the picture. I miss here the word comment, only if you hover over its visibleHarry
Yeah, as Chris said Harry, it is by 'design'. But you can RE-DESIGN to suit your own display.

This is the CSS that you need:
.comment_count span {
   display: none inline-block;
   padding-right: 2px;
   background: {$GET,main_background} !important;
}
.comment_count:hover span {
   display: inline-block;
   position: absolute;
   padding-left: 0.3em;
   margin-top: -1px; /* Brings it up to the 1px dotted borders level (need to do as out of flow) */

   /* Similar styles to tooltips */
   background-color: {$GET,area_faded_background};
   border: 1px dotted {$GET,dark_border};
   z-index: 1000;

   border-left: 0;
}
Change the 'display' property to 'inline-block' in .comment_count span. If that doesn't break your display in the panel_box, then I think you can call it a success! If it screws up, then set the display to 'none' for all of it (I think I said that in an earlier post in this thread). No display means users are not distracted by a a figure appearing on its own without an explanation …!!

 :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:
#93118
Avatar

Community saint

As always… Thanks again Fletch  :thumbs:


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#93119
Avatar

Community saint

: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:
#93120
Avatar

Community saint

well try this, but like Fletch already writed: no success. Oke I let this rest for now. Got a ball of headache, so from the monitor for a while.. :(


http://digiflash.nl Photo community  (dutch)
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: