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

How to apply styling from forum to portal page

#1
Hi

Is there a way to apply the styling used in the main forum to the portal front page ?

I'm wanting the headers to be a block like on the forum node titles and the text to match colour and font wise for that and the rest of the page

Many thanks

This is how I want it to look

Screen shot 2012-01-31 at 19.42.28.png

This is how it looks now with my basic html coding

Screen shot 2012-01-31 at 19.42.18.png


I've coded the block like below

Code:
<xen:include template="Front_Page_Middle">
 
</xen:include>
And the template like so

Code:
<div class="sectionMain">
<font size="4"><b>Qualification Programme</b></font>
<br>
<br>
<p align="justify"><font size="2">IPPN's main goal is to continually challenge members to improve and develop skills in their chosen field of photography. The two main areas to focus on this are:</p>
<br>
<p align="justify"><b>Monthly Image Awards</b><br>
The Monthly Image Awards competition, which provides a written critique of each image submitted along with a score and award (if applicable), proves very popular with our membership.
<br>
<br>
<p align="justify"><b>Qualification Programme</b><br>
The IPPN Qualification Programme is one that challenges members to continually improve their photographic skills via a progression through three levels of certification.
<br><br><br>
<b>Through our Monthly Image Awards and IPPN Qualification Programme we strongly encourage and support our members while they concentrate on their own personal development.</b>
</p>
<br>
 
<p align="center"><img  src="http://www.ippn.co.uk/ippnlogos/frontqual.png" alt="Professional Photographers Forum" />
</div>
The forum page can be found at http://www.ippn.co.uk and any help would be appreciated

Thanks

Simon
 

Jake Bunce

XenForo moderator
Staff member
#2
Try this:

Admin CP -> Appearance -> Templates -> EXTRA.css

Add this code:

Code:
.EWRporta_Portal .categoryStrip
{
	@subHeading
	@categoryStrip
}
Then edit the template for your content blocks and apply a div like so:

Code:
<div class="categoryStrip">Qualification Programme</div>
That should result in something like this:

Screen shot 2012-02-01 at 8.29.05 PM.png
 

Jake Bunce

XenForo moderator
Staff member
#4
I don't see the CSS definition in your source. Make sure you added this to EXTRA.css:

Code:
.EWRporta_Portal .categoryStrip
{
	@subHeading
	@categoryStrip
}
 
#5
I don't see the CSS definition in your source. Make sure you added this to EXTRA.css:
Thank You ... I don't know what I've been doing for days but have been trying this and wonder if for some reason it wasn't sticking in the Extra.css

Mind you if you saw the amount of css I was copying and pasting :)

Again many many thanks - that is waht makes this a great community ! people don't mind helping idiots !