1. 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

Discussion in 'Styling and Customization Questions' started by Simon R, Jan 31, 2012.

  1. Simon R

    Simon R Member

    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
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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
     
    erich37 likes this.
  3. Simon R

    Simon R Member

    Thanks Jake ....

    I'm not getting the colour

    Screen shot 2012-02-02 at 07.04.13.png
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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. Simon R

    Simon R Member

    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 !
     
    erich37 likes this.

Share This Page