Tweaks for widescreen mode – one CSS fits all?

Post plugins and custom CSS snippets here
feader
Bear Rating Master
Bear Rating Master
Posts: 160
Joined: 26 Dec 2012, 20:03

Tweaks for widescreen mode – one CSS fits all?

Postby feader » 31 Mar 2013, 00:31

I recently customized the CSS settings with the widescreen mode in mind. For feeds with a long title (looking at you, If Charlie Parker Was a Gunslinger, There'd Be a Whole Lot of Dead Copycats), in my opinion it is better to allow it to wrap, and generally allow the hlUpdated "block" (sorry, don't know the proper terminology) to be smaller:

Code: Select all

span.hlUpdated{min-width: 65px;} /* So the date fits in one line and needs no wrap */
div.hlFeed a {white-space: normal;}

Another thing is the author field, it's a bit shy sometimes. Can be helped with

Code: Select all

span.author{display:block;
    font-size : xx-small !important;
    height:5% !important; /* Can't remember if this has an effect */
}

Edit: Forgot to mention that the div.hlLeft element also got tweaked:

Code: Select all

div.hlLeft {white-space:normal;
padding-left: 4px;
padding-right: 4px;}

It looks a bit strange because the alignment for the box is done with regard to an invisible element, see attached screenshot.
hlLeft.png
hlLeft.png (4.98 KiB) Viewed 2566 times

As far as I remember, there were more icons in earlier versions, so with more plugins activated, that may not look so good.

Of course, in the non-wide mode, that looks – well, not so pretty :roll: It is a little better with a width=80% for div.hltitle, and no tweaking for div.hlLeft.

So is there a CSS config that looks good in both view modes, or is that something that should be handled with different CSSes in the upcoming themes folder? Or should there be different CSS "classes", as for the combined view?

User avatar
ebell451
Bear Rating Trainee
Bear Rating Trainee
Posts: 44
Joined: 15 Mar 2013, 15:06
Contact:

Re: Tweaks for widescreen mode – one CSS fits all?

Postby ebell451 » 31 Mar 2013, 03:08

Are these three snippets or the totality of your code? If not totality, could you post the full CSS? Thanks.

feader
Bear Rating Master
Bear Rating Master
Posts: 160
Joined: 26 Dec 2012, 20:03

Re: Tweaks for widescreen mode – one CSS fits all?

Postby feader » 31 Mar 2013, 17:09

ebell451 wrote:Are these three snippets or the totality of your code? If not totality, could you post the full CSS? Thanks.

This is indeed everything I changed.

kproth
Bear Rating Trainee
Bear Rating Trainee
Posts: 5
Joined: 25 Mar 2013, 20:24

Re: Tweaks for widescreen mode – one CSS fits all?

Postby kproth » 31 Mar 2013, 19:55

So is there a CSS config that looks good in both view modes...


For what it's worth, here's my take on this problem. I approached it by:
  • Removing most of the white-space on left/right of images (like you did but more aggressively)
  • Removing the "publish" icons (since I don't plan on using this feature)
  • Removing the "score" (again since I don't plan on using this feature)
  • Limiting the width of the feed title and pubdate in hlUpdated (overflow: hidden...)

Code: Select all

/* less white-space on left; allow line-wrap so the left-hand icons are above each other */
div.hlLeft {
    padding-left: 2px !important;
    white-space: normal !important; /* allow line-wrap */
}

/* further limit the white-space around the icons on left and right */
div.hlLeft img, div.hlRight img { margin: 0px 1px; }

/* limit width allowed for showing "Feed Name" and updated-date */
span.hlUpdated, span.hlUpdated div.hlFeed, span.hlUpdated div.hlFeed a {
    min-width: 80px !important;
    max-width: 80px !important;
    width: 80px !important;
    overflow: hidden !important;
    white-space: nowrap;
}

/* allow line-wrap, so the feed icon and score (if not hidden) are above each other */
div.hlRight { white-space: normal !important; }

/* hide "Score" buttons */
div.hlRight img.hlScorePic { display: none; }

/* hide "Publish" icons, and "Published Articles" special folder */
img.markedPic[id|=FPPIC] { display: none; }
div[widgetid=dijit__TreeNode_5] { display: none; }

kayvee
Bear Rating Trainee
Bear Rating Trainee
Posts: 3
Joined: 28 Apr 2013, 05:58

Re: Tweaks for widescreen mode – one CSS fits all?

Postby kayvee » 02 May 2013, 21:38

I just used this tweak and the outcome was very nice. However, I ran into an intriguing issue. My feeds are binned into 4 categories (and some uncategorized feeds). After copy/pasting the code from above, one of the categories became invisible! I am able to see articles from those feeds though in the 'All Articles' and 'Fresh articles'. Any ideas why this is happening?


Return to “Themes and plugins”

Who is online

Users browsing this forum: No registered users and 1 guest