HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Sharing (is caring) ...

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#67964 (In Topic #14470)
Avatar

Community saint

I was so 'tickled' that I cracked this at the first attempt that I thought I'd 'share'.

And when I say "cracked at the first attempt", it isn't strictly true, as I spent many fruitless minutes investigating the ability of CSS3 to display 'multiple background images' in all the latest browser versions. Without much success! Especially when trying to apply those properties to a complex cocktail of templates used by ocPortal.

  • The Mission: Tweak the forum display
  • The Aim: Add an arrow graphic to the category description line (which is textual)
  • Nice To Have: Get the graphic to 'appear' to cross the line into the lower area (the bottom border)

As stated previously, attempts to 'add' a second background image (I already have one filling the space) were not quite successful, even when enclosing the second graphic in its own 'div'. Firebug wasn't too helpful, only giving the CSS properties for that particular element. But it did give a clue as to what to search for. A full search for the term {CATEGORY_DESCRIPTION} threw up a few results, one of them being OCF_FORUM_CATEGORY.tpl.

So, I gave it a try, not expecting too much in the way of a result. Surprise, surprise, the little tweak gave the result I was after - and then some! The arrow graphic actually CROSSED the line, and all because I'd inserted an in-line style and positioned it as 'absolute'!



That is the result I wanted, and here is what I tweaked in themes/(your custom theme)/templates/OCF_FORUM_CATEGORY.tpl, lines 7 to 12:

Find …

Code

{+START,FRACTIONAL_EDITABLE,{CATEGORY_TITLE},title,_SEARCH:admin_ocf_categories:type=__ed:id={CATEGORY_ID}}{CATEGORY_TITLE*}{+END}
   </div>
   {+START,IF_NON_EMPTY,{CATEGORY_DESCRIPTION}}
      <div class="ocf_forum_category_description solidborder">
         {CATEGORY_DESCRIPTION*}
      </div>
change to …

Code

{+START,FRACTIONAL_EDITABLE,{CATEGORY_TITLE},title,_SEARCH:admin_ocf_categories:type=__ed:id={CATEGORY_ID}}{CATEGORY_TITLE*}{+END}
   </div>
   {+START,IF_NON_EMPTY,{CATEGORY_DESCRIPTION}}
      <div class="ocf_forum_category_description solidborder">
         {CATEGORY_DESCRIPTION*}<img src="{$BASE_URL}/images/3d-blu-arrow.png" style="position:absolute;">&nbsp;
      </div>

Hope you can make use of this tip, perhaps in areas you hadn't thought about before now …

 :thumbs:



P.S. In case you are wondering, I always add an 'images' folder to my BASE_URL to hold all non-ocPortal images. This stops the upgrader complaining bitterly that there are many 'alien' files that should be removed!

 :ninja:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#67965
Avatar

Community saint

Very stylish result!:cool:
Love it!

Thanks for sharing this great tip Fletch.:thumbs:
I'm sure I will find good use for it.

Jean
Back to the top
 
Posted
Rating:
#67975
Avatar

Community saint

Very cool, thanks Fletch.
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: