Board index PBase HTML and Style Sheets Help Editing Style Sheet

HTML and Style Sheets

Help Editing Style Sheet

Customize your galleries.
dbdors
 
Posts: 2

Help Editing Style Sheet

Post Tue Mar 01, 2011 7:56 pm


I have been searching the treads and many seem to need help editing style sheets. Are there some definitive posts for how to edit?

For example, I have this page with lots of text: http://www.pbase.com/dbdors/image/90825733
But the text goes from edge to edge. I really would like the text to be shifted about 1/2 - 1 inch from each edge, both left and right. I don’t want the test centered, but all indented.

I found a couple of suggestions for text margins like:

BODY
{
width:760px;
margin-left:auto;
margin-right:auto;

or this

.galleryheader
{
padding:50px;
}


I'm using the Alec template, and think I know how to get to the page to edit it, but I'm not clear on where and what needs to be pasted into the style sheet to get the result I want. Do I add the above at the beginning, or end? I already have the word "Body" in my sheet to I remove it and add with the inserts above.

I just plain have no clue what I'm doing.

This is what I have in my current style sheet:

<setvar color2 = black>
<setvar color7 = #dddddd>
<setvar color4 = #d5ae83>
<setvar color1 = #888888>
<setvar color6 = #5b80b7>
<setvar color3 = #5865e1>
<setvar color5 = #5068e3>


DIV,BODY,TD,TH,TR,TABLE,FONT,INPUT,LI,UL,FORM,
BLOCKQUOTE,P,B,I,H1,H2,H3,H4,H5 {
font-family: arial,helvetica,sans-serif;
color : <getvar color1>;
background : <getvar color2>;
{
A:link { color : <getvar color3>}
A:active { color : <getvar color4>}
A:visited { color : <getvar color5>}
A:hover { color : <getvar color6>}

.caption {
font-size : 9pt;
color : <getvar color7>;
font-style : italic;
}

Where do I add the suggested inserts and will these inserts work for what I need.

mardoli
 
Posts: 589

Re: Help Editing Style Sheet

Post Wed Mar 02, 2011 12:02 pm


Hello!
First of all I think it’s important to make clear what you’d like changing in your CSS.
If you want to control the text you write under a single image in the image caption it’s not the same as if you want to control the text in the gallery description in the thumbnails page.
From your link I guess you need to control the appearance of the text in your image caption, not in the gallery description.
So all the suggestion you found about the body and the galleryheader are useless in this case, what you have to do is to change the commands in the .caption section of your CSS.
My suggestion would be to create a new CSS.
I copied your present CSS and I simply corrected some parts of it.
So you, if you like, have only to copy the below code and paste it in your new CSS
Code: Select all
BODY
{
  color: white;
  background-color: #333333;
  font-size: 7pt;
  text-align:center;
}

.message_body
{ background-color: #333333;
  color: #d5ae83; padding-bottom: 10px;
}

DIV,TH,TR,TABLE,FONT,LI,UL,FORM,
BLOCKQUOTE,P,B,I,H1,H2,H3,H4,H5,FONT, CENTER
{
  font-family: verdana, arial, sans-serif;
  font-size: 10pt;
  color: white;
}

font
{
  color: #AAAAAA;   letter-spacing: 2px; font-size: 8pt;
}

h2
{
  font-size:         12pt;
  font-weight:      normal;
  text-align:       right;
  letter-spacing:     8px;
  padding-top:       15px;
  padding-bottom:    15px;
  margin-left:       auto;
  margin-right:      auto;
  background-color: black;
  color:  white;
}

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


h4
{
  color: #44dd44;
  font-size: 11pt;
}

I
{
  color: #888888;
}


TEXTAREA
{
  background-color: #EEEEEE;
  font-family: times new roman;
  color: black;
  scrollbar-base-color: gray;
  scrollbar-3dlight-color: black;
  scrollbar-highlight-color: none;
}

A, TD.A, A:link
{
  color:           #FFCC00;
  text-decoration: none;
}
A:hover  { color: #00FF00; text-decoration: underline; }
A:visited { color: #FFCC66; }
A:active { color : #d5ae83; }

.caption
{
font-size : 9pt;
color : #bbbbbb;
font-style : italic;
margin-left:auto;
margin-right:auto;
width:80%;
}
p{
font-size : 9pt;
color : #bbbbbb;
font-style : italic;
margin-left:auto;
margin-right:auto;
width:80%;
text-indent:6em;
margin-top:0;
margin-bottom:0;
}
TD
{
background-color: none;
}

TD.thumbnail
{
background-color: black;
padding: 5px;
vertical-align: middle;
horizontal-align: middle;
width: 200px;

}

.thumbnail {
border-color: silver; border-width: 1px;
}

.display
{
border: 3px RIDGE #999999;
background-color: black;
}


It’s just a first step, and then it’s possible to adjust details and to change dimensions and so on.
I hope it can help and I apologize for my rough use of English language for technical matters.
Best
Marisa
ImageImage
"Arguments are to be avoided; they are always vulgar and often convincing."
~Oscar Wilde~

vglass
 
Posts: 8
Location: Bedminster NJ USA

Re: Help Editing Style Sheet

Post Sun Apr 10, 2011 6:59 am


Look at the info and suggestions at these sites:
1. http://www.richinstyle.com/guides/css2.html
2. http://www.richinstyle.com/guides/html4.html
3. http://www.w3schools.com/
4. http://www.w3schools.com/
5. http://www.blooberry.com/indexdot/css/propindex/all.htm
6. http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Study the html and css code that others use on Pbase (or anywhere on the web). Ctrl+u brings up the html code for the current page. Within the html ocde click on lines like this <link rel="stylesheet" type="text/css" href="http://i.pbase.com/styles/gallery2.css"> to examine the css code referenced for the current page.


Board index PBase HTML and Style Sheets Help Editing Style Sheet

Who is online

Users browsing this forum: No registered users and 2 guests