1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How To achieve this 'Call To Action' Image

Discussion in 'Styling and Customization Questions' started by vij, Jun 13, 2012.

  1. vij

    vij Active Member

    Hey guys

    I am sure you guys will nail this question -

    How can I get the "image" thingy(call to action block) just above the forum categories as seen in http://www.entropiaplanets.com/forums/forum/


    Appreciate your help.
     
  2. Coop1979

    Coop1979 Well-Known Member

    Looks like they are just using the Notices feature.
     
  3. vij

    vij Active Member

    Its not just an image, there is an overlay.
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I recreated his notice by looking at his source code. Here are instructions:

    Admin CP -> Home -> List Notices -> Create New Notice

    Use this for the Message:

    Code:
    <style type="text/css">
    .noticeButtonContainer
    {width: 190px;
    padding: 10px;}
     
    .csgoIntro
    {background: url(rgba.php?r=0&g=0&b=0&a=153); background: rgba(0,0,0, 0.6); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
    color: #ffffff !important;
    font-size: 12px !important;
    text-align: center!important;}
     
    .csgoIntro a
    {color: #ffffff !important;
    font-weight: bold;}
     
    .csgoIntro h4
    {color: #ffffff !important;
    font-size: 12px;
    font-weight: bold;}
     
    .csgoMember
    {font-size: 9px;
    font-weight: bold;}
     
    .csgoMember a
    {color: #ffffff !important;}
    </style>
    
    <center>
    <img src="http://www.entropiaplanets.com/forums/styles/EPnew/login.gif" style="display:block; width:840px;"  title="" />
    </center>
    
    <div class="csgoIntro" style="position:absolute; top:0; left:0; height:262px; width:350px;">
        <div style="padding-left: 25px; padding-right: 25px; padding-top:10px;">
            <h4>Welcome to EntropiaPlanets!</h4>
                <p>You appear to be browsing EntropiaPlanets.com as a guest user. Did you know that if you sign up with an account, you get access to all kinds of additional priviledges, and are then able to join the discussions? You will also no longer see most advertisements on the forum, and be able to tap into the full suite of tools and information that EntropiaPlanets has to offer.</p>
    <br />
            <center><div class="noticeButtonContainer">
                <label for="LoginControl" id="SignupButton"><a href="http://www.entropiaplanets.com/login" class="inner"><b>Sign Up Now!</b></a></label>
            </div></center>
            <div class="csgoMember">Already a member? <a href="http://www.entropiaplanets.com/login/">Login Now!</a></div>
        </div>
    </div>
    
    This contains his HTML and CSS which you can modify to change the styling if you wish. I have highlighted the background image and width in red. You need to specify a URL for your own background image, and you might need to adjust the width to fit. I also highlighted two login URLs which you will want to change.

    He also has the following options set for his notice:

    Screen shot 2012-06-13 at 10.59.59 PM.png

    It is worth noting that his forum width is 1150px which complements the width of his notice. That is another width you may wish to adjust:

    Admin CP -> Appearance -> Style Properties -> General -> Page Width Controller

    Screen shot 2012-06-13 at 10.55.10 PM.png

    The end result looks like his notice:

    Screen shot 2012-06-13 at 11.03.02 PM.png
     
  5. Steve F

    Steve F Well-Known Member

  6. jayramfootball

    jayramfootball Active Member

    This is great, just finished updating my notices(y)

    Smaller notices when logged in...

    imagereg.png

    Larger when not logged in...

    imageunreg.png

    Very cool that if you use a very wide image it reveals more as the page is expanded in dynamic/fluid styles:D
     
    Last edited: Aug 13, 2013
    Steve F likes this.
  7. tommydamic68

    tommydamic68 Well-Known Member

    @Jake Bunce - any way to make this show just on the home page?
     
  8. Jeremy

    Jeremy XenForo Moderator Staff Member

    Set the notice criteria appropriately.
     
  9. Steve F

    Steve F Well-Known Member

    Under Page Criteria for the notice put forum_list

    If your using xenporta put portal, I think

    Edit: Its EWRporta_Portal as @Martok says below
     
    Last edited: Oct 19, 2013
  10. Martok

    Martok Well-Known Member

    For XenPorta it's EWRporta_Portal
     
    Steve F likes this.
  11. Tracy Perry

    Tracy Perry Well-Known Member

    Or Controller and Action is
    EWRporta_ControllerPublic_Portal :: Index
     
  12. tommydamic68

    tommydamic68 Well-Known Member

    I am not using xenporta.
     
  13. tommydamic68

    tommydamic68 Well-Known Member

    And for forum home only?
     
  14. Steve F

    Steve F Well-Known Member

    I answered that in my post.
     
  15. tommydamic68

    tommydamic68 Well-Known Member

    Sorry, missed that @Steve F - thanks! worked!
     
  16. tommydamic68

    tommydamic68 Well-Known Member

    Anyway to make it look "better" on mobile?
     
  17. Steve F

    Steve F Well-Known Member

    Only way would maybe adding a class to your image in the notice and use CSS in media queries.
     
  18. tommydamic68

    tommydamic68 Well-Known Member

    What exactly do I need to do?
     
  19. tommydamic68

    tommydamic68 Well-Known Member

    Also, I need to "center" the Message, Share and Search text. I must use the <p align="left"> to make the 3 align up properly, how do I center the text?
    Code:
    <font size="5">Welcome to Sphynxlair!</font><br />
            <font size="3">Connect with sphynx owners & enthusiasts around the world!</font><br /><br />
                <p align="left"><font size="4">Message</font> - Chat and message with other sphynx owners.<br /><font size="4">Share</font> - Share information, photos and video with the community.<br /><font size="4">Search</font> - Search for FREE information about the sphynx cat.</p>
    <br />
    Screen Shot 2013-10-20 at 9.43.53 AM.png
     
  20. Tracy Perry

    Tracy Perry Well-Known Member

    tommydamic68 likes this.

Share This Page