Stylesheet: "%MEDIA%" placeholder and "unread" class

Ideas? Suggestions?

Or report any bugs about GreatNews here

Moderators: justauser, MysteryFCM

gtanuel
Posts: 21
Joined: Wed Sep 14, 2005 12:47 am

Stylesheet: "%MEDIA%" placeholder and "unread" class

Postby gtanuel » Mon Oct 17, 2005 4:57 am

I recently played around creating (modifying) my own stylesheets and immediately noticed that we can definitely use these 2 enhancements:

  1. %MEDIA%-like placeholder to be available/processed not only in buildin_style.tpl but also in *.css
    This to allow 'skinning' (i.e. images), e.g.: background-image: url(%MEDIA%/mystyle/myimage.css)
  2. Add "unread" class in the outer most divs (i.e. gn_stories or gn_story). I've created a title-only CSS and would love to see those unread items in bold font/different color.

    e.g. from current:

    Code: Select all

    <div class="gn_stories">
       <div class="gn_storytitle">
          <span class='unreaditem'>&nbsp;&nbsp;&nbsp;</span>...title...</a>
       </div>
       ...
    </div>


    to:

    Code: Select all

    <div class="gn_stories" class="unread">
       <div class="gn_storytitle">
          <span class='unreaditem'>&nbsp;&nbsp;&nbsp;</span>...title...</a>
       </div>
       ...
    </div>

    or

    Code: Select all

    <div class="gn_stories">
       <div class="gn_storytitle" class="unread">
          <span class='unreaditem'>&nbsp;&nbsp;&nbsp;</span>...title...</a>
       </div>
       ...
    </div>

User avatar
Jack
Site Admin
Posts: 3472
Joined: Fri Feb 18, 2005 12:05 am

Postby Jack » Mon Oct 17, 2005 7:54 am

I will add %MEDIA% substitution in next build.

Still quite new to css, I'm not sure about 2 class attributes though. Both class will apply?

<div class="gn_stories" class="unread">

gtanuel
Posts: 21
Joined: Wed Sep 14, 2005 12:47 am

Postby gtanuel » Mon Oct 17, 2005 6:19 pm

My bad, should be: class="class1 class2", e.g:

Code: Select all

<html>
<head>
<style>
.firstclass { font-weight: bold}
.secondclass { font-style: italic }
</style>
</head>
<body>
<div class="firstclass">
This is the first class.
</div>
<div class="secondclass">
This is the second class.
</div>
<div class="firstclass secondclass">
Both first and second class are applied.
</div>
</body>
</html>

User avatar
Jack
Site Admin
Posts: 3472
Joined: Fri Feb 18, 2005 12:05 am

Postby Jack » Tue Oct 18, 2005 6:28 am

Thanks gtanuel. I don't before css can be applied this way :) I will add it in next build.

gtanuel
Posts: 21
Joined: Wed Sep 14, 2005 12:47 am

Postby gtanuel » Mon Oct 24, 2005 1:16 am

Hey, thanks for implementing these features :D

Spotted 1 bug, though:
For those individual Channel's display style settings, the %MEDIA% is not substituted, i.e. channels whose Display Style is not set as "<use global style>"

Secondly, I noticed that you didn't apply the same substitution string between *.css and buildin_style.tpl, i.e. in buildin_style.tpl it seems to be the full URI (file://...) where in *.css it's just the Windows path naming. Haven't seen the implication yet since I'm not using any space in the folder names.

Lastly, I'm very pleased to see you implement the "gn_unreaditem" class :D Great! But, if I'm not asking too much, can you apply it inside <div class="gn_stories"> or <div class="gn_story"> instead of inside <div class="gn_storytitle"> ? I'm thinking to color the whole box differently for those unread items. By putting it in the "gn_stories" or "gn_story" classes, I can achieve either ways:
  • If I want to differentiate ONLY the story title:

    Code: Select all

    div.gn_unreaditem div.gn_storytitle {
       font-weight: bold;
    }
  • If I want to differentiate the whole box:

    Code: Select all

    div.gn_unreaditem {
       background-color: #ffc;
    }

You get the idea.. :)

martynp
Posts: 5
Joined: Wed Oct 12, 2005 11:31 am

Help For The Novices

Postby martynp » Mon Oct 24, 2005 7:26 am

Hi Guys,

All of the above sounds excellent. However, although I have played around with the .css file to create my own style I don't really understand all of the above. Could you post some examples for us less css aware greatnews lovers?

We can then download and play around to create a personal style.

Many Thanks,

Martyn

User avatar
Jack
Site Admin
Posts: 3472
Joined: Fri Feb 18, 2005 12:05 am

Postby Jack » Mon Oct 24, 2005 9:42 pm

gtanuel: I change the code in build 340 so now gn_unreaditem is set at out most item <div> as you suggested. Thanks! :) I removed "file://" from the %MEDIA% tag, so you need to add "file://" into your style - just in case we need to use the %MEDIA% directory for something else in the future.

Martyn: gtanuel is teaching me how to use the css selector.


Return to “Suggestions & Bug Reports”

Who is online

Users browsing this forum: No registered users and 2 guests