Truncated 'most recent comment' line in theme

toweliechaos · April 2013

I have been busy fiddling with the dark embed friendly theme and have come across a snag that I cannot find an answer to.

On the discussions page where it shows the 'most recent comment' title, user and date, it is truncating the title to a fixed width of 212px despite having plenty of available space. I have scoured custom and style css to no avail. Anyone have any idea where I can fix this annoyance?

Also, and this reveals my noob status with this, is there a way to modify items on one page/area but not all? For example, changing the font colour on a button on one page also changes the font colour in another area that I don't want it changed on. Is this just a by-product of how the code is written and there is no way of making changes at an individual level?

Any help appreciated, thanks.

hgtonight · April 2013

Welcome to the community!

While I don't use this theme, @vrijvlinder wrote it and can probably give you more insight!

vrijvlinder · April 2013

@toweliechaos

Anyone have any idea where I can fix this annoyance?

Sure if you could please link me I can look at it, meanwhile you could try Tiny-Dark-Embed-Friendly which is the same but has better design and a few extra options the big embed friendly does not have yet.

toweliechaos · April 2013

Here's the customised css files. The issues are:

Truncated 'most recent comment' line
User profile page - details superimposed over nav bar, more so when you click on the discussions/activity etc. tabs

vrijvlinder · April 2013

Ok I will check it out and get back to you.

is there a way to modify items on one page/area but not all?

Yes there is a way

for example :

body.Dashboard.Profile.Index li a.Comments

that would affect only that link on that page.

vrijvlinder · April 2013

The problem is you modified the floats of the

body.Profile #Panel and the body.Profile #Content

what makes a theme embed friendly is the floats. You must use float right or float left on the elements of the page. If you use float:none then things will be swimming on the page .

You need to decide where you want the panel either left or right but must use float to keep it there.

The width of the #Body of the page should be 100%. Then you adjust the content width and the profile width so it does not push the panel up or down.

You should not modify the default style . If you did, I suggest you move the changes to the custom.css and add an unmodified default style sheet again.

toweliechaos · April 2013

That's odd as I don't recall having modified the floats but I may well have done. I don't think I changed the default style either. However, no amount of fiddling with floats and margins in the custom.css stops the panel from appearing at the top of the page, so not sure which bit in particular is upset.

Anyway, in the meantime, I've modified the Tiny Embed theme and have got that pretty much exactly how I want it with one tiny/massive exception. If I access the site normally, it scrolls quite happily. If however, I access the forum from within my designated site (a webpage displaying an xhtml panel that links to the main site), it won't scroll. This is common across most of the themes, but I've managed to get it working with the Dark Embed Friendly theme. The panel hasn't changed and if I switch to back to my modified DEF theme, the scrolling returns. Any idea what/where I need to change in order to allow this to happen?

Thanks!

vrijvlinder · April 2013

Oh I see the problem of the scrolling happens when you view the embedded forum.

I have read from other people that happens to them on embed with any embed theme.

I am not sure how that would be eliminated except fiddling with the size of the iframe for the embedded forum.

You may need to add a position for the panel if it does not want to behave
If it is showing up too high then add margin-top if it is the profile or the content add the margin-top it can be a negative number too.

This should not happen, I don't see it happen when I test the theme. Also any theme can be good for embedding. Don't have to be embed friendly.

Try fixing the positions by fiddling with position: relative; margin top:-250px. or what ever works

toweliechaos · April 2013

Nothing I do to the panel seems to affect the themes; any size adjustments I put in make no difference to the forum.

Because the DEF theme works with scrolling and none of the other themes do, I'm assuming I've made changes to the custom.css to circumvent this issue. Would it be the custom.css where I put in the code you suggest?

As you may have gathered, I'm no CSS/HTML expert! I appreciate your help hugely and I might need beginner's guide on the code and placement.

Thanks!

vrijvlinder · April 2013

Yes the edits always go in the custom.css I have an idea , can you try to make the panel less wide? Like

#Panel{
width:240px;
}

toweliechaos · May 2013

Thanks for your input. In the end, I've gone back to DEF and made my modifications in there and am finally happy with all the bits - with one exception. Now I've got people testing it, I'm getting all the 'could we have x?' requests, one of which was 'could we have the menu bar stay at the top of the screen when you scroll down the page?'. This seemed like a reasonable request but I have as yet been unable to find a way of making it scroll with the page. The css looks like this:

            .Banner {
            background: url(http://i49.tinypic.com/2yxgq52.jpg);
            background-repeat: repeat;
            color: #000;
            cursor: pointer;
            display: block;
            font-size: 13pt;
            font-weight: 700;
            margin: 0;
            padding: 2px;
            white-space: nowrap;
            height: 30px;
            position: relative;
            text-align: left;
            top: 5px;
            }

All my efforts thus far have the bar all squished up and scrolling or disappearing altogether. Changing the position to fixed is I assume the way forward but what other commands do I need to add?

If you could enlighten a css novice, it would be much appreciated!

422 · May 2013

dont mix explicit positioning attributes when using relative positioning. The two dont mix.

For position:relative use margin positioning

For position:absolute use top,bottom,left,right etc

Its like adding oil to water

toweliechaos · May 2013

Sorry, but I don't see how this helps? You can see the code so what is my problem in this case?

x00 · May 2013

basically the browser has to be able to support position:fixed, or use javascript to reposition it. the detection of position fixed support is a complicated by some false positives/negative in some version of mobile safari.

he is saying don't use top/left, etc when using position relative. use margin-left, margin-top (you can also use negative values).

toweliechaos · May 2013

After all that, it doesn't really work anyway!

I'm using it as an embedded panel on another page and although I can keep the nav bar at the top of the panel, it means the content effectively scrolls behind it to achieve the desired effect. This frankly looks a bit rubbish and I don't think there is any way to have the scrolling part of the page to ignore the bit with the nav bar in so it scrolls underneath it, rather than behind it. Never mind!

Thanks for all the help and suggestions.

hgtonight · May 2013

@toweliechaos said:
This frankly looks a bit rubbish and I don't think there is any way to have the scrolling part of the page to ignore the bit with the nav bar in so it scrolls underneath it, rather than behind it.

Could you provide a screenshot, and/or describe what you want to happen a bit clearer?

toweliechaos · May 2013

The section inside the red outline is the xhtml panel embedded into page.
The nav bar 'dashboard-signout' is what I would like to fix. If I do, then all the section under the blue line scrolls behind that nav bar, rather than scrolling to the point of the blue line. This is why it looks a bit poor. There is no clashing or overlaying, but your eye can see that it is scrolling behind the nav bar rather than where you would expect it to stop.

Like I say, it's not the end of the world and I can't think how it could possibly only scroll to that point, so I'm happy enough not to have the nav bar fixed. It would be nice if it could, but hey, there's lots of things that fall into that category!

toweliechaos · May 2013

hgtonight · May 2013

I also think there is no way to get the effect you are describing. You could remove the scroll bar and add one with javascript.

Your menu header could also have a solid background (in addition to the gradient) with some extra padding on the bottom. That would make it look less like it was scrolling under it.

x00 · May 2013

you could just use position:fixed those that don't use position fixed can make do.

A more complicated version would be to modify the embed.js. moving the top bar outside of the iframe.