XenPorta Styling

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.
 
Sort by date Sort by votes
From Chrome's element inspector, this section:

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

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
 
Upvote 0 Downvote
Jake Bunce said:
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
Click to expand...
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>
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

JesseUCAVedYou
  • Question Question
XF 2.1 Where to edit user info on thread view?
Replies
1
Views
177
JesseUCAVedYou
JesseUCAVedYou
Seeker-Smith
  • Question Question
XF 2.2 Thread title preview category view
Replies
1
Views
159
Seeker-Smith
Seeker-Smith
M
  • Solved
Image Attachments Display
Replies
1
Views
419
AndyB
AndyB
M
Style XFRM - Limit Resource Download - Custom Block Styling
Replies
0
Views
388
mrdoitnyce
M
R
  • Question Question
XF 2.2 Change the colors of the icons in the header on the phone
Replies
5
Views
641
RomainBrn
R
Top Bottom