forum.coppermine-gallery.net

Support => cpg1.3 Themes/Skins/Templates => cpg1.3.x Support => Older/other versions => cpg1.3 theme contributions => Topic started by: Rodinou on October 15, 2003, 04:08:25 pm

Title: Possibility to scroll long texts ... CSS
Post by: Rodinou on October 15, 2003, 04:08:25 pm
I have put it on the old board, but this option isn't on 1.2x

Example :
ahahhah no I can't ... I'm upgrading, there is critial Error everywhere :)

so ... when you are inside a category and you have several album, you can put text isn't it (next to the pic) ?

A lot of people don't write long text ... but if you use coppermine like me (I write articles on concerts, discotheques, themas ...) when text is too long, this creates a nasty layout.

The solution is simple : add in a div the property overflow:auto

<div style="overflow:auto">
Your long text
</div>

If text is too short, scrollbar doesn't appear
If text is long, scrollbar appears

Compatible with all Mozilla browsers, Opera 7 and IE since 5.x

If other browsers, nasty layout appears : so, degrades well.
Title: Possibility to scroll long texts ... CSS
Post by: Tarique Sani on October 15, 2003, 04:59:33 pm
Good suggestion - In fact why dont you try that

you are using the eyeball theme - open the theme.php line 221 is
Code: [Select]
<p class="album_stat">{ALB_INFOS}</p>
Put the div tags around it

Let us know if you succeed
Title: Possibility to scroll long texts ... CSS
Post by: Rodinou on October 15, 2003, 05:34:36 pm
When I posted it, the album bugged :)

Changed Succefully

This is the code

Code: [Select]


        <div style="width:100%;height:150px;position:relative;overflow:auto">
                        {ADMIN_MENU}
                        <p>{ALB_DESC}</p>
                        <p class="album_stat">{ALB_INFOS}</p>
        </div>


See representative examples at
http://www.sortons.net/photos/index.php?cat=11

I have a BIG problem with your code concerning the thumb pic : IMPOSSIBLE even if I force CSS to change the width of the cell containing the pic !!!
Title: Possibility to scroll long texts ... CSS
Post by: Rodinou on October 15, 2003, 06:29:30 pm
The complete code

in theme.php (on each template)

<!-- BEGIN album_cell -->
        <td width="{COL_WIDTH}%" height="100%" valign="top">
        <table width="100%" height="100%" cellspacing="0" cellpadding="0">
        <tr>
                <td colspan="3" height="1" valign="top" class="tableh2">
                        <b>{ALBUM_TITLE}</b>
                </td>
        </tr>
        <tr>
                <td colspan="3">
                        <img src="images/spacer.gif" width="1" height="1"><br />
                </td>
        </tr>
        <tr height="100%">
                <td align="center" height="100%" valign="middle" class="thumbnails">
                        <!-- <img src="images/spacer.gif" width="{THUMB_CELL_WIDTH}" height="1" class="image" style="margin-top: 0px;
 margin-bottom: 0px; border: none;"><br /> -->
                        <a href="{ALB_LINK_TGT}" class="albums">{ALB_LINK_PIC}<br /></a>
                </td>
                <td height="100%">
                        <img src="images/spacer.gif" width="1" height="1">
                </td>
               <td width="100%" height="100%" valign="top" class="album_stat">

        <div style="width:100%;height:150px;position:relative;overflow:auto; padding-right:10px">
                        {ADMIN_MENU}
                        <p class="album_stat">{ALB_DESC}</p>
                        <p class="album_stat">{ALB_INFOS}</p>
        </div>


                </td>
        </tr>
        </table>
        </td>
<!-- END album_cell -->

Weight Police = portion of code to change
Red = all additions

The problem of the thumbnail is in style.css

Reduce the value
.thumbnails
 {
  padding:10px;
}

Reduce this value to 3 or 2 px.

Page of demo
http://www.sortons.net/photos/index.php?cat=11
Title: Simple Question
Post by: antonio on November 06, 2003, 04:56:10 pm
Let's say Im using the Hardwired theme & I want to use the scroll script.

Which pages need to be modified with the code besides theme.php?

Do I put the code at the end of the page?

Antonio...
Title: Possibility to scroll long texts ... CSS
Post by: ray on November 07, 2003, 12:46:17 am
I installed this mod and all I done was edit theme.php, and this is what I done.

