Create Banner on Top


(Rendra Pranadipa) #1

Hi all

i want to ask some question, how can i create banner like https://community.smartthings.com/. the banner just show on front page, but when enter the topic, the banner dismissed automatic.
may anyone can help me to solve this. Thank :+1:


(Pad Pors) #2

you can create a topic, then use this icon in the topic and pin it globally as a banner, and then use an html line to hide it in the topic pages:

div.regular #banner { display: none; }


(Rendra Pranadipa) #3

Thanks to @Pad_Pors replay, but I have a little confused about the “Pin global Topic” or “Banner topic” Which do I choose?


(Pad Pors) #4

it’s the banner topic that is shown like a banner on the top of the pages, pin global topic will only put the post in the top of the list, something like the welcome message of the discourse forum.

so choose banner topic.


(Rendra Pranadipa) #5

thank @Pad_Pors now i can create banner pin topic, but the banner is still visible when I went into one of the categories, I have to use the code you give, div.regular #banner {display: none; }, This code I put on the “customize> CSS” is located right?


(Pad Pors) #6

yes, you should put it in the customize -> css,

i don’t know how to remove something from category page, perhaps some one else from the folk can help. the line only remove the banner from topic-page.

@cpradio sorry to mention you , but i think you are the one who may be able to answer this?


(Mittineague) #7

The Category list pages have body tags like

<body class="docked category-support">

you may be able to use something like this
(not tested)

body[class*="category-"] div.regular #banner { 
  display: none;
}

[attr*=value]
Represents an element with an attribute name of attr and whose value contains at least one occurrence of string “value” as substring.


(cpradio) #8

@Mittineague beat me to it, but yes, you have to use a class partial selector on the body take looking for category- :slight_smile:


(Rendra Pranadipa) #9

Thank you for the answer @Mittineague, i have try a code that you say, but my banner still there in every menu, I just need a banner appeared on the compound category only, not on another page, just like SmartThings Community https://community.smartthings.com/.
apologize about my question.


(James Cook) #10

Surely the nicest option would be to add the extra markup in the customizations rather than messing around with pinning a topic? Or have I misunderstood what the OP was asking for?


(Rendra Pranadipa) #11

HI @jamesmarkcook thank you for your attention :slight_smile:, now i create the banner from custom CSS, you can see it on my website http://www.dictio.id/. i was successfully create my banner, but the banner always show on top, i mean is a banner just showing on the “Category” menu. just like SmartThings website.


(James Cook) #12

@Rendradipa you need to target the html markup you’ve created specifically when you are not on the front page. In order to do this you need to give your div which contains your banner a class name or id in order to target it.

At the moment you just have:

<div style="floating:left;">

For starters, floating is an incorrect style attribute, it should be float. Secondly though, you really shouldn’t need to use inline styling (style=) in order to style your markup. I suggest something like:

<div id="homepage-banner">

Then, in your CSS you can target it like so:

body[class*="category-"] #homepage-banner {
    display: none;
}

What this says is whenever the body tag has a classname with the substring of ‘category-’, don’t display the homepage banner. So for example the body tag might look like this when you are in your first category:

<body class="category-mind-n-brain">

The body tag will look similar to this on all your category pages. However, the body tag will have the substring categories on the front page. See the difference? It’s this difference we are targeting.

The reason we are using the body tag here to style your banner is because Discourse changes the class names on the body tag depending on which page you are on. That’s what makes hiding your banner on certain pages possible.


(James Cook) #13

I should add that I successfully had this working on your site just by implementing what I explained above.


(Rendra Pranadipa) #14

Hi @jamesmarkcook first i want to say thank you so much for helping me, i have implement what you describe, this is my custm Top : <div id="#homepage-banner">
and this is my custm CSS:
`@import url(http://fonts.googleapis.com/css?family=Pontano+Sans);
body[class=“category-mind-n-brain”] #homepage-banner {
display: none;
font-family: “Pontano Sans”;

}` I have targeted if i in category main-n-brain, but the banner is still shown, and why tag `` make some error like this? but if the tag body not active, no error anymore. what's make the error?

(James Cook) #15

@Rendradipa I suggest you re read my post carefully.


(Pad Pors) #16

I couldn’t find any attribute selector or class name specific for tag pages, is there any?


(Pad Pors) #17

using the banner class and adding these two lines may help to remove banner from category page as well as each category pages:

body[class*="category-"] #banner {
    display: none;
}

body[class*="categories-list"] #banner {
    display: none;
}

(James Cook) #18

@Rendradipa

Do this:

HTML

<div id="#homepage-banner"> 

Then this:

CSS

body[class*="category-"] #homepage-banner {
    display: none;
}

That’s it.


(Rendra Pranadipa) #19

Hi @jamesmarkcook, i have do what you suggested, but my banner still shown on every page
I include an image about code

CSS

HTML


(Mittineague) #20

The hash - “#” - is CSS for “id”.

It should not be in the div tags id value.

Try

<div id="homepage-banner">