Editing Themes with Desktop Software

  • PeterNYC

    (@peternyc)


    11 years, 5 months ago

    Hi there,

    I’m one of the millions of people who want to make their content wider.

    Using firebug, I *think* the width of content is controlled by this:

    ...
</header>
<div class="entry-content content">
...

    but maybe it’s also this:

    <div class="holder">

    or maybe this:

    <div id="content" role="main">

    The point is, I’m just guessing. All these divs seem to point to the same rectangle on the screen. I have no idea what each one REALLY does other than the fact that firebug tells me their content is the same width of the rectangle which I want to make bigger. I have a vague idea that I want to edit a “width” or perhaps a “margin” attribute of a div element.

    So right now, I’m pointing to div elements, looking for a width attribute that’s an absolute number, modifying it, and seeing what the end result looks like. It feels like I’m going around in circles.

    It’s nice having a live preview, but there has to be a better way to do this.

    What desktop software and/or plugins can I use to get a better idea of what each CSS class controls?

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • stephencottontail

    (@stephencottontail)

    11 years, 5 months ago

    There’s really no “standards” for CSS classes, in the sense of “class X always refers to element Y”. Theme authors use whatever IDs and classes make the most sense for them. Your best bet is to keep experimenting with Firebug. Also check out: http://www.themesandco.com/snippet/firebug-best-spent-6-minutes/

    Thread Starter PeterNYC

    (@peternyc)

    11 years, 5 months ago

    I don’t suppose you have a more advanced video that you like? This one just shows how you inspect elements. This video is far too basic to be useful.

    My problem is that there are multiple divs that point to what is seemingly the same rectangle on the screen. When I change certain widths, things will happen like the sidebar will float off the page. Or it will open up space between the content and the sidebar. After 20 minutes of fiddling, I still don’t know what div is responsible for the content to become wider.

    Is there a way to visualize the hierarchy of divs on a page at the same time with maybe a little space between the borders so I can get a bird’s eye view?

    For example, I created a little test post (I’m brand new to WP and wanted to see what it can do) here:

    http://repeatedpatterns.org/?p=4

    I can see that “wrapper” contains the entire screen.
    Underneath that is w1 which also contains the entire screen.
    Underneath that is header which has screen width but header height.
    Underneath that is header-holder which has content width but header height. Changing this changes the site header width.
    Underneath that is nav-block, which changes the page header width.
    Under that is “main” which changes the content and sidebar width (but each retains its original width)
    Under that is two columns, which looks the same as “main”.

    This is what I’ve been doing, but I can’t seem to get the actual content itself, let’s say the number of characters of content that appear on a single line on the browser screen, to increase.

    Any advice?

    stephencottontail

    (@stephencottontail)

    11 years, 5 months ago

    On your site, #main is set to a width of 1020 pixels, so the width of your content area plus the width of your sidebar plus the width of any space in between can’t be larger than 1020 pixels. As you’ve seen, you can change the width of #main, but the content area and sidebar retain their original width because their widths are also specified in pixels.

    What’s probably tripping you up, though, is that your theme unnecessarily specifies the width of the content in three different areas: #content, .holder, and .post-body are all set to a width of 600 pixels, so you need to explicitly edit the width in all three areas to see any difference. The relevant lines in your stylesheet are 2944, 930, and 1013.

    Thread Starter PeterNYC

    (@peternyc)

    11 years, 5 months ago

    Stephen, thank you!

    But more importantly — how were you able to determine that?

    I mean, I get the implication of having #main width to 1020px (content + sidebar + space in between), but there’s a ton of selectors that have a hard-coded value of 600px:

    .post-box .holder {
    width: 600px;
    }
    .post-box-bottom {
    width: 600px;
    height: 31px;
    margin: 0 0 25px;
    }
    .post-box .text-holder-s {
    width: 600px;
    font-size: 14px;
    color: #4b677d;
    }

    How were you able to home in on the right ones? The post-box selector totally passed by me. Do you visualize the div elements? Or do you rely solely on Firebug’s inspector?

    I found a plugin called Tilt that’s *almost* helpful. If there was a way to suppress, say, child div’s greater than a certain number, it could be really powerful to help visualize the CSS layout.

    stephencottontail

    (@stephencottontail)

    11 years, 5 months ago

    Hmm. This is a bit like asking the centipede what leg he moves first, but I’ll give it a shot.

    One thing I do that helps me a lot is to put temporary 1 pixel borders of a highly contrasting color on all the elements that I’m working with. If it’s a particularly thorny problem, I’ll start using different colors so I can see exactly where all the sections begin and end. Also, if you have a big enough monitor, try positioning Firebug’s window so it doesn’t overlap the browser window at all. When you hover your cursor over the Firebug window, Firefox will highlight the corresponding section on the page, along with the margins and the padding, so you can see exactly what’s being placed where.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Editing Themes with Desktop Software’ is closed to new replies.