Need help? Check out our Support site, then


WordPress.com Forums » Support

Intents fight with scroll bars.

  1. iebatest
    Member

    I will take a break from this page today:
    http://iebatest.wordpress.com/engineering/
    Because, otherwise, I'll put my fist through the screen.

    SacredPath thankfully put me on to http://wpbtips.wordpress.com and there I've found solutions for issues that have plagued me for years. One is how to indent paragraphs.
    The site recommends: <div style="text-indent:2.3em;"> which works. There's also the vertical space between the paragraphs that I'd really like to kill, but I figured I'd tackle that down the road. Using the shift-return eliminates the vertical space, but this trick also loses the paragraph indent. :(

    Then the page got really long and I wanted to keep it so the scrolling happened within the screen, so my logo and contact info on the header was always in sight. So I found this to add a scroll bar: <div style="padding: 3px; overflow: auto; height: 500px; white-space: pre-wrap;"> which works.

    But the scroll bar doesn't like the paragraph indent, or _something_, because now I have an extra carriage return or two after each and every paragraph on the page. It's like I don't know how to lay out a page. I've tried going through and deleting all the extra carriage returns in both HTML and Visual views and they ALWAYS come back when I update the page.

    I'm just trying to go for some basic, simple, clean text here and it's like I'm wrestling a greasy king king cobra snake when I work in WordPress. Adding X always messes up two other things and I spend, literally, HOURS trying to make it work.

    Do I have to lose the scroll bar to keep the paragraphs happy? I'd really like to keep both, AND tighen up the space between the paragraphs.

    The blog I need help with is iebatest.wordpress.com.

  2. iebatest
    Member

    I meant that inDents fight with scroll bars.

  3. panaghiotisadam
    Member

    In my opinion, scrollbars in posts destroy the design of the theme. To limit the length of a post in the front page, I suggest you try either of these:

    http://support.wordpress.com/splitting-content/more-tag/

    http://support.wordpress.com/splitting-content/nextpage/

  4. panaghiotisadam
    Member

    "Using the shift-return eliminates the vertical space, but this trick also loses the paragraph indent. :("

    Not exactly: in that case you just have to apply the code to each paragraph (I mention that in my post).

  5. iebatest
    Member

    The main reason I wanted to use a blog, instead of a standard web site design tool, was because I wanted the majority of the authoring automated. I wanted to type my content and have it look good- not have to spend countless hours going into the bare HTML fixing what the blog can't seem to get right on its own.

    I'm talking about basic text, then I add one thing to force a scroll bar and then every paragraph gets double or triple return carriages. That's pure and utter stupidity that shouldn't happen.

    I understand about the "more" tag, but it doesn't work for a _page_, it works for individual blog posts, which is not what I'm doing here. I also disagree about the scroll bars in the design of a theme. I specifically wanted to do this because I see many corporate sites designed to fit on a single screen and have flash or java elements within that window that require scrolling for more content. The problem is that they don't respond to a scroll wheel- you have to click the scroll tab and drag it, which it a PITA. This blog scroll DOES work with a mouse scroll wheel, and it keeps my contact info in front of potential clients 100% of the time.

    I'm wondering if I need to dump this build (the second in two days) and start over with a theme that offers NO set navigation, and do my navigation with a category widget- which is uber clunky, but would allow me to add, change or delete individual items and not have to worry about screwing up the "flow" of a whole page which is what is constantly happening now. Of course, the uber clunkiness of those search result pages means there's no "flow" to disrupt. It will all look crappy- which is what I was hoping to avoid.

  6. thesacredpath
    Member

    @iebatest, I've been playing with your code and the text etc. for that scroll box and there are issues with it. I don't have the time right now to go through all of it and straighten it up, but a little later tonight I will tackle it and see what I can come up with for you.

  7. panaghiotisadam
    Member

    Scrollbox + first line indents (without the extra space side effect) + main color:

    <div style="color:#99ccff;overflow:auto;height:500px;text-indent:2.3em;padding-right:10px;">
