Modifying sample style sheets

[mike_batty]

Hi,

I was just wondering if it's possible to modify an existing style sheet? At the moment I'm using alexc and would like to make a couple of small alterations. Is this something that can be done?

Thanks in advance,

Mike

[marcjosef]

Yes it's possible. Read this awesome thread: http://forum.pbase.com/viewtopic.php?t=13408

[dang]

Also, once you've gone through the previous link you might like have more questions concerning what does what & where... Here's a section that should help: http://pbasewiki.srijith.net/css_guide/ ... tylesheets

Good luck, and enjoy.

[mike_batty]

Yay! Thanks flipmarc and dang, I'm going to have fun playing with them.

Mike

[yoshyosh]

Also, once you've gone through the previous link you might like have more questions concerning what does what & where... Here's a section that should help: http://pbasewiki.srijith.net/css_guide/ ... tylesheets

Good luck, and enjoy.

This is great, in a way, but it isn't, in a way:

I still do not understand how to INSERT this code stuff.

For example, I do use the Karen1109 stylesheet. It's simple and clean, which is what I like.

So I try to insert the "code" to make it work like it shows, but I have no idea how to insert it, so most of the time the actual code writing comes out on the page! I don't understand how to actually insert the A, the h, all the other stuff.

All I want to do is to make it look a little more respectable, rather than the run-on text that I have on some of my pages.

So far, I was able to move the title text to the middle, and I figured out how to add a second line to the black bar title, but that's it. But when I moved it the middle, it changed colour and the size of the font! I thought it would stay the same size and colour as it was, since I didn't specify it to change!

Anything else I try to do with the title, I have no idea how to insert them actual code words with <> and things like that, and I don't understand how the { and : are all separated so far from each other, and how many spaces I need to leave between ; and }, and why the } has to be on the next line, etc etc............ and do I need the <>???

Every place I go to for explanations seem to show how it's done, but no one explains how to INSERT this into the PBase description box. No one seems to explain why the certain symbols I have described in the above have to be (or not have to be) spaced out in a certain way and why (or why not).

If you look at some of my pages, I write a lot. But the writings sort of run-on and expand with the pages. I want to make them not touch the edges of the pages, so that the paragraph endings are clear, so that the sentence endings are clear.

I would also like to be able to change the title fonts and make them bold and/or bigger. I see the codes, but how do I insert it between the <h2> ?

And the writing below that - why does it now show any code and yet it shows up properly, as long as I write it in the description box?

I also looked at Thierry's nice graphic explanations, but even those do not actually show you HOW to insert them, where, in what way, in what order with the correct < >.

It would be nice if someone could show exactly how the code should be written into the "description" box. But then why does the Root Gallery not have a "Title" box like the other galleries do?

Also - why is it that some of my galleries end up with the "A" subgallery links at the top of my galleries and some not? I have the subgallery thing selected at the root, is that enough, or do I have to go through my entire collection and select it at each place?

Is there some inconsistency in the code?



I am so confused!

Thank you for your help.

[dang]

So I try to insert the "code" to make it work like it shows, but I have no idea how to insert it, so most of the time the actual code writing comes out on the page! I don't understand how to actually insert the A, the h, all the other stuff.

== Did you click the box under the description area that says, "click here if using html. uncheck for automatic formatting"?


So far, I was able to move the title text to the middle, and I figured out how to add a second line to the black bar title, but that's it. But when I moved it the middle, it changed colour and the size of the font! I thought it would stay the same size and colour as it was, since I didn't specify it to change!

== The H2 controls the text at the top:
h2
{
font-size: 12pt;
font-weight: normal;
text-align: right
letter-spacing: 8px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: -10px;
margin-right: 0px;
background-color: black;
color: #cccccc;
=== As you see, it has a color designated. When I check it, it does not change when moved to center. I might be misunderstanding which section you mean?
If it's within a different area, just add the color designation into the section you're tweaking.

Anything else I try to do with the title, I have no idea how to insert them actual code words with <> and things like that, and I don't understand how the { and : are all separated so far from each other, and how many spaces I need to leave between ; and }, and why the } has to be on the next line, etc etc............ and do I need the <>???

=== If you want to reduce the space between lines (example: on your root gallery title) you need to reduce the "padding". In the above code, change padding: 5px, to 1 or 2. The { are used to divide sections of the CSS, and should be left in place, making changes after them within the section code. The number of spaces between { and: aren't important... once you click update, Pbase re-rights the code, and that changes the number of spaces. The entire code could be written on one line, and it would probably still work fine. Breaking it up helps see what you're doing is all.
The <> Brackets are used in the description area for HTML, and aren't generally used in the CSS section if memory serves me. The codes are a different language. The CSS code must be placed in your style sheet section, HTML in gallery/photo description.

Every place I go to for explanations seem to show how it's done, but no one explains how to INSERT this into the PBase description box. No one seems to explain why the certain symbols I have described in the above have to be (or not have to be) spaced out in a certain way and why (or why not).

=== The more code you look at, the easier it becomes. Just reproduce how it looks when you see it, and you'll get the hang of it.

If you look at some of my pages, I write a lot. But the writings sort of run-on and expand with the pages. I want to make them not touch the edges of the pages, so that the paragraph endings are clear, so that the sentence endings are clear.

=== I'd suggest adding a "table" into the description area, and place your text within it. This allows you to set margins, so it doesn't run to the edge:

<center> <table width=60 border=0 cellpadding=7> <tr><td>
Your Text goes here
</td></tr></table></center>
You can also add a border by changing border=0 to =1,2, 3...
To separate paragraphs, just hit your space and enter keys when adding the text. If it doesn't format automatically, then you can add a break <br> between lines, or a paragraph <p> where needed.


I would also like to be able to change the title fonts and make them bold and/or bigger. I see the codes, but how do I insert it between the <h2> ?

=== Just change it here for your gallery top, or add similar code into the proper section you wish to control:
font-size: 12pt;
font-weight: normal;
TO
font-size: 15pt;
font-wieght: bold
Notice I haven't added a certain amount of space, since it's unimportant.

And the writing below that - why does it now show any code and yet it shows up properly, as long as I write it in the description box?

=== CSS Style Sheet Code controls the overall look of every gallery the style sheet is placed. A simple explanation is the HTML added to the description area overlays on top of it, and must be done in each gallery, allowing versatility in formatting.

I also looked at Thierry's nice graphic explanations, but even those do not actually show you HOW to insert them, where, in what way, in what order with the correct < >.
=== Simple, really. In the CSS, you just add the lines within the section you want to control. The order isn't really important, it can be added at the top of the section above the first line, or after the last with the same effect. Brackets such as the <> should always be copied the same as you see them in the HTML. There's not spaces between them usually. ie: <br> or <center> The number of spaces coming after the code isn't important. Avoid adding additional blank lines, since auto formatting may read it as additional breaks. Browsers read code differently too, so it's good to check your pages with IE, and Firefox so they'll look okay to the majority of people using different ones. Screen Resolution can also play tricks. If you write your page using a resolution of 1024, and someone else views it at 800 they might have to scroll to see it all.

It would be nice if someone could show exactly how the code should be written into the "description" box. But then why does the Root Gallery not have a "Title" box like the other galleries do?
=== Just the way Pbase is formatted. Usually, it's best to write a separate sheet for the Root gallery.

Also - why is it that some of my galleries end up with the "A" sub-gallery links at the top of my galleries and some not? I have the sub-gallery thing selected at the root, is that enough, or do I have to go through my entire collection and select it at each place?
=== It must be selected in each gallery when you set it up, or go back and make the change later.

Basically, it takes playing with it to learn. Don't over-think, just use a hidden gallery and play with it. The reason there's not specific talk about adding changes is because it's not as difficult as you're making it. Most people use Firefox with Web Developer to make changes, then copy & paste them into their CSS, or HTML. This allows you to see changes in "real time" without actually affecting the code in the gallery. If you're not doing it this way, read the "sticky" posts at the top of this forum. Srijith, Arjun, Matias and others adding explanations have gone to a lot of trouble to make it easy for others like myself to learn. It just takes a little time, have fun and keep at it. You'll get it!

[yoshyosh]

So I try to insert the "code" to make it work like it shows, but I have no idea how to insert it, so most of the time the actual code writing comes out on the page! I don't understand how to actually insert the A, the h, all the other stuff.

== Did you click the box under the description area that says, "click here if using html. uncheck for automatic formatting"?

Yes, I have. So is that where all the code is inserted, and then the computer makes the code work?

So far, I was able to move the title text to the middle, and I figured out how to add a second line to the black bar title, but that's it. But when I moved it the middle, it changed colour and the size of the font! I thought it would stay the same size and colour as it was, since I didn't specify it to change!

== The H2 controls the text at the top:
h2
{
font-size: 12pt;
font-weight: normal;
text-align: right
letter-spacing: 8px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: -10px;
margin-right: 0px;
background-color: black;
color: #cccccc;
=== As you see, it has a color designated. When I check it, it does not change when moved to center. I might be misunderstanding which section you mean?
If it's within a different area, just add the color designation into the section you're tweaking.

OK, right. But see, I still do not understand how or where I insert this code. The TEXT at the top, or is the TITLE at the top? You see where I'm confused? The root gallery title/descritions are in the same box. But once you go to the subgalleries, the title is in one box, and the descrition is in another.
Do I need to do this in the "decription" box, or do I need to do this over by the CSS edit page? OK. If you look at my Root Gallery where all my galleries are accessed? You see the title at the top is in the middle? I was able to do that. But the Font colour is yellow, and the font size is smaller than what the original Stylesheet did, by itself. So if you go to my other pages, you see the Stylesheet without any tweaks - my title is on the right hand side of the page, and the font is white, and it is of a certain size and font.
I see your code above. Do I insert this into the "description" box now, or does it go to the CSS editor page?

Anything else I try to do with the title, I have no idea how to insert them actual code words with <> and things like that, and I don't understand how the { and : are all separated so far from each other, and how many spaces I need to leave between ; and }, and why the } has to be on the next line, etc etc............ and do I need the <>???

=== If you want to reduce the space between lines (example: on your root gallery title) you need to reduce the "padding". In the above code, change padding: 5px, to 1 or 2. The { are used to divide sections of the CSS, and should be left in place, making changes after them within the section code. The number of spaces between { and: aren't important... once you click update, Pbase re-rights the code, and that changes the number of spaces. The entire code could be written on one line, and it would probably still work fine. Breaking it up helps see what you're doing is all.
The <> Brackets are used in the description area for HTML, and aren't generally used in the CSS section if memory serves me. The codes are a different language. The CSS code must be placed in your style sheet section, HTML in gallery/photo description.

But the <> is how I was able to move the title to the middle! I used the code p align="center" with the <> on the ends, and the thing moved to the middle. Also, if you goto the subgalleries, the edit pages have a line for the title, and a line for the description, when the root gallery page doesn't. So I do not understand how to manipulate the subgallery pages, if the edit boxes are different - if you get my meaning?
This is how my code looks on the Root gallery decription box:
<h2>
<p align="center">



Every place I go to for explanations seem to show how it's done, but no one explains how to INSERT this into the PBase description box. No one seems to explain why the certain symbols I have described in the above have to be (or not have to be) spaced out in a certain way and why (or why not).

=== The more code you look at, the easier it becomes. Just reproduce how it looks when you see it, and you'll get the hang of it.
I know. But honestly, I wish I could find where the CSS code is, to the sample stylesheet that I use. I just want to see the whole thing written out, so I can see how it is inserted. For example, I don't see where I could edit the titles in the subgalleries. I tried to insert some code into the box for the "title" but it won't let me. So how do I manipulated that title? I then go to edit CSS, but it always only asks me to title a new CSS, but won't let me edit the sample one I'm already using? See what I mean?

If you look at some of my pages, I write a lot. But the writings sort of run-on and expand with the pages. I want to make them not touch the edges of the pages, so that the paragraph endings are clear, so that the sentence endings are clear.

=== I'd suggest adding a "table" into the description area, and place your text within it. This allows you to set margins, so it doesn't run to the edge:

<center> <table width=60 border=0 cellpadding=7> <tr><td>
Your Text goes here
</td></tr></table></center>
You can also add a border by changing border=0 to =1,2, 3...
To separate paragraphs, just hit your space and enter keys when adding the text. If it doesn't format automatically, then you can add a break <br> between lines, or a paragraph <p> where needed.

This I understand. I just simply take your code above and insert it to the description box, check the HTML, and move the numbers around to suit what I want, and it works. Thanks.


I would also like to be able to change the title fonts and make them bold and/or bigger. I see the codes, but how do I insert it between the <h2> ?

=== Just change it here for your gallery top, or add similar code into the proper section you wish to control:
font-size: 12pt;
font-weight: normal;
TO
font-size: 15pt;
font-wieght: bold
Notice I haven't added a certain amount of space, since it's unimportant.

[and this is where I get lost. Where does this go? For the root I understand, but for the subgalleries........ the titles are separated from the description box! [/color]

And the writing below that - why does it now show any code and yet it shows up properly, as long as I write it in the description box?

=== CSS Style Sheet Code controls the overall look of every gallery the style sheet is placed. A simple explanation is the HTML added to the description area overlays on top of it, and must be done in each gallery, allowing versatility in formatting.

I also looked at Thierry's nice graphic explanations, but even those do not actually show you HOW to insert them, where, in what way, in what order with the correct < >.
=== Simple, really. In the CSS, you just add the lines within the section you want to control. The order isn't really important, it can be added at the top of the section above the first line, or after the last with the same effect. Brackets such as the <> should always be copied the same as you see them in the HTML. There's not spaces between them usually. ie: <br> or <center> The number of spaces coming after the code isn't important. Avoid adding additional blank lines, since auto formatting may read it as additional breaks. Browsers read code differently too, so it's good to check your pages with IE, and Firefox so they'll look okay to the majority of people using different ones. Screen Resolution can also play tricks. If you write your page using a resolution of 1024, and someone else views it at 800 they might have to scroll to see it all.

It would be nice if someone could show exactly how the code should be written into the "description" box. But then why does the Root Gallery not have a "Title" box like the other galleries do?
=== Just the way Pbase is formatted. Usually, it's best to write a separate sheet for the Root gallery.

Also - why is it that some of my galleries end up with the "A" sub-gallery links at the top of my galleries and some not? I have the sub-gallery thing selected at the root, is that enough, or do I have to go through my entire collection and select it at each place?
=== It must be selected in each gallery when you set it up, or go back and make the change later.

Basically, it takes playing with it to learn. Don't over-think, just use a hidden gallery and play with it. The reason there's not specific talk about adding changes is because it's not as difficult as you're making it. Most people use Firefox with Web Developer to make changes, then copy & paste them into their CSS, or HTML. This allows you to see changes in "real time" without actually affecting the code in the gallery. If you're not doing it this way, read the "sticky" posts at the top of this forum. Srijith, Arjun, Matias and others adding explanations have gone to a lot of trouble to make it easy for others like myself to learn. It just takes a little time, have fun and keep at it. You'll get it!

Well, thanks anyway. You lost me at Web Developer and what that means to HTML in Firefox. hahaha
Either way, I learned a couple of things here.
One thing though (and I also posted a separate thing with this question) - I am still confused as to why my pages are doing certain things and others not - without me messing with it! I still think there is a glitch in the way the galleries were uploaded and tagged. Some of my subgallery links at the top of the page correspond to the correct links within that subgallery, but others only show the main subgallery titles. Why does it do that? I didn't touch anything except for the boxes presented to me to check off.
Thanks