Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 03-26-2013, 09:17 PM   #1
Iroc
Junior Member
Iroc began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Mar 2013
Device: Kobo Glo
Please help me with CSS code...am really lost

Hello guys/gals



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

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=mode.../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=mode.../chapter1.html) text under chapter I

Here is the code (and don't laugh)

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.
Iroc is offline   Reply With Quote
Old 03-27-2013, 10:55 AM   #2
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,689
Karma: 54369090
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
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 )
theducks is offline   Reply With Quote
Old 03-27-2013, 11:31 AM   #3
Iroc
Junior Member
Iroc began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Mar 2013
Device: Kobo Glo
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.
Iroc is offline   Reply With Quote
Old 03-27-2013, 11:48 AM   #4
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,689
Karma: 54369090
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
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
Code:
<p><span style="dropcap">D</span>rop Cap</p>
theducks is offline   Reply With Quote
Old 03-27-2013, 12:50 PM   #5
travger
Evangelist
travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.
 
travger's Avatar
 
Posts: 480
Karma: 270594
Join Date: Aug 2010
Device: palm tx, Windows7, Galaxy A5
Quote:
Originally Posted by Iroc View Post
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.
travger is offline   Reply With Quote
Old 03-27-2013, 01:37 PM   #6
Iroc
Junior Member
Iroc began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Mar 2013
Device: Kobo Glo
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
Iroc is offline   Reply With Quote
Old 03-27-2013, 01:51 PM   #7
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,689
Karma: 54369090
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
Quote:
Originally Posted by Iroc View Post
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 https://wiki.mobileread.com/wiki/CSS_HowTo
theducks is offline   Reply With Quote
Old 03-27-2013, 03:18 PM   #8
Iroc
Junior Member
Iroc began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Mar 2013
Device: Kobo Glo
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
Iroc is offline   Reply With Quote
Old 03-27-2013, 04:15 PM   #9
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
-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.
Code:
span.drop {
  font-weight: bold;
  font-size: 300%;
}
and in the HTML:

Code:
<p><span class="drop">T</span>his is the first paragraph of the chapter.</p>
Quote:
-I want it to not indent only the first paragraph and indent all the rest for easier reading.
Code:
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>

Quote:
-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:

Code:
@page {
  margin: 25%;
}
but I'm sure that's not what you want.
Jellby is offline   Reply With Quote
Old 03-28-2013, 05:53 AM   #10
exaltedwombat
Guru
exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.
 
Posts: 878
Karma: 2457540
Join Date: Nov 2011
Device: none
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.
exaltedwombat is offline   Reply With Quote
Old 03-28-2013, 07:11 AM   #11
mrmikel
Color me gone
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
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.
mrmikel is offline   Reply With Quote
Old 03-28-2013, 07:30 AM   #12
exaltedwombat
Guru
exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.
 
Posts: 878
Karma: 2457540
Join Date: Nov 2011
Device: none
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.
exaltedwombat is offline   Reply With Quote
Old 03-28-2013, 07:47 AM   #13
mrmikel
Color me gone
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
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!
mrmikel is offline   Reply With Quote
Old 03-28-2013, 10:08 AM   #14
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,689
Karma: 54369090
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
Quote:
Originally Posted by mrmikel View Post
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!
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.
theducks is offline   Reply With Quote
Old 03-28-2013, 11:50 AM   #15
travger
Evangelist
travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.travger ought to be getting tired of karma fortunes by now.
 
travger's Avatar
 
Posts: 480
Karma: 270594
Join Date: Aug 2010
Device: palm tx, Windows7, Galaxy A5
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.
travger is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
epub code snippets (html / css) zelda_pinwheel ePub 196 10-09-2016 04:21 AM
Lost in CSS for a motto Artha ePub 1 12-01-2011 02:43 AM
CSS code for different screen sizes? clemens14 ePub 2 09-12-2011 07:37 PM
css override code for margins? Amalthia Calibre 15 08-11-2009 07:20 PM
css override code for <h2> and <h1> tags Amalthia Calibre 2 03-29-2009 06:51 PM


All times are GMT -4. The time now is 02:34 AM.


MobileRead.com is a privately owned, operated and funded community.