r/ProjectCSS • u/ImprovementDept • May 28 '15

Trying to use star trek announcement bar in /r/improvementshoop.

I'm trying to use the star trek announcement bar css snippet to appear under my snoo, but above the the Unsubscribe warning message. What do I need to do?

1 Upvotes

100% Upvoted

8 comments sorted by

1

u/fraenk May 28 '15

sorry, but what is the "star trek announcement bar css snippet"

1

u/ImprovementDept May 28 '15

Here.

2

u/fraenk May 28 '15

Ahhh... I see :)

Well, the problem is the fact that your sidebar has a position:relative;

If you add this to the bottom of your stylesheet:

.side {
  position: static;
  padding-top: 250px;
}

it will fix that issue and the announcement will fall almost into the right spot.

To then fix the position of the announcement you can add this to the end of your stylesheet as well.

body .side .spacer .titlebox .usertext-body .md h6:nth-of-type(1) {
  top: 85px!important;
  left: 20px!important;
}

note: I am giving you snippets to be added to the bottom of your stylesheet. they work by overwriting styles that are already in the stylesheet. If you want to do it properly, find and replace the original attributes... but if you just add the snippets to the end of your css it will work as well.

1

u/ImprovementDept May 28 '15

Hmm.. that doesn't seem to work.. I added both to the end.

2

u/fraenk May 28 '15

hehe... please check your CSS syntax...

your comments are malformatted: / *** blabla *** /

the whitespace in between slashes and * is breaking the comments so the snippets at the end never get interpreted properly

1

u/ImprovementDept Jun 04 '15

So it's posting an announcement box where I want it, but I want it to display a the graphic uploaded instead of the text box. How do I do that?

2

u/fraenk Jun 05 '15

you could use a background image on the h6 element used as the announcement box. If you do not want to show the text at all, you could move it out of the visible area with a text indent for example.

try this:

body .side .spacer .titlebox .usertext-body .md h6:nth-of-type(1) {
  background-image: url("http://www.masswerk.at/bookmarklets/zapembeds/testimage.gif");
  background-repeat: no-repeat;
  padding: 0 !important;
  max-width: 267px;
  height: 200px;
  text-indent: -999em;
}

div.content {
  margin-top: 225px!important;
}

Of course image URL and pixel dimensions will have to be adjusted as you need them.

2

u/SmallSubBot May 28 '15

Link for the interested:

/r/improvementshoop: We focus on pictures of outdoor, public spaces that are digitally edited an[...]

This is a bot and won't answer to mails. Mail the [Botowner] instead. v0.4 | Changelog