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

XenPorta Styling

Liam23

Active member
#1
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.
 

Jake Bunce

XenForo moderator
Staff member
#2
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
 

Liam23

Active member
#3
From Chrome's element inspector, this section:

View attachment 31478

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>
The relevant template should be:

Admin CP -> Appearance -> Templates -> EWRblock_RecentNews
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>
 

Jake Bunce

XenForo moderator
Staff member
#6
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.