Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

Author Topic: Possibility to scroll long texts ... CSS  (Read 18623 times)

0 Members and 1 Guest are viewing this topic.

Rodinou

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 346
  • Tournicoti, Tournicota
    • http://www.sortons.net
Possibility to scroll long texts ... CSS
« 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.
« Last Edit: November 26, 2005, 11:54:45 am by GauGau »
Logged

Tarique Sani

  • VIP
  • Coppermine addict
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 2712
    • http://tariquesani.net
Possibility to scroll long texts ... CSS
« Reply #1 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
Logged
SANIsoft PHP applications for E Biz

Rodinou

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 346
  • Tournicoti, Tournicota
    • http://www.sortons.net
Possibility to scroll long texts ... CSS
« Reply #2 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 !!!

Rodinou

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 346
  • Tournicoti, Tournicota
    • http://www.sortons.net
Possibility to scroll long texts ... CSS
« Reply #3 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

antonio

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 27
    • http://www.orrego.net
Simple Question
« Reply #4 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...
Logged

ray

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 61
Possibility to scroll long texts ... CSS
« Reply #5 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.
Logged

antonio

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 27
    • http://www.orrego.net
Thanks..
« Reply #6 on: November 07, 2003, 10:57:32 pm »

Thanks so much...it works fine..
Logged

DefenceTalk.com

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 230
    • http://www.defencetalk.com
Possibility to scroll long texts ... CSS
« Reply #7 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
Logged
(http://www.defencetalk.com/pictures/signature_cpg.php)

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Possibility to scroll long texts ... CSS
« Reply #8 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
Logged

John

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 75
Possibility to scroll long texts ... CSS
« Reply #9 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
Logged

gmarik

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 34
Possibility to scroll long texts ... CSS
« Reply #10 on: January 17, 2004, 02:27:55 pm »

This is CSS2, many browsers support only CSS1, be carefull!
Logged
webmaxtor.com

Rodinou

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 346
  • Tournicoti, Tournicota
    • http://www.sortons.net
Possibility to scroll long texts ... CSS
« Reply #11 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.

Tranz

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Gender: Female
  • Posts: 6149
Re: Possibility to scroll long texts ... CSS
« Reply #12 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.
« Last Edit: August 23, 2004, 07:11:27 pm by TranzNDance »
Logged

Rodinou

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 346
  • Tournicoti, Tournicota
    • http://www.sortons.net
Re: Possibility to scroll long texts ... CSS
« Reply #13 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 ...)
Pages: [1]   Go Up
 

Page created in 0.044 seconds with 23 queries.