Round Corners on Front Page

[latratra]

Link to my site: http://htreplays.com/smf
SMF version: 1.1.10
TP version: 1.0 Beta 4
Theme name and version:Heavily Modified Reference Theme
Browser Name and Version: Google Chrome
Mods installed: None
Related Error messages: None

Hello!
On the front page of my tiny portal I have recent posts from a particular category.  I use these for news updates.  Does anyone know how I would go about adding rounded corners to the title of these news updates?  To clarify:  I'm trying to get the blue two-tone bars to have rounded edges on just the front page.  Not in my board index.

I know there are many ways to do rounded corners, but none of the ones I'm familiar with have worked with tinyportal.  I also haven't come across a single theme that has rounded corners on the front page display. (blocks yes, front page display, no)

Does anyone have a clue?  I've been searching about this topic all night and day with no luck.

Thanks in advance!

[IchBin]

You would have to customize the TPortal.template.php file in the default theme. If you are using a custom theme, I would copy that file to your custom theme and make the necessary edits. Just remember in the future things may change and you will likely have to update the TPortal.template.php file you customized.

[latratra]

What part of TPortal.template.php affects the frontpage headers?  I looked through it twice but couldn't find any reference.  Are there any examples I could learn from?

[IchBin]

Oops, sorry about that. I forgot Bloc moved the layout to a function in the TPBlocks.template.php file. Assuming you are using board as news on your frontpage I think the "function TPpageLayout1()" section is what you are looking for.

[latratra]

Unfortunately I'm still running into issues.  sorry

Here's what I did.  I made a simple div in style.css like so (for testing purposes):

Code Select Expand

.tl {background: url(images/topleftround.png) 0 0 no-repeat; width: 21px;height:20px;}
This simply makes a round corner for the top left area of the title.

Then in TPBlocks.template.php I did this:

function TPpageLayout1($story, $count)
{
   
   global $context, $settings, $options, $txt, $scripturl, $modSettings, $boardurl;
   
   if($story['is_boardnews'] || $story['frame']=='theme')
      echo ' 
   <div class="tborder tp_article_frame">  ';

   // collect the options
   $ntime='
         <span class="tp_month">' . $txt['months_short'][date("n", $story['timestamp'])] . '</span>
         <span class="tp_thindivider"> 
         </span><span class="tp_day">'. date("d",$story['timestamp']) . '</span>
         <span class="tp_year"> '. date("Y",$story['timestamp']) . '</span>';
   
   if(($story['is_boardnews'] || isset($story['options']['title']) || !isset($story['options'])) && $story['frame']!='none')
   {
      echo '<div class="tl"></div>
      <div' , $story['is_featured'] ? ' id="featured_article"' : '' , ' class="' , $story['is_boardnews'] ? 'catbg' : 'titlebg' , ' tp_subject">';

      if($context['TPortal']['print_articles']==1)
         echo '
         <a style="display: block; float: right;" class="smalltext" href="' . $story['print_href'] . '">' . $txt['tp-print'] . '</a>';

      if(isset($story['options']['date']) || $story['is_boardnews'])
         echo $ntime;

      echo '
         <a href="' , $story['href'] , '">' , $story['subject'] , '</a>
      </div>';
   }

The result is what you currently see on my site.  It's obviously not in the right spot and I'm not sure where the div tag should begin and where it should close.

I also added the div to the blocks via TPBlockLayout.template like so:

<?php
// Version: 1.0 beta4; TPBlockLayout

function TP_block($block, $theme, $side, $double=false)
{
   global $context , $scripturl, $settings, $language , $txt;

   // its a normal block..
   if(in_array($block['frame'],array('theme','frame','title','none')))
   {
      echo   '
   <div style="margin-bottom: 30px;" class="', (($theme || $block['frame']=='frame') ? 'tborder tp_'.$side.'block_frame' : 'tp_'.$side.'block_noframe'), '">';

      // show the frame and title
      if ($theme || $block['frame'] == 'title')
      {
         echo ' <div class="tl"></div>
      <h3 style="margin: 0; font-size: 1em; padding: 5px;" class="catbg3 tp_'.$side.'block_title">';
         if($block['visible']=='' || $block['visible']=='1')
            echo '<a href="javascript: void(0); return false" onclick="toggle(\''.$block['id'].'\'); return false"><img id="blockcollapse'.$block['id'].'" style="margin: 0;" align="right" src="' .$settings['tp_images_url']. '/' , !in_array($block['id'],$context['TPortal']['upshrinkblocks'])  ? 'TPcollapse' : 'TPexpand' , '.gif" border="0" alt="" title="'.$txt['block-upshrink_description'].'" /></a>';

         // can you edit the block?
         if($block['can_edit'] && !$context['TPortal']['blocks_edithide'])
            echo '<a href="',$scripturl,'?action=tpmod;sa=editblock'.$block['id'].';sesc='.$context['session_id'].'"><img style="margin-right: 4px;" border="0" align="right" src="' .$settings['tp_images_url']. '/TPedit2.gif" alt="" title="'.$txt['edit_description'].'" /></a>';
         elseif($block['can_manage'] && !$context['TPortal']['blocks_edithide'])
            echo '<a href="',$scripturl,'?action=tpadmin;blockedit='.$block['id'].';fromblock='.$context['TPortal']['serialize_url'].';sesc='.$context['session_id'].'"><img border="0" style="margin-right: 4px;" align="right" src="' .$settings['tp_images_url']. '/TPedit2.gif" alt="" title="'.$txt['edit_description'].'" /></a>';

         echo $block['title'],'
      </h3>';
      }

I've tried a bunch of configurations regarding the placement of the div tags, and just put them in their current spot for reference yet none seem to give the desired effect.  In the CSS, I have width and height added so you can see where the image is showing up.  Since there's no text within it won't show up otherwise.

I'm attempting to use this CSS Round Corners method with little success.

I've never had trouble doing this with a site from scratch because I can control everything via margins and z-index.. but this is a little more involved it seems!

Any idea where I should go from here?

[IchBin]

You probably need to float that div you added to the left.