Search for:
Code: [Select]
{ADMIN_MENU}
                        <p>{ALB_DESC}</p>
                        <p class="album_stat">{ALB_INFOS}</p>


and replace with:
Code: [Select]
  <div style="width:100%;height:150px;position:relative;overflow:auto">
                        {ADMIN_MENU}
                        <p>{ALB_DESC}</p>
                        <p class="album_stat">{ALB_INFOS}</p>
   </div>


In this theme you should be able to replace two lots.
Title: Thanks..
Post by: antonio on November 07, 2003, 10:57:32 pm
Thanks so much...it works fine..
Title: Possibility to scroll long texts ... CSS
Post by: DefenceTalk.com on November 11, 2003, 05:03:13 pm
This is nice. Thank You! I haven't implemented it yet, but will do.

Question:

Where do i enter this code so that picture descriptions in thumbnails are scrollable and does not ruin the layout of the thumbnails?

thanks
Title: Possibility to scroll long texts ... CSS
Post by: Joachim Müller on November 12, 2003, 08:31:50 am
Quote from: "DefenceTalk.com"
Question:

Where do i enter this code so that picture descriptions in thumbnails are scrollable and does not ruin the layout of the thumbnails?


http://forum.coppermine-gallery.net/viewtopic.php?p=6477#6477

What more info do you need?

GauGau
Title: Possibility to scroll long texts ... CSS
Post by: John on November 13, 2003, 07:18:56 pm
Quote from: "DefenceTalk.com"
This is nice. Thank You! I haven't implemented it yet, but will do.

Question:

Where do i enter this code so that picture descriptions in thumbnails are scrollable and does not ruin the layout of the thumbnails?

thanks


i did this easy.

just go into style.css for whatever theme your using, and find .thumb_caption

alter it to look something like this:

.thumb_caption {
        font-size: 80%;
        padding: 1px;
        display : block;
        position:relative;
        overflow:auto;
        height:50px;
}

hope this is what you meant and is of some help

John
Title: Possibility to scroll long texts ... CSS
Post by: gmarik on January 17, 2004, 02:27:55 pm
This is CSS2, many browsers support only CSS1, be carefull!
Title: Possibility to scroll long texts ... CSS
Post by: Rodinou on January 18, 2004, 07:49:32 am
CSS 2 is "ONLY SUPPORTED BY"

All Internet Explorer (4 to 6)
All Mozilla Gecko (only Konkeror, Mozilla, Firebird, Netscape 7
Opera 7

So ... about 96% of the actual browsers

DROP IT your old and inefficace browsers like NS4 (which is not able to read SIMPLE HTML ... so CSS ... hahahaha)

CSS is future.
Title: Re: Possibility to scroll long texts ... CSS
Post by: Tranz on August 23, 2004, 06:18:42 pm
I built upon this code by Rodinou to take advantage of CSS:
Code: [Select]
 <div style="width:100%;height:150px;position:relative;overflow:auto">
                       {ADMIN_MENU}
                       <p>{ALB_DESC}</p>
                       <p class="album_stat">{ALB_INFOS}</p>
  </div>

This is what I now have in theme.php:
Code: [Select]

{ADMIN_MENU}
<div class="alb_desc">
{ALB_DESC}</p>
<p class="album_stat">{ALB_INFOS}</p>
</div>
I guess it's a matter of taste whether to put the opening div before or after {ADMIN_MENU}. It only matters when in admin mode. Do a search for the string, <p class="album_stat">{ALB_INFOS}</p> to ensure editing of the description on the album and category pages, if so desired.

in style.css, I added:
Code: [Select]
.alb_desc {
width:100%;
height:150px;
position:relative;
overflow:auto;
}

It was a great idea to put the album description in a scrollable div. :) I didn't like what the long text of some of my album descriptions were doing to my layout.
Title: Re: Possibility to scroll long texts ... CSS
Post by: Rodinou on September 18, 2004, 02:16:34 am
thanx for your feedback :)

I have seen your theme ... we could try together to make a lot of stuff with CSS :) I love CSS ... and tabless ... and there are a lot hacks (for example : create "cropped" thumbs with actual thumbs but by playing with css, for example ...)