Need help? Check out our Support site, then


Changing sidebar width - Truly Minimal theme

  1. 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.

  2. I've given the css is this post as go: http://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?

  3. 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.

  4. 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.

  5. 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.

  6. I've given the css is this post as go: http://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.

  7. 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!

  8. Awesome!

  9. ergenstussenin
    Member

    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!!!

  10. 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.

  11. 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.

  12. 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¡¡

  13. @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;
    }
  14. 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.

  15. @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 http://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.

  16. 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 =)

  17. @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.

  18. 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!

  19. @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.

  20. 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.

  21. You are welcome, and we were all starting out at one point.

    You can remove the rule with the background position since you are not using the dotted border lines between page elements. I had included it since I had not seen your actual site and was working off the demo site. Remove the following:

    #main {
    background-position: 860px;
    }

    The warnings, in many cases can be safely ignored. They generally are there to alert you to something that might be done in a better way, but in some cases they can't.

  22. Ok I see now.

    Thank you very much thesacredpath have a nice day.

  23. sacredpath...

    Now I'm struggling with the font color, I've tried some but I couldn't find the specific code for truly minimal.

    Is it possible to change the color of the body text? And the menu?

    Thanks again

  24. There is typically a base color and formatting set in the body selector and then more specific selectors are included to style specific elements, such as menu links, post and page titles and sidebar elements.

    Changing the color code here will change the standard text in content on pages and posts.

    body, button, input, select, textarea {
    color: #574D4D;
    }

    Normal menu color, current page menu color and hover color would be here:

    .navigation-main a, .navigation-main a:visited {
        color: #6C6E6E;
    }
    
    .navigation-main li:hover > a {
        color: #070707;
    }
    .navigation-main ul ul li:hover > a {
        color: #070707;
    }
    .navigation-main li.current_page_item a, .navigation-main li.current-menu-item a {
        color: #070707;
    }

    The base link color and link hover colors would be set here.

    a {
        color: #070707;
    }
    
    a:hover, a:focus, a:active {
        color: #FF5C0C;
    }

    Links in widgets would be set here.

    .widget a {
        color: #070707;
    }

    Regular text (not link) in the widgets would be set here.

    .site-main .widget-area {
        color: #A5A3A3;
    }
  25. wow!

    Thank you very much!
    I insist... you rule!

  26. Thank you! and you are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic