Board index PBase HTML and Style Sheets new look of Recent Galleries ..problem

HTML and Style Sheets

new look of Recent Galleries ..problem

Customize your galleries.
laryl
 
Posts: 1056

new look of Recent Galleries ..problem

Post Mon Aug 09, 2010 10:31 pm


ok I'm not good at CSS stuff.. I had some help and got my front/home page for pbase looking how I like it. All was good.
Now suddenly the "recent galleries" for everyone has changed from a nice easy to read list, to a style sheet that resembles the front page.. YUCK. Ok personal opinion on this change (that I don't like, ok last gripe for now hehe) put aside for now... here's my question:

If the new "recent galleries" is supposed to somehow match our first page css.. and it doesn't.. is there anything I can do? Can we edit it?

My front page: http://www.pbase.com/laryl should show the album titles in white. If it doesn't PLEASE let me know.. on my screen it does.
That's what I want. BUT

on my "recent galleries" page the album titles are now in black text and with that dark background, it's hard to read. Why isn't it white? Can I fix it?
Link to my newest photos ... http://www.pbase.com/laryl/newest_photos

rsbfotos
 
Posts: 372

Re: new look of Recent Galleries ..problem

Post Mon Aug 09, 2010 10:46 pm


I don't know any CSS, only a little html but --
On your "recent" page I can read the black text on gray background without any problem, however, that "recent" page is all left justified, not cenetered.
OK if that's your intention, but to me it just doesn't look right.

cheers, 10kzoomfz
---------------------------------------------------
rsbfotos
You can't see the forest when you sneeze.

laryl
 
Posts: 1056

Re: new look of Recent Galleries ..problem

Post Tue Aug 10, 2010 12:14 am


none of this was "my" intention.. pbase has changed the way the 'recent galleries' look.. it was a shock to
me to find it this way today! that being said, the only thing that is left justified in my firefox browser
is the title.. everything else is centered. In IE8 you are right, it's all left justified YUCK

Glad you can read the titles without problem.. I can read them but it's dark and sure not what I'd want.
Link to my newest photos ... http://www.pbase.com/laryl/newest_photos

tvw
 
Posts: 271
Location: The Netherlands

Re: new look of Recent Galleries ..problem

Post Tue Aug 10, 2010 5:24 am


It looks very ugly. Again no message from Pbase.
Why is this not user selectable? Why aren't many other features (easily) customizable?

I just asked this last week, got an answer. Don't know if it's just an automatic reply (or is that to high tech for Pbase)?

Hello,
Yes there will be feature changes. Our administrators and programmers
have been working on changing the look of PBase, implementing new
features as well as improving existing features. The "downtime" that
occurred late last year created delays in those implementations.
Unfortunately, I do not have a time when to expect them to happen, but I
have been told they are steady working on getting rid of bugs.
Thanks,
Jehan
PBase.com Support Team

mardoli
 
Posts: 589

Re: new look of Recent Galleries ..problem

Post Tue Aug 10, 2010 8:44 am


laryl wrote:none of this was "my" intention.. pbase has changed the way the 'recent galleries' look.. it was a shock to
me to find it this way today! that being said, the only thing that is left justified in my firefox browser
is the title.. everything else is centered. In IE8 you are right, it's all left justified YUCK

Glad you can read the titles without problem.. I can read them but it's dark and sure not what I'd want.

Hello,
you might try to solve partially some of the problems created by this new layout of the recent galleries list.
To centre the thumbnails of the recent galleries you have to modify a little your root page CSS
Adding this line of commend in the section BODY.
Code: Select all
text-align:center;

As for changing the colour of the title of the galleries always in this new page where the recent galleries are displayed you should add to your CSS this section of code and to change the values of the colours and the size of the fonts at your pleasure
Code: Select all
.gal_update_time
{
color:#ffffff;
}
.gal_title{
font-size:11px;
color:#ffffff;}

I hope it can be of help
Have a nice day
Marisa
ImageImage
"Arguments are to be avoided; they are always vulgar and often convincing."
~Oscar Wilde~

pkocinski
 
Posts: 93

Re: new look of Recent Galleries ..problem

Post Tue Aug 10, 2010 11:55 am


I noticed this a few days ago. I HATE IT because I can't tell which gallery has been updated recently. Without seeing the last posted date, I now have to open up every gallery listed instead of just seeing which gallery was updated within the past, say, two or three days.

Can we please go back to the old way or at least have a choice of which way we want to view our recent galleries?

madlights
 
Posts: 914

Re: new look of Recent Galleries ..problem

Post Tue Aug 10, 2010 2:22 pm


Why do they even have a customizable root gallery page, when it all transfers to the recent page without choice? You can make your root page look to your choice, arrange things, and then on the recent it will look out of place. Is there an easy way to change this in the root CSS? to program it differently for the recent, than for the root? If not I think this was an uncalled for change, without notification of members who've spent hours trying to get their "front page" to look professional - and without regard for what members have as an image background set for their root gallery. There may be ways around this that my limited skill at CSS doesn't comprehend.
Edit: Well I kind of fixed it...by not having text on my background image...but rather in HTML. However some of those who have used asymmetrical compositions for their background image in root gallery, will have a somewhat strange looking "recently updated" area. Luckily I had used a textured background rather than a picture, and was somewhat easily able to change it, hoping that most others have the same set of fonts.
Last edited by madlights on Tue Aug 10, 2010 6:57 pm, edited 3 times in total.

laryl
 
Posts: 1056

Re: new look of Recent Galleries ..problem

Post Tue Aug 10, 2010 3:41 pm


Marissa Thank you SO Much for offering help.. where exactly do I insert them? I don't know CSS well enough... and don't see a Body section

If it helps someone help me.. Here is what I have pasted in my description of the front page to make it look the way it does:

<CENTER><p><p>
<TABLE cellSpacing=0 cellPadding=0 width=800 border=0>
<TBODY>
<TR>
<TD align=center><br><br><IMG src="http://i.pbase.com/g3/81/2881/3/91370236.Y4xQSpA6.jpg" ><br></TD></TR>
<TR>
</TR>
<TR> <TD vAlign=bottom colSpan=3><!--- menu starts here --->
<TABLE class=luis cellSpacing=0 cellPadding=0 width=800 border=0>
<TBODY>
<TR>
<TR align=middle>
<TD><A href="http://www.pbase.com/laryl/profile"><h3>Profile</h3></A></TD>
<TD><A href="http://www.pbase.com/laryl/guestbook"><h3>Guestbook</h3></A></TD>
<TD><A href="http://www.pbase.com/laryl/root&view=recent"><h3>Recent</h3></A></TD>
<TD><A href='/laryl#galleries'><h3>Galleries</h3></A></TD>
</h3>
</A></TD></TR></TBODY></TABLE></TD></TR><!--- menu ends here --->

<TR>
<TD vAlign=top><CENTER>
<br><br><br>SLIDESHOW(newest_2010, size=medium, delay=1, loop=yes)</TD>
<TR>
<TD align=middle colSpan=5><br>
All photographs are ©2000-2010 Laryl Hancock, and are protected by U.S. Copyright laws.<br> Do not download or reproduce in any way without my written permission. Thank you for viewing my images.</P></TD></TR></TBODY></TABLE></CENTER>

<br>
<a name="galleries"></a>
Link to my newest photos ... http://www.pbase.com/laryl/newest_photos

mardoli
 
Posts: 589

Re: new look of Recent Galleries ..problem

Post Tue Aug 10, 2010 5:13 pm


Laryl,
Well, I’ll try to do my best to make myself understood, English is not my mother tongue, so if my explanation might sound a little bizarre to you as for its style, try to guess what I mean to say ;^)
What you copied and pasted for me has nothing to do with CSS, it’s HTLM language and it’s the code you inserted in the description of your front page gallery to get your logo with your name and the slideshow at the top of the page.
So forget all that for the moment, you don’t need to add anything in your front page description case.
What you have to do is to edit your CSS.
To do that, please , click on the button “Edit root gallery”, then when you are in edit mode go down and you’ll see the case “Style sheet” by that there is the name of the style sheet you use and by that there is the button “Edit style sheet”.
Clicking there you’ll be directed to the page where you cna edit your style-sheets and it’s the style sheet you have to correct, not the code you inserted in your description case.
This is the code of the CSS (style sheet) you are using in your page
Code: Select all
A
{
   COLOR:  #26466D;
   TEXT-DECORATION: none
}

A:link
{
   COLOR:  #26466D;
   TEXT-DECORATION: none
}


A:visited
{
   COLOR:  #26466D;
   TEXT-DECORATION: none
}


A:active
{
   COLOR:  #26466D;
   TEXT-DECORATION: none
}


A:hover
{
   COLOR:  #DCDCDC;
   TEXT-DECORATION: none
}



/* This section defines the black block occupied by each gallery */


A.thumbnail
{
   DISPLAY: block;
   BACKGROUND:  #32353a;
   BORDER-RIGHT:  #000000 1px solid;
        BORDER-LEFT:  #000000 1px solid;
   BORDER-TOP:  #000000 1px solid;
   BORDER-BOTTOM:  #000000 1px solid;    
   MARGIN-BOTTOM: -45px;
   WIDTH: 190px;
   HEIGHT: 200px;
   PADDING-TOP: 5px;
        FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);

}


A.thumbnail:link
{
   DISPLAY: block;
   BACKGROUND:  #32353a;
   BORDER-RIGHT:  #000000 1px solid;
        BORDER-LEFT:  #000000 1px solid;
   BORDER-TOP:  #000000 1px solid;
   BORDER-BOTTOM:  #000000 1px solid;    
   MARGIN-BOTTOM: -45px;
   WIDTH: 190px;
   HEIGHT: 200px;
   PADDING-TOP: 5px;
        FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
}


A.thumbnail:visited
{
   DISPLAY: block;
   BACKGROUND:  #32353a;
   BORDER-RIGHT:  #000000 1px solid;
        BORDER-LEFT:  #000000 1px solid;
   BORDER-TOP:  #000000 1px solid;
   BORDER-BOTTOM:  #000000 1px solid;    
   MARGIN-BOTTOM: -45px;
   WIDTH: 190px;
   HEIGHT: 200px;
   PADDING-TOP: 5px;
        FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
}


A.thumbnail:active
{
   DISPLAY: block;
   BACKGROUND:  #32353a;
   BORDER-RIGHT:  #000000 1px solid;
        BORDER-LEFT:  #000000 1px solid;
   BORDER-TOP:  #000000 1px solid;
   BORDER-BOTTOM:  #000000 1px solid;    
   MARGIN-BOTTOM: -45px;
   WIDTH: 190px;
   HEIGHT: 200px;
   PADDING-TOP: 5px;
        FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
}


