Spacing and summary on Truly Minimal

  • esthermariehancock · Member ·

    I’m a CSS newbie but am quickly realising how amazing it is…Just changed to Truly Minimal and wondered if there was any way of displaying a summary of the posts, rather than the full post.

    Also…I’ve adjusted some of the spacing but above my custom header there is still white space. I can’t seem to get it tighter.

    My sidebar also looks to start higher than the post titles. Any way of aligning these?

    Thank you so much,
    Esther

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

  • hallluke · Member ·

    If you want short post summaries in your main blog page you should try using the more tag or setting excerpts as part of each post because this isn’t something that can be done with CSS.

    However, try this to sort out your remaining issues:

    #masthead {
  padding-top:10px;
}

.hentry {
  padding:0 0 3em 0;
}

h1.widget-title {
  margin-top:0;
}
  • esthermariehancock · Member ·

    Woah! That is amazing – thank you so much. How did I not know about the more tag before? I cannot believe it is so easy.

    The spacing has worked wonderfully. Thank you.

    I just have one more question – is it possible to make my categories into the main menu at the top?

    Thanks again,
    Esther

  • hallluke · Member ·

    Hi Esther,

    Have a look at the custom menus feature for adding in page, category and any other type of link into your main navigation menu.

  • esthermariehancock · Member ·

    It is done! I can’t believe it. Thank you. Is there any way of making the menu font smaller so that they all fit on one line please? Then I think I am done!

  • esthermariehancock · Member ·

    It is done! I can’t believe it. Thank you. Is there any way of making the menu font smaller so that they all fit on one line please? Then I think I am done!

  • hallluke · Member ·

    This should work for big screens though it will collapse to two lines on smaller screens like tablets. Change the spacing and font size values if you like!

    .navigation-main li {
  margin-left:8px;
  margin-right:8px;
  font-size:13px;
}
  • esthermariehancock · Member ·

    DONE! Thank you!!!!

  • esthermariehancock · Member ·

    This is definitely the last question…any way of getting the menu and widget headers in black please? Now I’m just being picky. Thank you.

  • hallluke · Member · 
    .widget-title,
.widgettitle,
.navigation-main a {
  color:#111;
}
  • esthermariehancock · Member ·

    Three of the menu headers are still in grey. I’ve tried it a few times and it won’t seem to change the others. Any idea?

  • hallluke · Member ·

    I expect they are pages you have already visited, change the code I gave you to this and see if it helps:

    .widget-title,
.widgettitle,
.navigation-main a,
.navigation-main a:visited {
  color:#111;
}
  • esthermariehancock · Member ·

    Perfect – thank you.

  • esthermariehancock · Member ·

    I would like help with a few things after some feedback:
    – I would like a grey (to match the grey already used) solid line under the menu and between the first blog post.

    – The spacing between the date posted and the start of the post

    – The spacing between the widgets to be equidistant and reduced.

    – The blog post title to be in the same pink as my social media icons. Is this even possible?

    Thank you so much.

    Esther

  • thesacredpath · Member ·

    Hi Esther, the following will get you the border lines below the menu and after each post. I’ve included some padding and margins to space things out a little and also added a bit of top margin to space the content down just a little from the line below the menu. 

    .navigation-main {
    border-bottom: 1px solid #ddd;
}
.hentry {
    border-bottom: 1px solid #ddd;
    margin-bottom: 3em;
    padding-bottom: 1em;
}
.site-main {
    margin-top: 50px;
}

    Widgets: They have a bottom padding and bottom margin and you can use the following to adjust those. On widgets which do not have a title, things will look closer since padding, margins and line heights on the widget titles can also affect spacing. 

    .widget {
    margin-bottom: 1.5em;
    padding-bottom: 1.5em;
}

    On the post titles, your social icons have a gradiated look to them, so I just randomly sampled a spot on them and then darkened it a little since it looked too light. You can of course change it. 

    .entry-title, .entry-title a {
    color: #ccaa99;
}
  • esthermariehancock · Member ·

    Wow! Thank you so much! How do you know all these secrets? It is amazing.

    They all look fabulous!…except I can’t get the post text to move closer to the date of the post?

    I’m having major problems with changing the font. Is it possible to get the menu font the same as the font everything else is in please?

    Thank you

  • thesacredpath · Member ·

    On the space between date and content, there is padding on the bottom of the entry meta (date) and then some margin at the top of the entry content. Let’s start with the following and see what you think of this. 

    .entry-meta {
    padding-bottom: 0;
}

    On the navigation text, this will set the navigation to the same font as the content. 

    .navigation-main a {
    font-family: "Droid Serif","Times New Roman",serif;
}

    I use the web inspector built into my browser and just started poking about and trying different things and seeing how the HTML and the CSS were related. If you haven’t used yours, or are not familiar with its use, we have some short screencasts that will get you started at: http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/ .

  • hallluke · Member ·

    The spacing can be done with a combination of these first two rules, the font can be set with the last one:

    .entry-content {
  margin-top:0;
}

.entry-meta {
  padding-bottom:10px;
}

#site-navigation a {
  font-family: "Droid Serif","Times New Roman",serif;
}
  • esthermariehancock · Member ·

    Thank you! I love it now and I’ve even managed to make a few changes myself – added another line, changed the size and colour of a few other things.
    I’ll get there. Thank you!

  • thesacredpath · Member ·

    You are welcome and if you get stumped, please let us know.

  • The topic ‘Spacing and summary on Truly Minimal’ is closed to new replies.