Board index PBase HTML and Style Sheets How to Change a Header?

HTML and Style Sheets

How to Change a Header?

Customize your galleries.
paul_keates
 
Posts: 10

How to Change a Header?

Post Tue Oct 28, 2003 7:31 pm


Please can some one help.
When I type in <h2>Paul Keates Imagery<h2> in my Thumbprints page it appears as in http://www.pbase.com/paul_keates/root

How can I make this Header appear like my other galleries ie.
http://www.pbase.com/paul_keates/lake_como

Any assistance would be greatly appreciated.
Thank you.
Paul.

thewedding
 

>

Post Tue Oct 28, 2003 8:21 pm


<H2>Paul Keates Imagery<H2>

you forgot to close it properly, ... the dash in the end tag </h2>

ps: nice mod of my stylesheet, looks good

paul_keates
 
Posts: 10

Thank you.

Post Tue Oct 28, 2003 9:01 pm


Thank you for your prompt reply and solving the problem.

Your stylesheet is fabulous, well done.

Please may I ask how you change the colour of the first letter of the Header as per
http://www.pbase.com/caramou/morris_arboretum_winners

If you have any tips to make your Webdev look even better on my galleries, this would be greatly appreciated.
Thanks again,
Respects,
Paul.

thewedding
 


Post Tue Oct 28, 2003 9:03 pm


h2:first-letter
{
color: #d5ae83;
font-style: bold;
font-size: 22pt;
}

thewedding
 

Re: Thank you.

Post Tue Oct 28, 2003 9:06 pm


paul_keates wrote:If you have any tips to make your Webdev look even better on my galleries, this would be greatly appreciated.
Paul.


well your doing a good job so far so.. trail and error I guess untill your happy with the result :)

paul_keates
 
Posts: 10

Thank you, again.

Post Tue Oct 28, 2003 9:27 pm


Thank you again for your prompt reply and for your nice comment.

I am very new to this CSS and your help is greatly appreciated.

Two things;
1) Out of courtesy to you, should I be showing some recognition of your design anywhere?

2) I am not sure what to do with your reply,

h2:first-letter
{
color: #d5ae83;
font-style: bold;
font-size: 22pt;
}
I have tried several things but not successful.
Thank you regards,
Paul.

srijith
Moderator
 
Posts: 2321
Location: Amsterdam

Re: Thank you, again.

Post Tue Oct 28, 2003 9:37 pm


paul_keates wrote:2) I am not sure what to do with your reply,

h2:first-letter
{
color: #d5ae83;
font-style: bold;
font-size: 22pt;
}
I have tried several things but not successful.

Doesn't putting this into your stylesheet create the effect you want? Try to refresh the gallery to overcome cache illusions.

paul_keates
 
Posts: 10

Thank you for trying to help me.

Post Tue Oct 28, 2003 9:58 pm


I am very new to this CSS.
I have put it into the Stylesheet, but not sure of exactly the correct position to place it into.

When I have tried, it shows a coloured square aroung the first letter.
Also the font is a very small size, even after modifying to the same size as the other letters.

Sorry to cause such a bother.
regards,
paul.

paul_keates
 
Posts: 10

PS.

Post Tue Oct 28, 2003 10:00 pm


this is what is in the current Stylesheet.

h1, h2
{
border: rgb(255, 160, 1) 2px solid;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
margin-bottom: 1em;
margin-left: -10px;
margin-right: 0px;
padding: 5px;
width: 100%;
display: block;
background: rgb(0, 0, 0);
color: rgb(255, 160, 1);
font: bolder 24px Verdana, Arial, Helvetica, sans-serif;
letter-spacing: 4px;
text-align: right;
position: relative;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr='#000000',endColorstr='#2D2D2D');
}

Regards,
paul.

srijith
Moderator
 
Posts: 2321
Location: Amsterdam


Post Tue Oct 28, 2003 10:20 pm


Just add this piece of code
Code: Select all
h2:first-letter
{
color: #d5ae83;
font-style: bold;
font-size: 22pt;
}

mentioned earlier, anywhere in the sheet, say between the codes of h2 and h3. So it will look like:

Code: Select all
h1, h2
{
   border: rgb(255, 160, 1) 2px solid;
   border-left: 1px none;
   border-right: 1px none;
   border-top: 1px none;
   margin-bottom: 1em;
   margin-left: -10px;
   margin-right: 0px;
   padding: 5px;
   width: 100%;
   display: block;
   background: rgb(0, 0, 0);
   color: rgb(255, 160, 1);
   font: bolder 24px Verdana, Arial, Helvetica, sans-serif;
   letter-spacing: 4px;
   text-align: right;
   position: relative;
   filter: progid:DXImageTransform.yup..yup..yup..
}

/* The new code */
h2:first-letter {
  color: #d5ae83;
  font-style: bold;
  font-size: 22pt;
}

h3
{
   border-bottom: rgb(0, 0, 0) 1px dotted;
   border-left: 1px none;
   border-right: 1px none;
   border-top: 1px none;
   etc.....

It works for me on Opera and IE using your gallery setting.

thewedding
 

Re: PS.

Post Tue Oct 28, 2003 10:30 pm


paul_keates wrote:h1, h2
{
border: rgb(255, 160, 1) 2px solid;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
....


well there is an dupplicate to be found here as the first line border: rgb(255, 160, 1) 2px solid; applies to all borders and the next 3 lines will be overrulled... and as they are set on none you can remove these lines.

also looking at your site the border on your thumbnails have a 1px solid border so giving them a 2 px border on a:hover will result in shifting images.

as far as the first- h2 letter... I found that there is a minnour conflict somewhere in my css file concerning to achive this effect as I too can only get it to work on my first h2 opening gallery but not the remaining galleries.... I'll sort that out later as it is getting late over here :)

thewedding
 


Post Wed Oct 29, 2003 11:15 am


wierd but..

I got it to work but it looks like psuedo classes are "space"sensitive?

h1:first-letter , h2:first-letter {
color: #d5ae83;
font-size: bold 22px arial;
}

try pasting this...

paul_keates
 
Posts: 10

Thank you so much.

Post Wed Oct 29, 2003 6:51 pm


Perfection, thank you very much for your much needed and greatly appreciated skill.

best regards,
Paul.
:D :D


Board index PBase HTML and Style Sheets How to Change a Header?

Who is online

Users browsing this forum: No registered users and 2 guests