/* The following defines when hovering mouse over gallery block*/


A.thumbnail:hover
{   
        DISPLAY: block;
   BACKGROUND:  #26466D;
   BORDER-RIGHT:  #000000 1px solid;
        BORDER-LEFT:  #000000 1px solid;
   BORDER-TOP:  #000000 1px solid;
   BORDER-BOTTOM:  #000000 1px solid;    
   MARGIN-BOTTOM: -45px;
   WIDTH: 190px;
   HEIGHT: 200px;
   PADDING-TOP: 5px;
        FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
}







BODY
{
   BACKGROUND:  #6E7B8B;
   MARGIN-TOP: 0px; 
   MARGIN-BOTTOM: 20px
}


DIV
{
   BORDER-TOP: 0px;
   BORDER-BOTTOM: 0px;
   BORDER-LEFT: 0px;     
   BORDER-RIGHT: 0px;
   COLOR:  #000000;
   FONT: 12px verdana, arial, sans-serif;
}


TH
{
   BORDER-TOP: 0px;
   BORDER-BOTTOM: 0px;
   BORDER-LEFT: 0px;     
   BORDER-RIGHT: 0px;
   COLOR:  #000000;
   FONT: 12px verdana, arial, sans-serif;   
}


TR
{
   BORDER-TOP: 0px;
   BORDER-BOTTOM: 0px;
   BORDER-LEFT: 0px;     
   BORDER-RIGHT: 0px;
   COLOR:  #000000;
   FONT: 12px verdana, arial, sans-serif;
}


TABLE
{
   BORDER-TOP: 0px;
   BORDER-BOTTOM: 0px;
   BORDER-LEFT: 0px;
   BORDER-RIGHT: 0px; 
   MARGIN-TOP: -27px;
   MARGIN-BOTTOM: 7px;
   FONT: 12px verdana, arial, sans-serif;
   COLOR:  #000000;
}


TABLE.luis
{
   BORDER-TOP: 0px;
   BORDER-BOTTOM: 0px
   BORDER-LEFT: 0px;   
   BORDER-RIGHT: 0px; 
   MARGIN-TOP: 0px;
   MARGIN-BOTTOM: 0px;
   FONT: 12px verdana, arial, sans-serif;
   COLOR:  #000000;
}


