Changing menu/content width in twenty fifteen theme

  • I have found a couple of posts about this but the most recent was 2016 and much has happened since then and the answer didn’t look clear. I would like to shrink the width of the main menu (on the left) and increase the width of the main content area. I think the pertinent bits of the css are these (from my child theme, but I haven’t touched these).

    site  {
    margin: 0 auto;
    max-width: 1403px;
}
.sidebar  {
    float: left;
    margin-right: -100%;
    max-width: 413px;
    position: relative;
    width: 29.4118%;
}
.secondary  {
    background-color: transparent;
    box-shadow: none;
    display: block;
    margin: 0;
    padding: 0;
}
.site-main  {
    padding: 8.3333% 0;
}
.site-content  {
    display: block;
    float: left;
    margin-left: 29.4118%;
    width: 70.5882%;
}

    I’m hoping someone can confirm that I can tweak those two widths, within reason, say to 20% vs. 80% or even 15% vs. 85%, or someone may know that doing this is likely to hit problems that may not be immediately obvious with other settings.

    TIA, Chris

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    You also have

    body::before {
    background-color: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    content: "";
    display: block;
    height: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 29.4118%;
    z-index: 0;
}

    to adjust the background width. Adjust .site-content and .sidebar widths, plus .site-content margin left. Keep all widths and margins as percentages.

    The only way to see if there are hidden problems lurking is to check your site with various screen widths and devices. Whatever crops up should be fixable with further CSS adjustments.

    Thread Starter cstweb

    (@cstweb)

    Thanks bcworkz. That’s really helpful, so I need to change the settings in the code I pasted above, and in the bit you found (and have congruent percentages in the former and the latter!)

    OK, I’ve got a staging site so I can change things and look at them as you say.

    One real newbie question: what is the best way to do this? I am running a child theme created from twenty fifteen with the child theme configurator pro plugin and assumed that it would a good tool to use to tweak those percentages but it won’t let me edit them. I guess I could go down to the OS (Debian) and grep for “29.4118%” and for “70.5882%” and locate those entries and tweak them with an editor (after saving copies of the original files somewhere safe!)

    I’m guessing there may be better, easier and safer ways to do this though. Any advice (bcworkz or anyone!) TIA and thanks bcworkz again, Chris

    Moderator bcworkz

    (@bcworkz)

    You should be able to edit the child CSS files using the theme editor (under “Appearance” admin menu). There is a warning about editing active themes, but it shouldn’t prevent edits. Editing CSS files is relatively safe. PHP files are where danger lurks. You could temporarily switch themes to be extra safe.

    I’m pretty sure all the rules are in the style.css file. You can use your browser’s element inspector developer tool to find the exact line number if you want. There is a tool icon that lets you pick an element on the page, then the tool shows your the relevant HTML and CSS with file and line number info. The trick is finding all the relevant HTML elements. It’s worth learning to use this tool anyway IMO.

    The other thing you can do is copy/paste the relevant CSS to the Additional CSS panel. Delete any rules you do not change, keeping only the selectors and the changed rules. These will override any similar rules in external files.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Changing menu/content width in twenty fifteen theme’ is closed to new replies.