Ticket #201 (closed Enhancement: fixed)

Opened 8 years ago

Last modified 8 years ago

relative positioning of RSS Logo in Sidebars News Block

Reported by: Malte Owned by: Malte
Priority: Minor Milestone:
Component: Drupal Website Version: 4.0.9
Keywords: Cc:
Complexity: 3 Area:
Module:

Description

2) The RSS link (orange icon) should be visually set apart from the "more" link as these are 2 different functions. The current layout suggests they are the same function. It would be best to place the orange icon next to the DEEPAMEHTA NEWS heading (in the same row).

ATM: the solution is not perfect yet, since the RSS icon is placed per default at the bottom of the block, and is now just relatively positioned from there (the bottom) of the news block, resulting: the vertical position of the rss-icon depends on the height of the blocks content and thus, is not always in line with the blocks title

the fix needs basic understanding of theming/ writing a template for one specific block in drupal7, which i yet dont know because i just learned drupal6.

Change History

comment:1 Changed 8 years ago by jri

Wouldn't it help to adjust the CSS rule to be top-relative (instead of bottom-relative)?
According to rk CSS can be overridden in sites/all/themes/acquia_marina/css/local.css

comment:2 Changed 8 years ago by Malte

if you can tell me how i could achieve that since "position: relative;" how i know it, is interpreted by browsers positioned the element relative to it`s precessor but to achieve what we want, we would need to place the feed-icon relative to its parent.

comment:3 Changed 8 years ago by Malte

  • Status changed from new to closed
  • Resolution set to worksforme

comment:4 Changed 8 years ago by jri

  • Status changed from closed to reopened
  • Resolution worksforme deleted

"relative to its parent" ... exactly!

So, for the feed icon instead of

position: relative;
left: 135px;
top: -130px;

use

position: absolute;
right: 0;
top: 0;

Thus, the feed icon is *taken out* of the element flow (through position: absolute) and positioned in the top/right corner of the next parent (that is positioned with absolute, fixed oder relative).

In contrast, with "position: relative" the element is *left in* the element flow and is positioned relative to its normal position.

BTW: I would appreciate very much if the feed icon would appear in the News block (instead of the More News block). This way it is immediately visible and presented at a prominent spot.

comment:5 Changed 8 years ago by Malte

  • Status changed from reopened to accepted
  • Owner set to Malte

i reconfigured the newsfeed to be part of the latest news block instead of the more block, but now unfortunately the absolute placement of the feed-icon is relative to the browser window :/

now i have 2 css rules, one for the front page and one for the rest of the site.

comment:6 Changed 8 years ago by jri

I see.
It works, but is not robust against site header changes and not perfect when zooming the window.

To make it perfect you could try this as a little trick:
Give the News container position *relative* without specification of top, left, ...
This doesn't change the container position but establishes a new origin for *absolute* positioned child elements.

This way the rss icon positioning is independent from site header layout, and you save 1 css rule.

comment:7 Changed 8 years ago by Malte

  • Status changed from accepted to closed
  • Resolution set to fixed

thanks for your help!

Note: See TracTickets for help on using tickets.