FONT
{
   BORDER-TOP: 0px;
   BORDER-BOTTOM: 0px;
   BORDER-LEFT: 0px;
   BORDER-RIGHT: 0px; 
   FONT: 12px verdana, arial, sans-serif;
   COLOR:  #000000;
}


LI
{
   BORDER-TOP: 0px;
   BORDER-BOTTOM: 0px;
   BORDER-LEFT: 0px;
   BORDER-RIGHT: 0px; 
   FONT: 12px verdana, arial, sans-serif;
   COLOR:  #000000;
}




UL
{
   BORDER-TOP: 0px;
   BORDER-BOTTOM: 0px;
   BORDER-LEFT: 0px;
   BORDER-RIGHT: 0px; 
   FONT: 12px verdana, arial, sans-serif;
   COLOR:  #000000;
}



FORM
{
   BORDER-TOP: 0px;
   BORDER-BOTTOM: 0px;
   BORDER-LEFT: 0px;
   BORDER-RIGHT: 0px; 
   FONT: 12px verdana, arial, sans-serif;
   COLOR:  #000000;
}


BLOCKQUOTE
{
   BORDER-TOP: 0px;
   BORDER-BOTTOM: 0px;
   BORDER-LEFT: 0px;
   BORDER-RIGHT: 0px; 
   FONT: 12px verdana, arial, sans-serif;
   COLOR:  #000000;
}


/*Text beside and directly underneath slide show*/

P
{
   BORDER-TOP: 0px;
   BORDER-BOTTOM: 0px;
   BORDER-LEFT: 0px;
   BORDER-RIGHT: 0px;
   FONT: 13px verdana, arial, sans-serif;
   COLOR:  #DCDCDC;
}




/* Text in gallery thumbnails*/
B
{
   BORDER-TOP: 0px;
   BORDER-BOTTOM: 0px;
   BORDER-LEFT: 0px;
   BORDER-RIGHT: 0px;
   FONT: 12px verdana, arial, sans-serif;
   COLOR:  #DCDCDC;
   
}



{
   BORDER-TOP: 0px;
   BORDER-BOTTOM: 0px;
   BORDER-LEFT: 0px;
   BORDER-RIGHT: 0px;
   FONT: 12px verdana, arial, sans-serif;
   COLOR:  #000000;
}



FONT
{
   BORDER-TOP: 0px;
   BORDER-BOTTOM: 0px;
   BORDER-LEFT: 0px;
   BORDER-RIGHT: 0px;
   FONT: 12px verdana, arial, sans-serif;
   COLOR:  #000000;
}


CENTER
{
   BORDER-TOP: 0px;
   BORDER-BOTTOM: 0px;
   BORDER-LEFT: 0px;
   BORDER-RIGHT: 0px;
   FONT: 12px verdana, arial, sans-serif;
   COLOR:  #000000;

}


FONT
{
   DISPLAY: block;
   COLOR:  #000000;
   WIDTH: 170px;
   MARGIN-LEFT: 4px;
   MARGIN-RIGHT: 4px;   
   FONT: 9px Verdana, Tahoma, Helvetica, sans-serif;
   LETTER-SPACING: 0px
}




H3 {
   BACKGROUND:  #000000;
   FONT-STYLE: normal;   
   FONT-WEIGHT: normal;
   FONT-SIZE: 16px;
   FONT-VARIANT: normal
   LETTER-SPACING: 0px;
   TEXT-ALIGN: center;
   LINE-HEIGHT: normal;   
   BORDER-LEFT: 0px;
   PADDING-TOP: 10px;
   PADDING-BOTTOM: 10px;
   COLOR:  #DCDCDC;
}


IMG
{
   BORDER-TOP:  #000000 1px;
   BORDER-BOTTOM:  #000000 1px
   BORDER-LEFT:  #000000 1px;   
   BORDER-RIGHT:  #000000 1px;
}



IMG.thumbnail
{
   BACKGROUND:  #000000;   
   BORDER-TOP:  #000000 1px solid;
   BORDER-BOTTOM:  #000000 1px solid;
   BORDER-LEFT:  #000000 1px solid;
   BORDER-RIGHT:  #000000 1px solid;
   PADDING-TOP: 0px;
   PADDING-BOTTOM: 0px; 
   PADDING-RIGHT: 0px;
   PADDING-LEFT: 0px;
   MARGIN: 0px;
   VERTICAL-ALIGN: middle; 
}



