Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Possibility to scroll long texts ... CSS  (Read 18624 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.039 seconds with 22 queries.