Welcome Box with Custom CSS and HTML to Notice

Welcome Box with Custom CSS and HTML to Notice

hemant_bhardwaj

Well-known member
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 :)

HTML:
<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...
 
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...
Code:
<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; }
 
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.
 
Last edited:
Back
Top Bottom