INPUT
{
   BORDER-TOP:  #000000 1px solid;
   BORDER-BOTTOM:  #000000 1px solid;
   BORDER-LEFT:  #000000 1px solid;
   BORDER-RIGHT:  #000000 1px solid;
}


TABLE.thumbnail
{
   WIDTH: 10%
}


TD
{
   BACKGROUND: none transparent scroll repeat 0% 0%;
   BORDER-TOP: 1px;
   BORDER-BOTTOM: 1px;
   BORDER-LEFT: 1px;   
   BORDER-RIGHT: 1px;
   BORDER-COLLAPSE: collapse;
   empty-cells: show
}



TD.message_body
{
   DISPLAY: block;
   BACKGROUND:  #000000;
   BORDER-TOP: 1px;
   BORDER-BOTTOM:  #000000 1px dotted   
   BORDER-LEFT: 1px;
   BORDER-RIGHT: 1px; 

}


.caption {
   COLOR:  #ff00ff;
   FONT-STYLE: italic
}




.display
{
   BACKGROUND:  #000000;
   BORDER-TOP:  #000000 1px solid;
   BORDER-BOTTOM:  #000000 1px solid;
   BORDER-LEFT:  #000000 1px solid;   
   BORDER-RIGHT:  #000000 1px solid;
   FILTER: progid:DXImageTransform.Microsoft.Shadow(color="#141414",Direction=135,Strength=5);
    
}




.lid
{
   BACKGROUND:  #000000;
   FONT: 11px Verdana, Tahoma, Helvetica, sans-serif;
   COLOR:  #ff00ff;
   TEXT-DECORATION: none
}


.message_body {
   MARGIN: 5px 5px 10px;
   FONT: 10px Verdana, Tahoma, Helvetica, sans-serif;
   COLOR:  #000000
}



.sb
{
   BACKGROUND:  #000000;
   COLOR:  #DCDCDC;
   FONT: 12px Verdana, Tahoma, Helvetica, sans-serif;
   TEXT-DECORATION: none
}



BODY
{
   MARGIN-TOP: 0px; TOP: 0px
}


BODY TABLE A IMG
{
   DISPLAY: inline
}



HR
{
   POSITION: relative
}

You’ll see that here you have a section “body”
This one
Code: Select all
BODY
{
   BACKGROUND:  #6E7B8B;
   MARGIN-TOP: 0px; 
   MARGIN-BOTTOM: 20px
}


It’s there that you should add the line of code to centre the thumbnails of your recent galleries list in all browsers.
If you prefer I can rewrite all your CSS including the lines of commands which can fix your problem.
It will look exactly like before as for colours and all, simply you’ll get all centred and you’ll have the font of the colour you want, that is white like in your main page.
You might write to me by email, my email address is visible in my profile page and I’ll send you the whole code for your css by email.
Let me know.
I hope it can help
Best
Marisa
ImageImage
"Arguments are to be avoided; they are always vulgar and often convincing."
~Oscar Wilde~

laryl
 
Posts: 1056

Re: new look of Recent Galleries ..problem

Post Tue Aug 10, 2010 5:55 pm


duh.. the css not my description to add the name and slideshow, I feel silly but this morning has been so crazy.

OK I sent email and thank you so much for offering to help with the style sheet rewrite!
I tried to insert the text align, but it didn't work right so I'm not doing it right.
I will wait for your edit.. thank you!
Link to my newest photos ... http://www.pbase.com/laryl/newest_photos

chezzyr
 
Posts: 13

Re: new look of Recent Galleries ..problem

Post Wed Aug 11, 2010 10:07 pm


Another vote (plea!) for the plain list format....or atleast let us choose

laryl
 
Posts: 1056

Re: new look of Recent Galleries ..problem

Post Thu Aug 12, 2010 7:38 am


Thank you Marisa.. I now have my recent galleries centered and the text is in white so it's easy to read, and I have my colors.

I appreciate it!

I wish we could have had a choice in this.. but guess I'll get used to it.
Link to my newest photos ... http://www.pbase.com/laryl/newest_photos


Board index PBase HTML and Style Sheets new look of Recent Galleries ..problem

Who is online

Users browsing this forum: No registered users and 2 guests