Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

Pages: (2) 1 2  ( Go to first unread post ) Add ReplyNew TopicNew Poll

 ellipsis issues?
#
(i have another topic started for a separate issue but i wasn't sure if rule #5 meant i couldn't edit it so i'm posting a new one so let me know if this is wrong!)

so the problem i'm having is: i have two classes/ids that have ellipsis styling (#recent-topics .row4 strong // .topictesties) but it's effecting a third class (.forumtoptesties) that doesn't have it.

link removed <3

and i was also wondering if there was a way to make ellipsis work on the topic title within a max width without effecting the user name (specifically for recent topics) but keeping a nice justified line?

so like instead of shortening the entire line:

this is a super long title to test the ellipsis width - chester j. rockwe...
this is another super long title to test the ellipsis width - chester j. r...
here is another super long title to test the ellipsis width - jana a. ba...


or just the title at the exact same width that makes the titles look boxy:

this is a super long title to test the ellipsis widt... - chester j. rockwell
this is another super long title to test the ellips... - chester j. rockwell
here is another super long title to test the ellip... - jana a. baker


you get more of a justify line that doesn't shorten the name at all and has different widths where the ellipsis starts for the title - all within a set width div:

this is a super long title to test the ellipsis width...- chester j. rockwell
this is another super long title to test the ellipsi... - chester j. rockwell
here is another super long title to test the ellipsis wi... - jana a. baker

This post has been edited by coop: Aug 1 2017, 04:40 PM
PM
#
bump
PM
#
perhaps if you post a picture of what you're after, people might be able to help? Coz reading that i'm not sure of what you're wanting.
PM
#
What you're seeing as a CSS property on .forumtoptesties (heheeehheh testies) is actually server side:
user posted image

I don't know if there's a setting for this in the ACP, but in the interim you can normally fudge it with CSS:
CODE
.forumtoptesties a::after {
   content: attr(title);
   font-size: initial;
}
.forumtoptesties a {
   font-size: 0;
}


However, you seem to have a tooltip library installed. Unless I'm overlooking an ACP setting, you may need to use a script.

CODE
$('.forumtoptesties a').each(function() {
 $(this).text($(this).attr('title'))
});


As far as the separated title and author, absolutely. You'll just need to wrap them in separate elements and set the title element to have a fixed width and overflow:ellipsis;

This post has been edited by Dusty: Jul 17 2017, 01:08 AM
PM
#
kickflare here is an image if it helps!

basically when i set a limit on the ellipsis it looks a bit boxy (which i do not like) and it often shoves the username to the next line. i'd rather it all be on one line and the title to shorten itself to the width of the container to fit the username. and if the title is too short for the overflow then the entire line would just be aligned left.

user posted image


Dusty the css part (forumtoptesties) seems to work almost perfectly except when you hover/go to click on the link it starts flickering like a strobe light lol is there a way to fix that?

edit: i just realized that even if i remove the ellipsis from my stylesheet, it still does it to the topic title on the main page.
edit: if i remove everything from the forum row html template except the id row and keep the <!-- |last_topic| --> it STILL has ellipsis. i tried a regular link with a really long title in its place and it was fine so i tried using <!-- |last_topic_text| --> and wrapping a link around it but it didn't help. i also deleted my tooltips just to see and it didn't seem to have any effect on it either.

This post has been edited by coop: Jul 18 2017, 07:07 PM
PM
#
bump.

i'm not even bothered about the recent topics issue anymore, i feel like i can mess with that and eventually either come to love it or figure it out by/try something new with the next skin.

i would really like some thoughts on how to fix the topic titles, though. if i use the css Dusty offered it shows the entire title perfectly - the only issue being it flickers when you hover over it or try to click on it (sometimes you have to click on it more than once for it to work) and it will say "go to the first unread post" on the sub-forums instead of the actual title.

but if i don't use it, it will have the same ellipsis problem on both the main and sub forums.

This post has been edited by coop: Aug 1 2017, 04:40 PM
PM
#
Sorry, got busy with other things.

The ellipsis/recent topics thing will probably require a certain structure of markup - I played around with it and couldn't get the aligns, overflows, etcetera to work all together at once without pushing it all into a new table. Personally, I would recommend removing the title's selector from the style-my-tooltips plugin, as the flashing is caused by that plugin creating the tooltip and bumping the ::after content out of the way. With the title fully expanded, the tooltip is redundant anyhow.

Also probably worth mentioning: Something's wrong with your head tag, and all those scripts are loading inside the body.
PM
#
i put them in the wrong place, they Should be fixed now.

i wasn't really using it specifically for those titles but for other links/buttons/etc. on my other board the tooltips don't effect the titles at all and it's all the same coding i copy + pasted then modified.

is there a way to just change the selector name so that i can continue to have those tooltips on certain things and it doesn't effect the title?
PM
#
Of course. The SMT script has its targets set in the script

CODE
$(document).ready(function(){
           $("[title]").style_my_tooltips();
       });


Just use the :not pseudo-class and target your forum links.
PM
#
i have no idea how to do that. i searched a lot of things and i could only find css use? and the only thing i could come up with that actually had some effect is this:

i get this far
CODE
.forumtoptesties:not(title) {no idea how to style any of this}


which is probably wrong. i styled the background color yellow just to see if it was the right place and that seems to work but i honestly don't know wtf i'm trying to do.

i'm worried that there is something more i've done wrong to this coding.

edit: also will that somehow rectify the sub-forums issue where have their actual title instead of just "go to the first unread post"?

edit: i decided to give the script you suggested another go and it worked this time (i obviously fudged it up before) and much better than the css - no more flickering when i hover/go to click on the link! still having an issue with the sub-forum titles tho!

This post has been edited by coop: Jul 27 2017, 08:18 PM
PM
#
bumping things makes me feel like a jerk but this is still very much needed!

after all of the edits (thank you sfm btw Dusty) the titles on the subforums say "go to the first unread post" instead of their actual titles.
PM
#
Sorry, didn't see this. The :not selector will work fine here.

CODE
$('.forumtoptesties a:not(#subforum-list .forumtoptesties a)').each(function() {
$(this).text($(this).attr('title'))
});


This will affect the front page forum titles but not the ones in the subforums list, as the structure is different.
PM
#
gotcha! which brings me back to the sub-forums having an ellipsis.

can i replace the <% FORUM_ROWS %> in the sub-forum headers html templates or would that not work bc the structure is different?
PM
#
If you mean these:
user posted image

Unless there's a setting being overlooked, there's no clear or easy way to remove the ellipsis or replace it with an accurate string.

I'm not sure what you're asking about replacing the forum rows template.
PM
#
yes those.

and i meant this:
CODE
<div class="tableborder" id="subforum-list">
<div style="width: 100%;height: 1px; background: #ddd;"></div>
<% FORUM_ROWS %>
<div style="width: 100%;height: 1px; background: #fff; margin-top: 16px; margin-bottom: 5px;"></div>
</div>


replacing the <% FORUM_ROWS %> with the html I have in my forum row but moving things around?

This post has been edited by coop: Jul 30 2017, 08:55 PM
PM
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

OptionsPages: (2) 1 2  Add ReplyNew TopicNew Poll