Text Wrap

[codetwists]

I'm trying create a new page and am having trouble keeping the center column or body form expanding with the text. My right column keeps running off the page.

Here's my code with some sample text.

Code: Select all

{serendipity_hookPlugin hook="entries_header"}
<div class="serendipity_Entry_Date">
	<h3 class="serendipity_date">{$smarty.now|@formatTime:DATE_FORMAT_ENTRY}</h3>
    
	
	<h4 class="serendipity_title">Welcome to the CodeTwist Blog.</h4>
	<div class="serediptiy_entry">
		From time to time people get the urge to expoundXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
		XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
				XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
	</div>
    {foreach from=$entries item="dategroup"}
        {foreach from=$dategroup.entries item="entry"}
		
        <br><a href="{$entry.link}">{$entry.title}</a>, Post by {$entry.author}, on {$entry.timestamp|@formatTime:DATE_FORMAT_ENTRY}
    
		{foreachelse}
		{if not $plugin_clean_page}
			{$CONST.NO_ENTRIES_TO_PRINT}
		{/if}
		{/foreach}
    {/foreach}

    <div class='serendipity_entryFooter' style="text-align: center">
    {if $footer_prev_page}
        <a href="{$footer_prev_page}">« {$CONST.PREVIOUS_PAGE}</a>  
    {/if}

    {if $footer_info}
        ({$footer_info})
    {/if}

    {if $footer_next_page}
        <a href="{$footer_next_page}">» {$CONST.NEXT_PAGE}</a>
    {/if}

    {serendipity_hookPlugin hook="entries_footer"}
    </div>
</div>	

The body, the part with all the XXXXXXXXXXXXXXX just runs off the page, pushing the right column out of site, adding a horizontal scroll.

Myron

[yellowled]

I'm trying create a new page and am having trouble keeping the center column or body form expanding with the text. My right column keeps running off the page.

It's probably more likely to be a CSS issue than a .tpl issue. Can we see this "live" somewhere?

YL

[codetwists]

Thanks for your help!

I'm using the Idea style, so there are several style sheets, one in the root, one in default, one in Idea. I'm not sure which one is active in the tpl, but I'm guessing it's using the Idea style sheet since the new tpl is located in the Idea Templates directory. I'm guessing that if a style class or id sin't in the Idea directory it will be used from one of the other style sheets, but I couldn't find the logic anywhere. I've patterned this page after the default entries.tpl page, so the class used for the Body of the default entries.tpl is what I used in my new tpl.

This can be seen at www.codetwists.com/Blog/index.php?fullview=1.

Myron

[yellowled]

In that particular entry, "expound" together with all the Xs (well, not all of 'em, but a lot!) is one word. HTML/CSS can't do word-wrap/hypenation, you'll have to do that manually. The only kind of word-wrap which will happen automagically is word-wrapping at the end of words, but never in one long word.

Now you're probably wondering "Hell, what am I supposed to do if there is something which is simply wider than my entry?" (i.e. an image) The answer is: Don't use it or resize it. You can actually use the CSS statement "overflow: hidden;" to stop something from expanding your entry container, but that's about it.

I'm using the Idea style, so there are several style sheets, one in the root, one in default, one in Idea. I'm not sure which one is active in the tpl, but I'm guessing it's using the Idea style sheet since the new tpl is located in the Idea Templates directory.

A template will always use the style.css in it's template directory. Only if none is present, it will use /templates/default/style.css. Period. No other stylesheets involved, unless your template actually includes additional stylesheets in its index.tpl.

YL

[codetwists]

You know, I was just changing that. It's morning here and I was working on that late last night. I'm a bit fresher and thinking better. I'm drinking coffee rather than wine, so I'm sure that's helping my cognitive abilities as well.

Never the less... Thanks again for your help.

Can you discuss with me the hierarchy of style sheets? Which sheet takes precedence? I'm been reading the on-line documentation about CSS, but I can't seem to find where that's addressed.

Myron

[Don Chambers]

Can you discuss with me the hierarchy of style sheets? Which sheet takes precedence? I'm been reading the on-line documentation about CSS, but I can't seem to find where that's addressed.

As Yellowled mentioned, a template's folder should contain a style.css file... in fact, its the one file that really defines the template. Many older templates had nothing more than a stylesheet, and never included tpls.

Serendipity looks for the existence of any file it needs, including style.css, and will use them from the template folder if it exists, and if not, from /templates/default/

If you want to load more than a single stylesheet, you need to specify that in your index.tpl file. See the bulletproof template for an example of that.

The hierarchy of css is such that the same rule loaded later will trump one declared earlier.. So if style_a.css has the rule .myclass {margin: 10px}, and then you load style_b.css and it has the rule .myclass {margin:20px}, the margin will be 20px... but they can also be used to compliment each other, where one stylesheet load basic stuff, and another loads colors and stuff.

There are ways to override this order hierarchy, but you can get that info in greater detail via google.

[codetwists]

That's pretty standard CCS stuff. I wasn't sure how Smarty would handle CSS, if there was any difference. I've never used Smarty templates before.

Thanks,

Myron

[Don Chambers]

Smarty is not going to handle CSS any differently than anything else.... its just a template format that mixes html with code that is quite similar to php. Keep up the great work!