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

XenPorta Styling

Discussion in 'Styling and Customization Questions' started by Liam23, Jul 10, 2012.

  1. Liam23

    Liam23 Active Member

    Hey guys, I want to know how I can change the default look of xenporta's recentnews block to look like this one here
    I'm not asking for the images/colors just the layout of the title and date, as well as a way to add an image for the background of the title area.
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    From Chrome's element inspector, this section:

    Screen shot 2012-07-12 at 6.43.07 PM.png

    Corresponds with this HTML:

    Code:
            <div id="subHeading">
              <div id="banner">
                <a href="threads/bfo-gets-hands-on-with-ravaged.6756/"></a>
                <div id="layer"></div>
                
                
                
              </div>
              <div id="title_block">
                <h1><a href="threads/bfo-gets-hands-on-with-ravaged.6756/"><span>BFO Get's Hands on with Ravaged!</span></a></h1>
                <div id="comments"><span></span><a href="threads/bfo-gets-hands-on-with-ravaged.6756/unread#comments">6</a></div>
              </div>
            </div>
    
    With this CSS for the image and stuff:

    Code:
    #banner { width:100%; height:135px; background:url(styles/bfo2/xenforo/portal/default_banner.jpg) #000 no-repeat; position:relative; overflow:hidden; }
    #banner img { position:absolute; width:100%; top:0; left:0; z-index:1; }
    #banner #layer { background:url(styles/bfo2/xenforo/portal/banner_layer.png); position:relative; width:100%; height:100%; z-index:10; }
    #banner a { position:absolute; display:block; left:0; top:0; width:100%; height:86px; z-index:11; }
    
    .node-87 #banner, .node-88 #banner { width:100%; height:135px; background:url(styles/bfo2/xenforo/portal/drmbhome_default_banner.jpg) #000 no-repeat; position:relative; overflow:hidden; }
    .node-87 #banner #layer, .node-88 #banner #layer { background:url(styles/bfo2/xenforo/portal/drmbhome_banner_layer.png); position:relative; width:100%; height:100%; z-index:10; }
    /** PTFO **/
    .node-120 #banner { width:100%; height:135px; background:url(styles/bfo2/xenforo/PTFO/ptfo-default-banner.png) #000 no-repeat; position:relative; overflow:hidden; }
    .node-120 #banner #layer { background:url(styles/bfo2/xenforo/PTFO/ptfo-layer.png); position:relative; width:100%; height:100%; z-index:10; }
    
    #title_block { font-family:'Bebas',Tahoma; width:100%; min-height:48px; position:absolute; left:0; bottom:0; z-index:100; background:url(styles/bfo2/xenforo/portal/titleblock_bg.png); }
    #title_block h1 { line-height:34px; float:left; margin:0; padding:0; width:674px; font-size:32px; }
    #title_block h1 a { color:#fff; text-decoration:none; font-weight:normal; text-transform:uppercase; width:100%px; display:block; height:100%; padding:8px 15px 6px; }
    #title_block h1 a:hover { background:#000; color:#ededed; }
    
    The relevant template should be:

    Admin CP -> Appearance -> Templates -> EWRblock_RecentNews

    And the CSS can be placed in:

    Admin CP -> Appearance -> Templates -> EXTRA.css
     
    TeQuiLa, Liam23 and Shelley like this.
  3. Liam23

    Liam23 Active Member

    This is the code in EWRblock_RecentNews, What do I need to replace/add?
    Code:
    <xen:require css="message_user_info.css" />
    <xen:require css="bb_code.css" />
    <xen:require css="EWRblock_RecentNews.css" />
     
    <div id="recentNews">
        <xen:foreach loop="$RecentNews" value="$news">
            <div class="section sectionMain recentNews" id="{$news.thread_id}">
     
                <div class="primaryContent {xen:if {$option.leftdate}, 'leftDate'}">
                    <div class="subHeading">
                        <div style="float: right; white-space: nowrap;">
                            <a href="{xen:link threads, $news}"><xen:datetime time="$news.promote_date" /></a>
                            <xen:if is="{$visitor.permissions.EWRporta.canPromote}">
                                &nbsp; (<a href="{xen:link 'threads/edit', $news}" class="OverlayTrigger">{xen:phrase edit}</a>)
                            </xen:if>
                        </div>
     
                        <a href="{xen:link threads, $news}" class="newsTitle">{xen:helper threadPrefix, $news}{$news.title}</a>
                    </div>
     
                    <div class="newsDate secondaryContent">
                        <div class="newsMonth heading">{$news.month}</div>
                        <div class="newsDay">{$news.day}</div>
                    </div>
     
                    <xen:if is="{$news.promote_icon} != 'disabled'">
                    <xen:if hascontent="true">
                        <div class="messageUserBlock">
                            <div class="avatarHolder">
                                <xen:contentcheck>
                                <xen:if is="{$news.attach}">
                                    <a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a>
                                <xen:elseif is="{$news.medio}" />
                                    <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
                                        <a href="{xen:link 'full:media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" /></a>
                                    </div>
                                <xen:elseif is="{$news.image}" />
                                    <a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}" style="max-height: 150px; max-width: 150px;" /></a>
                                <xen:else />
                                    <xen:avatar user="$news" size="m" itemprop="photo" />
                                </xen:if>
                                </xen:contentcheck>
                            </div>
                        </div>
                    </xen:if>
                    </xen:if>
     
                    <div class="messageContent baseHtml">
                        <div class="postedBy">
                            <span class="posted iconKey"><div class="sticky"></div>{xen:phrase by_x_at_y,
                                'user=<a href="{xen:link members, $news}" class="username">{$news.username}</a>',
                                'date=<a href="{xen:link threads, $news}">{xen:time $news.post_date, 'absolute'}</a>'}</span>
                            <span class="views">({xen:number $news.view_count} {xen:phrase views} / {xen:number $news.first_post_likes} {xen:phrase likes})</span>
                            <span class="comments iconKey"><div class="new"></div><a href="{xen:link threads/unread, $news}">{xen:number $news.reply_count} {xen:phrase comments}</a></span>
                        </div>
     
                        <div class="newsText">{xen:raw $news.messageHtml}</div>
                        <div class="clearFix"></div>
                    </div>
     
                    <div class="sectionFooter">
                        <xen:if is="{$option.social}">
                            <xen:if hascontent="true">
                                <div class="sharePage">
                                    <xen:require css="share_page.css" />
     
                                    <xen:contentcheck>
                                        <xen:if is="{$xenOptions.tweet.enabled}">
                                            <div class="tweet shareControl">
                                                <a href="http://twitter.com/share" class="twitter-share-button"
                                                    data-count="horizontal"
                                                    data-lang="{xen:helper twitterLang, $visitorLanguage.language_code}"
                                                    data-url="{xen:link canonical:threads, $news}"
                                                    {xen:if {$news.title}, 'data-text="{$news.title}"'}
                                                    {xen:if {$xenOptions.tweet.via}, 'data-via="{$xenOptions.tweet.via}"'}
                                                    {xen:if {$xenOptions.tweet.related}, 'data-related="{$xenOptions.tweet.related}"'}>{xen:phrase tweet}</a>
                                            </div>
                                        </xen:if>
                                        <xen:if is="{$xenOptions.plusone}">
                                            <div class="plusone shareControl">
                                                <div class="g-plusone" data-size="medium" data-count="true" data-href="{xen:link canonical:threads, $news}" data-lang="{$visitorLanguage.language_code}"></div>
                                            </div>
                                        </xen:if>
                                        <xen:if is="{$xenOptions.facebookLike}">
                                            <div class="facebookLike shareControl">
                                                <xen:container var="$facebookSdk">1</xen:container>
                                                <fb:like href="{xen:link canonical:threads, $news}" layout="button_count" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
                                            </div>
                                        </xen:if>
                                    </xen:contentcheck>
                                </div>
                            </xen:if>
                        <xen:else />
                            <div class="source">
                                {xen:phrase discussion_in_x_started_by_y_date_z, 'forum=<a href="{xen:link forums, $news}">{$news.node_title}</a>', 'name=<a href="{xen:link members, $news}" class="username">{$news.username}</a>', 'date=<a href="{xen:link threads, $news}">{xen:datetime $news.post_date, html}</a>'}
                            </div>
                        </xen:if>
     
                        <div class="continue">
                            <a class="iconKey" href="{xen:link threads, $news}">
                                <div class="redirect"></div>
                                {xen:phrase continue_reading}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </xen:foreach>
     
        <xen:if hascontent="true">
        <div class="section sectionMain">
            <xen:contentcheck>
            <xen:if is="{$option.pagenav} && {$option.count} > {$option.limit}">
                <xen:if is="{$category}">
                    <xen:pagenav link="articles" linkdata="{$category}" page="{$page}" perpage="{$option.limit}" total="{$option.count}" />
                <xen:else />
                    <xen:pagenav link="portal" page="{$page}" perpage="{$option.limit}" total="{$option.count}" />
                </xen:if>
            </xen:if>
            </xen:contentcheck>
        </div>
        </xen:if>
    </div>
     
  4. Sway

    Sway Active Member

    I would love to do this as well, Would anyone mind creating a tutorial for this?
     
    Liam23 likes this.
  5. Liam23

    Liam23 Active Member

  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I don't have their template code. But you can see the "subHeading" part in your template. That is the section you need to change. Use their HTML code in that section of your template while preserving the variables and xen:link code and stuff that you see in the template. Then apply the CSS that I isolated to your EXTRA.css template.
     
    Liam23 likes this.
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    This is reverse engineering the template based on the rendered HTML. Or maybe the owner of http://battlefieldo.com/ will give you their template code if you ask them.
     
  8. Liam23

    Liam23 Active Member

    Could you find out the owner for me? :p
    Via XF Mod perms?
     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  10. Liam23

    Liam23 Active Member

Share This Page