COMPLETE_CONTENT_HERE
(With no indenting tags for each separate paragraph, and with color span tags for headings only.)
</div>

    Also note that when you apply multiple elements of style to the same text, you do it with one tag, e.g.
    <span style="text-decoration:underline;color:#ccffff;">TEXT_HERE</span>

    (But personally I would avoid having the headings underlined: makes them look like links.)

  8. raincoaster
    Member

    I have to say that unless you are a graphic designer it's unlikely you will be able to come up with a design which is an improvement on the existing themes. I've seen many, many adaptations and only a handful of people are talented enough to actually improve them.

    If you really believe you have the talent to improve the themes, the practical way to do this would be to learn CSS and make the code changes in your blog just once; then they would apply always.

  9. iebatest
    Member

    Panaghiotisadam. Thank you for bearing with me and understanding my need, and pointing out the obvious.
    I see!!! (he says as his eyes open....)
    And, THEN, I found the note that says that text attributes need to be combined into a single DIV, not multiple.

    Note on coding: when you want to apply multiple commands to the same chunk of text, you combine the relevant pieces of code within the same “div” or “p” tag. For example:

    ooooooooooooo...

    Then I tried decreasing the line space, in the same DIV, and it worked.
    In one page: scroll bar, indented paragraphs, tightened text. Wow!

    NEW: Is there a way to _decrease_ paragraph space? I tried adding the "padding-top:1.4em;padding-bottom:1.4em;" and manually decreasing it to 0.7em but it made no difference on the paragraph space, so I think it's being trumped by the CSS.

    NEW: I'd also love to bump up the text size a notch for readability (my target audience is 40's and probably older.)

    NEW: And get rid of the "subpages" horizontal bar that is never used, but always present and wasting space. (probably hard-coded into the theme, eh?)

    Raincoaster, I actually earned a living as a graphic designer for years. :)
    Your note of learning CSS is tempting, per sé, if I could code in what each of the Heading typestyles were and then get my section headers (color, size, style, tracking, etc) completely automated the way _I_ wanted them. If that were the case, it would make the CSS upgrade a no-brainer.

    Panaghiotisadam, as much as I am trying to differentiate the section headers on the Engineering page, I understand what you say about the underlining and have removed it. Hopefully the color and the completely underwhelming "bold" will suffice. Maybe I'll try different "headings" again.

    So, thank you all again and, if there's any advice for those remaining tweaks... please let me know!

  10. devblog
    Member

    iebetatest,

    NEW: Is there a way to _decrease_ paragraph space? I tried adding the "padding-top:1.4em;padding-bottom:1.4em;" and manually decreasing it to 0.7em but it made no difference on the paragraph space, so I think it's being trumped by the CSS.

    don't use the "padding" property in this case, use margin instead. Example: 

    <p style="margin: 0 0 10px;">Lorem Ipsum....</p>

    What that will do is to give a paragraph 10 pixels of space between one another. Unfortunately, you'll have to add the style attribute to each paragraph.

    If you had the CSS upgrade, then that wouldn't be necessary since you'd define the "p" tag properties once and they would be applied throughout your blog.

    Note that I'm using pixels instead of em units for spacing. I recommend when dealing with "spaces" like that you use pixel unites instead. Em units are for fonts.

    NEW: I'd also love to bump up the text size a notch for readability (my target audience is 40's and probably older.)

    In the div tag holding your paragraphs you could add the following property:

    font-size: 1em;

    So your div would look something like this:

    <div style="color:#99ccff;overflow:auto;height:500px;text-indent:2.3em;padding-right:10px; font-size: 1em;">

    Increase the em unit as you see fit.

    NEW: And get rid of the "subpages" horizontal bar that is never used, but always present and wasting space. (probably hard-coded into the theme, eh?)

    I'll go back and check your blog again because I didn't see anything like that.

    --

    Panaghiotisadam,

    That's a very nice tips blog you have there! Congratulations!

    Also, thanks for the link to me blog.

  11. devblog
    Member

    Panaghiotisadam,

    If you don't mind, would you please give me your email address? You can send me an email through the contact form on my SandboxSkins blog.

  12. devblog
    Member

    iebatest,

    I went back to your blog and couldn't find the subpages horizontal bar you talk about... would you make a screen shot or point me to where this bar you speak of is?

  13. iebatest
    Member

    Devblog, Thanks for the quick reply!
    Screen shot here:
    http://iebatest.wordpress.com/files/2009/03/picture-2.jpg

    It's just a lot redundant to have
    Welcome, about, engineering...
    WELCOME
    welcome subpages
    yadda yadda yadda.

    I'd much rather a red tab on the main nav bar over Welcome when I'm in Welcome.
    A sub bage bar can appear when needed, like with Tabbed browsing in the browser.
    And not be there at all when not needed.

    I will try the font size you suggest.
    Can I put the paragraph style into the DIV for the page? (I'll be trying it anyway. :)

    Thanks!

  14. devblog
    Member

    No problem.

    I see what bar you're talking about. Unfortunately, that's part of the template, and to modify it to appear when needed, you'd have to modify the PHP code which is not possible here. Also, you could make it disappear but you'd need the CSS upgrade for that... which wouldn't make it appear even when needed...

    Can I put the paragraph style into the DIV for the page?

    No you can't, otherwise that styling would apply to the div tag only...

  15. iebatest
    Member

    Devblog,
    1.2em for the font size looks good.
    I couldn't get the "p style="margin: 0 0 10px;" to work:
    A) putting "margin: 0 0 10px;" in the DIV
    B) putting the '<p style="margin: 0 0 10px;">' after the DIV and then closing P at the end of the page.
    Both have zero effect.

    But, wow. How far it's come!!!

  16. iebatest
    Member

    Adding the <p style="margin: 0 0 10px;"> to each paragraph manually is not going to happen. And I suspect it'd screw up the effects of the DIV tag, which are ensuring the entire age is neat and orderly with no extra effort on my behalf, which is exactly what I wanted. I can deal with one header which takes care of: - scroll bar, indented text, tightened paragraphs, larger text - all in one fell swoop. AND it still lets me color and bold various headers to break up the text on the page.

    Squishing the space between paragraphs is an extra gimmie. It'd be real nice, but after everyone's help here, it's looking way, way better than it was when I started this thread! And my computer screen is still intact!

    :)

    Devblog, that avitar looks a little like Appleseed, or Nausicaa.

  17. panaghiotisadam
    Member

    @devblog: Thanks!

    @iebatest:

    You're welcome. (I said I wouldn't use a scrollbox, but that doesn't mean I wouldn't tell you how to correct it because I don't agree: it's your blog, not mine!)

    Alternative solution (although in the presence of devblog I should normally keep my mouth shut):

    If you want no extra blank lines between paragraphs, you can write them with single carriage returns, and use this at the beginning of each one for indenting them (in the html editor):
           

    In that case change the initial div tag to this (takes care of the larger font-size too):
    <div style="font-size:120%;overflow:auto;color:#99ccff;height:500px;padding-right:10px;">

    As for the subpages bar, yes it's hard-coded into the theme, if the page has subpages. Where are your subpages?

  18. devblog
    Member

    Try adding the !important rule to your styling, so it looks like this:

    <p style="margin:0 0 10px!important;">Lorem Ipsum...</p>

    That should help.

    The avatar is a Helghast soldier from the VG Killzone 2.

  19. devblog
    Member

    Oh, Panaghiotisadam beat me to it. Try his suggestion too.

  20. iebatest
    Member

    I'll try the <p style="margin:0 0 10px!important;"> again because that will affect the whole page, as opposed to hand coding nonbreaking spaces into the code (ugh!).

    As for subpages, I don't have any.
    I was originally using a different theme with a "home" button and in order for "welcome" to not be redundant in the nav bar, I hid it as a sub page of About. I've since, changed that back so that Welcome is visible in the Nav bar.

    Oddly, Demo videos has no subpage bar.
    Contact page, which was present in the previous theme, also has no subpage bar.
    I'll recheck my pages but this is a bit wierd.

  21. iebatest
    Member

    Devblog, tried "!important" but still nothing. I guess the CSS is ignoring me. :)
    This is what it looks like:

    <div style="color:#99ccff;overflow:auto;height:450px;text-indent:2.3em;line-height:1.4em;font-size:1.2em;padding-right:10px;">
<!--With no indenting tags for each separate paragraph, and with color span tags for headings only.>-->
<p style="margin:0 0 5px!important;">
<strong>Anthony Burokas</strong> has been producing...

    I left the comment in there so I'll know what's going on a year from now. :)

  22. iebatest
    Member

    Oh, and the subpage bar?
    It's not tied to text scrollbars because the Welcome page has it.

  23. iebatest
    Member

    I changed the order number on
    about, engineering, gear and demos.
    Didn't touch Welcome and Contact.

    Welcome, about, engineering still have subpage menu. others do not.

    Will try creating a new page, deleting the old and reordering the newly created page.

  24. iebatest
    Member

    Create new, delete old, re-order the pages works.

  25. iebatest
    Member

    I now just completely revamped the sidebar.
    The graphic designer in me took over because I just couldn't stand how the CSS threw the text on the screen. Aside from the departure of the shade of red, I think it works very well.

    Here's hoping the category sort (the links of which I stole from the widget) work properly with a text widget.

    :)

    Thanks to everyone and I'll mark this one as resolved.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags