Changing sidebar width – Truly Minimal theme

  • Author
    Posts
  • #1258553

    lauraimurray
    Member

    Hello! I was wondering if anyone could help me?

    I’m new to css and just can’t seem to figure it out. Am I meant to be able to see the existing css ‘options’ (not the right word but you know what I mean) when I’m in the customise mode?

    Specifically, I’m trying to change the width of my sidebar (I’d like it to be a bit narrower).

    Also – when I change the colours using the customise upgrade, the dotted lines that separate the page disappear – is there anyway I can stop this?

    The blog I need help with is lauraimurray.com.

    #1258652

    lauraimurray
    Member

    I’ve given the css is this post as go: https://en.forums.wordpress.com/topic/customize-sidebar-and-column-widths?replies=9#post-936080
    but it didn’t seem to do anything. When I put it into the css tool thing, it went blue (which I assume means it’s working?) but the changes didn’t seem to appear on the theme.
    Maybe I’m doing to wrong?

    #1258986

    I’m new to css and just can’t seem to figure it out. Am I meant to be able to see the existing css ‘options’ (not the right word but you know what I mean) when I’m in the customise mode?

    You should use your browser tools to find the current CSS. Right-click on any element, and select the “Inspect Element” option. It will show you the HTML element you clicked on as well as all the CSS that applies to it on the right. Usually, you can click on the right thing in the HTML and then copy the CSS selectors from the right and adjust it to make changes. Those modified pieces are what should be added to the Appearance → Themes → Customize → CSS panel.

    #1258988

    Specifically, I’m trying to change the width of my sidebar (I’d like it to be a bit narrower).

    Here is an example to get you started. What it does is sets the sidebar area to 20%, then it expands the main column area by changing the right margin to 24% (the extra 4% is the gutter), and then it changes the background-position to move the dotted line over (the dotted line is setup as a background image on the “.site-main” property).

    .site-main .widget-area {
    	width: 20%;
    }
    .site-content {
    	margin: 0 24% 0 0;
    }
    .site-main {
    	background-position: 746px 0;
    }

    After you adjust the width of a main content area (like we did with the margin on “.site-content” in this case), you should adjust the content width value to match. You can do that by setting the Content Width value to 726 px on the Appearance → Themes → Customize → CSS panel.

    #1258990

    when I change the colours using the customise upgrade, the dotted lines that separate the page disappear – is there anyway I can stop this?

    I tested this, and the dotted lines don’t disappear for me, but the color of those lines don’t change so they might be pretty hard to see depending on what colors you’ve picked.

    #1258991

    I’ve given the css is this post as go: https://en.forums.wordpress.com/topic/customize-sidebar-and-column-widths?replies=9#post-936080
    but it didn’t seem to do anything. When I put it into the css tool thing, it went blue (which I assume means it’s working?) but the changes didn’t seem to appear on the theme.
    Maybe I’m doing to wrong?

    CSS is theme specific. Your current theme is Truly Minimal, but the instructions you linked to were for Minimum—that’s a different theme, the same CSS won’t work for both.

    #1259000

    lauraimurray
    Member

    designsimply, I cannot thank you enough! It all makes so much sense now! In all my reading about css, no one had put the right-click ‘inspect element’ thing as clearly as you. I get it now! THANKS A MILLION!

    #1259015

    Awesome!

    #1259089

    Can you maybe also tell me how to change the space between the left sidebar (where the widgets appear) and the main bar (where the blogposts appear). I want to move the main bar, with my posts, a bit more to the right. So everything isn’t centralised on the left side.

    Thanx in advance!!!

    #1259094

    Can you maybe also tell me how to change the space between the left sidebar (where the widgets appear) and the main bar (where the blogposts appear).

    The spacing between those is controlled by the difference between the widget area width and the right margin for site content. Try replacing the numbers from the previous example from before with the numbers in this example:

    .site-main .widget-area {
    	width: 18%;
    }
    
    .site-content {
    	margin: 0 28% 0 0;
    }
    
    .site-main {
    	background-position: 746px 0;
    }

    Then experiment with changing those numbers until you find the spacing you want.

    #1259095

    I want to move the main bar, with my posts, a bit more to the right. So everything isn’t centralised on the left side.

    I think you might have changed the layout after you posted this, since I see the main content on the left now.

    First, try adding this CSS just in a preview to see where those different elements currently appear:

    .site-main .widget-area {
    	background: lightyellow;
    }
    
    .site-content {
    	background: lightcyan;
    }
    
    .site-main {
    	background: pink;
    }

    Then see if you can adjust the percentages in the example I posted earlier. If you still can’t get it sorted, post back here with a new reply about what you’ve tried and exactly what’s not working.

    #1259097

    hi¡¡
    i’m a small problem, i like change the margin’s from slidebar so, actually the margin widget is big more than post box, i’m search a results and i like this result

    http://lauraimurray.com/

    How can i get this ?

    the page is this

    http://ilovequeencharlotte.com/

    i try follow steps you put in this, but don’t have any results

    sorry for my english is very bad :(

    many thanks¡¡

    #1259098

    @beyondtheplay, it looks like your theme has some different settings applied, and so you’ll need to adjust the CSS slightly differently. Here is an example that will make the right sidebar smaller and the main content column larger for the http://ilovequeencharlotte.com/ blog’s Truly Minimal theme setup:

    #main #sidebar {
    	width: 188px;
    }
    
    #main #content {
    	width: 737px;
    }
    
    #main {
    	background-position: 752px;
    }
    #1259107

    makohaus
    Member

    I have a hard time following. Can you indicate me the exact step by step to change the width of my side bar to make it narrower and that the main content takes more room.

    Here is my website: blog.makohaus.com

    I actually like the same width as lauraimurray.com.

    Thanks.

    #1259108

    @nguyenpqv, since http://blog.makohaus.com/ is not hosted here at WordPress.com, the steps won’t be exactly the same and you will need to go to http://wordpress.org/support/ to get help and instructions for how to add custom CSS to a WordPress.org blog. The Jetpack plugin might be a good solution for you since it has the same custom CSS editor used on WordPress.com built into it. See http://jetpack.me/ for more info. Another way to update CSS on a WordPress.org blog might be to use a child theme. It’s up to you which option to choose, and you need to look in the proper support forum to get step by step help with those things.

    Once you’ve found how to add custom CSS for your blog that works for you, try adding the CSS example from https://en.forums.wordpress.com/topic/changing-sidebar-width-truly-minimal-theme?replies=14#post-1257961

    If the CSS doesn’t work the same as it does on WordPress.com, it might be because the theme you have installed is not exactly the same and you should contact the theme authors or the company where you purchase the theme for help at that point.

    #1259109

    fabilousa
    Member

    Hi,

    I’ve checked several css codes on expanding to the full width my truly minimal template, but I’ve had no success.

    Any ideas? I appreciate it =)

    #1259110

    @fabilousa, the two sites on your account are using Reddle and Matala. Can we have a link to the site you are talking about please? I’ve worked off of the theme demo site for the following changes. Not knowing what other changes you’ve made to your site, I suggest trying this and see how things work. Narrow and widen your browser window to check everything, and also, if you have one, view the site on a smart phone to see how it looks.

    The following increases the maximum width of the site from 955px to 1255px (increase of 300px) and retains the responsive design of the theme and keeps the vertical dotted line between the content and sidebar correctly positioned.

    .site {
    width: 1255px;
    }
    
    #main {
    background-position: 860px;
    }

    If you wish a to increase or decrease over what I have given, you can change the 1255px value as desired. You will then have to adjust the 860px value to get the vertical line positioned correctly. Make sure your browser is maximized past the point where the theme stops expanding before positioning the vertical line.

    #1259111

    fabilousa
    Member

    Hi!

    Thank you very much for your answer. I’m sorry my blog has three blogs within but the good one is http://www.desansiedad.com and I have the truly minimalist theme on it.

    Actually in the CSS revisions I have nothing in it, and I’ve tried the code you suggested me but there are no changes.

    I really appreciate this, thanks!

    #1259112

    @fabilousa, you have /* and */ before and after the CSS in your custom CSS. Those designate anything in between them as a comment rather than CSS. Remove those and the code will then work.

    #1259113

    fabilousa
    Member

    Oooh my God! lol

    Everything is shining now…

    Thank you very much as you can see I need some lessons.

    it marks me “error” in
    background-position: 860px;

    But the page looks the way I want it so it’s ok.

    Thanks again for your time =) let me know if you teach or something like that.

The topic ‘Changing sidebar width – Truly Minimal theme’ is closed to new replies.