Assistance with CSS editing of Libretto theme

  • Unknown's avatar
    hs2fr · Member ·

    Hi,

    I’m looking to customize my new WordPress site. I’m using Google Chrome on Windows 7. After following the WP tutorial, I was able to figure out how to adjust the font size through a hacky way (by changing the relative scaling from 100% to 99%), by using Chrome’s element inspector.

    I’m still struggling:
    1. to adjust the width of the text box though. Presently, it only occupies the middle 50% of the screen, whereas I’d like to expand the text area into the margins.
    2. It would also be nice to create a “widget” on the right-hand space with post categories and recent posts.
    3. Decreasing the white space with the post title and post excerpt.

    Any hints on how to accomplish the above three objectives? I’ve been wrestling with Chrome’s element inspector for about an hour and would like to seek the community’s help to avoid investing a few more hours…

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    omkarbhagat · Member ·

    Hi,

    Glad to know you’ve tried to do stuff on your own. I’ll try to help you with the questions you asked –

    1) Adjusting the text box width –

    Currently the max-width is set to 680px. You can change it though using the following code:

    #content { max-width: 900px; }

    for questions 2) and 3), I don’t fully understand what is it that you need but I’ll try to answer 3rd question.

    3) Reducing the space between post title and post excerpt –

    Try changing the margin-bottom and padding-bottom of entry-header class.

    .entry-header, .title-block {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

    I hope this helps you (or at least gets you started to experiment a bit more to get what you want). Good luck :)

  • Unknown's avatar
    hs2fr · Member ·

    Hi omkarbhagat,

    Thanks! All of your solutions accomplished exactly what I was trying to achieve. Did you figure that out by using the Chrome element inspector or some similar tool from another browser, or from a strong foundation in CSS? I’d like to eventually be able to answer my own questions :)

    To clarify: “2. It would also be nice to create a “widget” on the right-hand space with post categories and recent posts.”

    I would like to add a column on either the left or right (perhaps both) side of the post text. WordPress considers these “widgets,” which the default theme positions at the bottom of my page. I’d like a “text widget” showing the categories of my published posts and the posts for each category.

    TEXT WIDGET Definition:
    “A text widget allows you to add text or HTML to your sidebar. You can use them to display text, links, images, HTML, or a combination of these. Edit them in the Widget section of the Customizer.”

  • Unknown's avatar
    omkarbhagat · Member ·

    Hi again,

    Thanks for explaining your point 2. To do something like that is not that difficult but it’s complicated. I mean, you have to do trial and error till you get it perfect.

    I’ll try to explain –

    Your theme’s HTML structure looks like this –

    <div id="primary" class="content-area">...</div>
<section id="footer-sidebar" class="clear widget-area" role="complementary">

    <div id="sidebar-1" class="widget-block">..</div>
    <div id="sidebar-2" class="widget-block">..</div>

</section>

    content-area = what you called the text-box in your original post.
    footer-siderbar = a container which wraps sidebar1 and sidebar2.

    Because of that structure you cannot bring sidebar1 or sidebar2 outside of footer-sidebar (unless you alter the HTML structure, which isn’t possible on wp.com as far as I know).

    But what we can do is, reduce the width of content-area and try to squeeze in footer-sidebar to the right side of the content-area.

    So one way to do this is –

    1) Make the content-area float:left and width:600px
    2) Make the footer-sidebar float:left and width:400px
    3) Make sidebar-1 have width:300px
    4) Make sidebar-2 have width:300px

    Here’s the sample code –

    .content-area { float:left; width:600px; }
#footer-sidebar { float:left; width:400px; }
#sidebar-1 { width:300px; }
#sidebar-2 { width:300px; }

    Mind you, this is not perfect. You have to experiment to get the desired result. But surely this can get you started.

    And for your other question –

    I have been a front end developer, so I know a considerable amount of CSS. I still have to learn it in detail but I think what I know is sufficient to solve this particular problem haha :)

    You can surely use inspect element to select elements on the page and then alter their CSS ..just to see what results you get on the page. This is a fun way to learn HTML and CSS.

    I’ve spent majority of my time modifying web pages using the “inspect element” in chrome just for fun. ;)

  • The topic ‘Assistance with CSS editing of Libretto theme’ is closed to new replies.