View Full Version : Please help me with CSS code...am really lost


Iroc
03-26-2013, 10:17 PM
Hello guys/gals

:help:

Have been lurking this forum for a while now, mostly looking for answers since am no expert when it comes to CSS and all stuff digital :o

I cant seem to figure out the CSS and how it cascades, I really get lost.

Made me some basic style sheet but its not doing what I would like it to do

I'll past it at the end. If there is a kind soul out there that could finish it for me I would be really happy (new year style happy).

Here are my wishes:
-I want it to start the first letter of the first paragraph in a chapter with a huge bold letter (http://epubzengarden.com/?style=modern1#/static/middlemarch/OEBPS/chapter1.html) like this.
-I want it to not indent only the first paragraph and indent all the rest for easier reading.
-I want it to have some kind of code for italic part and that the margin is set to lets say 1/4 of the page width or something that looks esthetic. For quotes and similar
(http://epubzengarden.com/?style=modern1#/static/middlemarch/OEBPS/chapter1.html) text under chapter I

Here is the code :smack: (and don't laugh) :rofl:

p{
color:black;
text-align:justify;
font-family:arial;
font-size:16px;
margin-left:2px;
margin-right:2px;
text-indent:10px;
letter-spacing:0px;
word-spacing:3px;
line-height:100%;
}

h1{
color:black;
text-align:center;
font-family:arial;
font-size:30px;
letter-spacing:0px;
word-spacing:3px;
line-height:100%;
}

h2{
color:black;
text-align:center;
font-family:arial;
font-size:25px;
letter-spacing:0px;
word-spacing:3px;
line-height:100%;
}

h3{
color:black;
text-align:center;
font-family:arial;
font-size:20px;
letter-spacing:0px;
word-spacing:3px;
line-height:100%;
}

All the help is appreciated.

theducks
03-27-2013, 11:55 AM
If you go to the 'Contribute' tab at Zen Garden http://epubzengarden.com/contribute/

You will find the links to the Book files and CSS in the first paragraphs.

IMHO Reverse engineering is a great way to learn. (Now if I could some real artistic talent, I would be good to go ;) ):(

Iroc
03-27-2013, 12:31 PM
I tried. Not just once but like 20 times and nothing.
Tried couple of tutorials online too.
Like I said I get lost when it comes to digital stuff that is complicated.

I only need the style sheet to transform all the books I download into one single style (since bought books have so many things screwed up).
And I don't have lots of time to learn new stuff ATM.

So if someone is willing to help me out...I will be grateful.

All the best.

theducks
03-27-2013, 12:48 PM
you may be confused about what a stylesheet IS.

It is a specific PARTNER to the books HTML, not a broad brush that can be applied to ALL HTML.

Drop Caps are a great example: they are coded in both the CSS: how to position and styling and the Text (HTML): What to Style
<p><span style="dropcap">D</span>rop Cap</p>

travger
03-27-2013, 01:50 PM
I tried.
I only need the style sheet to transform all the books I download into one single style (since bought books have so many things screwed up).


It's like wanting to build both spaceship and motorcycle from Lego blocks, using the same instructions.

Take a look at the Project Gutenberg, I've found their epubs to be quite basic, modifying them has teached me a lot.

Iroc
03-27-2013, 02:37 PM
I still don't get it...:(

Link me please to the tutorial that has everything explained and that is for free.
I suppose I will have to learn HTML and CCS or ill just let the books be lifeless as they are...

thx for help

theducks
03-27-2013, 02:51 PM
I still don't get it...:(

Link me please to the tutorial that has everything explained and that is for free.
I suppose I will have to learn HTML and CCS or ill just let the books be lifeless as they are...

thx for help

W3schools http://www.w3schools.com/

HTML Dog http://htmldog.com/

Here at MR http://wiki.mobileread.com/wiki/CSS_HowTo

Iroc
03-27-2013, 04:18 PM
thanks...

visited W# but couldn't figure out most of he thing there
got the HTML dog book, will start reading it tonight and see what its all about :)

thanks for the answers

take care

Jellby
03-27-2013, 05:15 PM
-I want it to start the first letter of the first paragraph in a chapter with a huge bold letter (http://epubzengarden.com/?style=mode.../chapter1.html) like this.

span.drop {
font-weight: bold;
font-size: 300%;
}

and in the HTML:

<p><span class="drop">T</span>his is the first paragraph of the chapter.</p>

-I want it to not indent only the first paragraph and indent all the rest for easier reading.

h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
text-indent: 0;
}

and make sure the chapter headings are indeed marked with <h1> to <h6>

-I want it to have some kind of code for italic part and that the margin is set to lets say 1/4 of the page width or something that looks esthetic.

Use <i> for italic.

For the margin:

@page {
margin: 25%;
}

but I'm sure that's not what you want.

exaltedwombat
03-28-2013, 06:53 AM
Be careful about large initial caps unless you're making books for only you to read on a known devices. Unfortunately readers that don't display them well don't just ignore them.
Also beware of deep indents. Reader screens at default font sizes are not wide. 'White space' layouts aren't effective. You just get nasty line-breaks and hyphenations.
Anyway, he doesn't want the WHOLE book indented, just the italic passage.

mrmikel
03-28-2013, 08:11 AM
One way to try to figure things out is to download a book from the library here at mobileread.

Open it up in Sigil and look at what items are in the stylesheet under Styles in the book browser to the left. Open up w3schools in your browser and search there for each item you see in in the stylesheet.

You might look at Three Men in a Boat, since it has a lot of formatting that works on many devices. You could just copy and save the stylesheet from it (by right clicking) and add additional files for this stylesheet to the book you are working on. You will need to highlight all the html files in your book and right click to link stylesheets, and tick the stylesheet you just added and ok, to link the stylesheet you just added to your book's files.

Then open Three Men and see in book view where you like something. Then select code view and see how they did it. Then you can try the same thing in your book (since you added Three Men's stylesheet to it, it should work.)

If this sounds like a lot of work, it is going to be some because Sigil is not a word processor. It lets you edit the html that underlies epubs and book view lets you see it and work on some of it in book view.

It might be easier to copy the stylesheet from Three Men and add it to a new blank epub and type a few words. Try applying some of the styles you like to these few words and see how things work. It might be less confusing in the beginning.

exaltedwombat
03-28-2013, 08:30 AM
Some people here will hate this, but also be very aware of how it converts to Kindle formats. We won't re-open the old argument about which format has the mass market, but Kindle is certainly a substantial one.

mrmikel
03-28-2013, 08:47 AM
Which is why creation of epubs is not likely to ever been entirely simple, unless you are making them just for yourself. For yourself, the sky is the limit. 25 fonts, 15 text sizes, wahoo!

theducks
03-28-2013, 11:08 AM
Which is why creation of epubs is not likely to ever been entirely simple, unless you are making them just for yourself. For yourself, the sky is the limit. 25 fonts, 15 text sizes, wahoo!

:eek: Now that violates what I was taught in Print shop (Cold and Hot type) in High School.
A document should have no more than 6 fonts (I take that to mean, Font Families) or it becomes too busy.

Ad Art excepted ;) as Busy is what they want.

travger
03-28-2013, 12:50 PM
Books here in MR library tend to be rather nicely formatted (well, I've peeked into few outright beautiful ones). But it includes some quite advanced and complicated code that could be too much for a beginner.

Gutenberg epubs are much simpler (less classes) and often not formatted to my liking. So the problem becomes 'I need to find out how to make this happen' instead of more impersonal 'how did s/he do it'.

If you change css in Sigil, then preview window shows the result right away - very handy.

JSWolf
03-28-2013, 12:53 PM
Why hasn't this thread been moved to ePub when it's not about Sigil at all? I did report it and yet it still remains in the wrong place.

theducks
03-28-2013, 01:33 PM
Why hasn't this thread been moved to ePub when it's not about Sigil at all? I did report it and yet it still remains in the wrong place.

Who did you report it to?
A PM to one of the Sigil Mods (for this forum) would get faster response.

BTW I Agree
Moving to EPUB, Not a Sigil specific issue

exaltedwombat
03-28-2013, 02:14 PM
Which is why creation of epubs is not likely to ever been entirely simple, unless you are making them just for yourself. For yourself, the sky is the limit. 25 fonts, 15 text sizes, wahoo!

Which is why design of epubs SHOULD be simple :-)

exaltedwombat
03-28-2013, 10:30 PM
:eek: Now that violates what I was taught in Print shop (Cold and Hot type) in High School.
A document should have no more than 6 fonts (I take that to mean, Font Families) or it becomes too busy.
.

Make that two :-)

dgatwood
03-30-2013, 02:08 AM
:eek: Now that violates what I was taught in Print shop (Cold and Hot type) in High School.
A document should have no more than 6 fonts (I take that to mean, Font Families) or it becomes too busy.


For a small document, sure. But books can handle more than that because of their size. For example, your title page need not use the same font as other pages in the book. Your chapter heads often get significantly different styles. Drop caps. Small caps. Heading along the top. And you're right at six without doing anything even remotely fancy with the body text, sidebars, etc.

theducks
03-31-2013, 05:45 PM
For a small document, sure. But books can handle more than that because of their size. For example, your title page need not use the same font as other pages in the book. Your chapter heads often get significantly different styles. Drop caps. Small caps. Heading along the top. And you're right at six without doing anything even remotely fancy with the body text, sidebars, etc.

I would consider Each 'EPUB Page' within a book a 'Document'

Titlepage
Chapter(s)
TOC

Most chapters have how many different?
Chapter number
Chapter sub-title
Drop/Initial Cap
the basic body text
Special-case text: Ransom notes, headlines...

In many cases, they are just a size/weight change, not a separate face.

Iroc
03-31-2013, 06:42 PM
span.drop {
font-weight: bold;
font-size: 300%;
}

and in the HTML:

<p><span class="drop">T</span>his is the first paragraph of the chapter.</p>



h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
text-indent: 0;
}

and make sure the chapter headings are indeed marked with <h1> to <h6>



Use <i> for italic.

For the margin:

@page {
margin: 25%;
}

but I'm sure that's not what you want.

Thank you.
Especially for the span part :) saved my life with that.