Topic Prefix style that rocks!

[Snowhog Senior Member Find all posts View Profile Close Snowhog]

Not sure how to phrase the question, so a picture instead.



Basically, can CSS change the look of selective content in a Notice so that the selective content appears the same as the identified Prefix?

[glennrocksvb Founder/Coder Find all posts View Profile Close glennrocksvb]

You can use the same HTML (as mentioned in Step 1 in the first post) you use for the prefix to the Notices but with a slight change.

<span class="js-topic-prefix"><!-- Insert your Prefix HTML here --></span>

Snowhog

Senior Member

Find all posts

View Profile

Close

Snowhog, in your case it would be like this:

<span class="js-topic-prefix"><span class="prefix-next_release_discuss" title="Next Release Discussion">NRD</span></span>

[Snowhog Senior Member Find all posts View Profile Close Snowhog]

Something isn't right when I apply this 'in total'.

This is what I replaced the existing Notice with:

The following Topic Prefixes are designated for use in Community Cafe:
<br>
<span class="js-topic-prefix"><span class="prefix-distribution_showdown" title="Distribution Showdown">DS</span></span> (Distribution Showdown)
<span class="js-topic-prefix"><span class="prefix-geek_news" title="Geek News">GN</span></span> (Geek News)
<span class="js-topic-prefix"><span class="prefix-kubuntu_or_linux_discuss" title="Kubuntu or Linux Discussion">KLD</span></span> (Kubuntu or Linux Discussion)
<span class="js-topic-prefix"><span class="prefix-the_water_cooler" title="The Water Cooler">TWC</span></span> (The Water Cooler)
<span class="js-topic-prefix"><span class="prefix-kubuntu_user_testimony" title="Kubuntu User Testimony">KUT</span></span> (Kubuntu User Testimony)
<span class="js-topic-prefix"><span class="prefix-next_release_discuss" title="Next Release Discussion">NRD</span></span> (Next Release Discussion)
<br>
While use is not required, doing so allows for efficient Filtering.

And this is how the Notice displays:


With just a single modified line; the one for NRD; this is how the Notice displays:



What is incorrect with the code above?

[Snowhog Senior Member Find all posts View Profile Close Snowhog]

Doh!!! :slap_myself:

Never mind! I know exactly why it is displaying this way. I've only included those three in the code in css_additional.css. Haven't added the other three yet.

Geez. What a doofus I am!

[glennrocksvb]

Glad you figured it out yourself.

[Snowhog Senior Member Find all posts View Profile Close Snowhog]

Fixed. The result:

[Snowhog Senior Member Find all posts View Profile Close Snowhog]

[Snowhog Senior Member Find all posts View Profile Close Snowhog]

I've already adjusted the size of the colored background. Changed to padding: 0px; in

.post-action-wrapper [class^="prefix-"] {
padding: 0px;
font-size: 11px;
font-weight: bold;
border-radius: 3px;
position: relative;
bottom: 2px;
text-transform: uppercase;
white-space: nowrap;
}

What controls the position? The Prefix's horizontal 'center' is slightly above the horizontal 'center line' of the other text, i.e., the bottoms of the text in the Prefix's is higher than the non-prefix text. I'd like to 'lower' the Prefix's so they are the same. It's a visual thing, and I'm a visual person.

[glennrocksvb]

Adjust the bottom property. It can also be a negative value.

[glennrocksvb]

Right-click and Inspect the element then adjust the bottom property value there so you know the final value to use before updating css_additional template.

[Snowhog Senior Member Find all posts View Profile Close Snowhog]

Excellent. Setting it to 0px gives me the horizontal centering I want. Thank you.