Welcome Box with Custom CSS and HTML to Notice

[hemant_bhardwaj]

hemant_bhardwaj submitted a new resource:

Custom CSS to Notice Welcome Box - welcome box without any template modification

Simple combo of Html and css to make a welcome box in any theme With Xenforo Notice

Set view permission TO guest

<style>
.p-body-inner .notice{  background: #226ea5;
    color: white;
    }
</style><div class="media__container" style="text-align: center;padding: 12px 0px;">
                        <div class="media__body">
                            <div class="welcomeSection__title"  style="font-weight:bold; font-size: 19px;">Welcome to our new global Forum!</div>...

Read more about this resource...

 

[tommydamic68]

hemant_bhardwaj submitted a new resource:

Custom CSS to Notice Welcome Box - welcome box without any template modification



Read more about this resource...

Demo or screen shot?

 

[hemant_bhardwaj]

Demo or screen shot?

screenshot added

 

[BassMan]

At least remove classes from @ThemeHouse welcome section plugin if you're copying their code...

 

[bzcomputers]

At least remove classes from @ThemeHouse welcome section plugin if you're copying their code...

Probably should also remove reference to .notice class also, or else you'll be altering the styling of all notices showing on the page.

 

[hemant_bhardwaj]

At least remove classes from @ThemeHouse welcome section plugin if you're copying their code...

Yeah it can be I just make a quick post so I didn't like to change any thing in it. But I have mentioned now in post and classes is removed

 

[hemant_bhardwaj]

Probably should also remove reference to .notice class also, or else you'll be altering the styling of all notices showing on the page.

This code below is cleaner and will work better...

<div style="text-align:center;padding:12px;background:#226ea5;color:white;">
  <div>
    <div style="font-weight:bold;font-size:26px;">Welcome to our new global Forum!</div>
    <div style="margin-top:10px;">Help us kick-start our community...Welcome box idea and code courtesy of <a style="color:#00ff3f" href='https://www.themehouse.com/'>ThemeHouse</a></div>
    <a href="/register/" style="margin-top:10px;" class="button button--cta" data-xf-click="overlay" data-follow-redirects="on"><span class="button-text">Sign up</span></a>
    <a href="/login/" style="margin-top:10px;" class="button button--cta" data-xf-click="overlay" data-follow-redirects="on"><span class="button-text">Log in</span></a>
  </div>
</div>

well i don't think this is the solution of background because it's still have padding of the notice-content class that look weird to me
so for that i am using the attribute targeting by notice ID, so with that it will not effect the other notice
[data-notice-id="1"] .notice-content{ background: #226ea5; color: white; }

 

[Ozzy47]

Did you get their permission to reuse their code and post it?

 

[hemant_bhardwaj]

i think is better to remove it
but still it's just html modification that i do in client site so. so i just posted it here for everyone. but i think i should come up with my own
This resource has been removed and is no longer available.

 

[BassMan]

but i think i should come up with my own

Yes?

 

[Ozzy47]

but i think i should come up with my own

Yes, that would have been the proper thing to do.

 

[BassMan]

Yes, that would have been the proper thing to do.

Before publishing...