some adjustments
-
Hello,
I love your theme it is so elegant and simple!
But I would like to make some little adjustments and I took a picture to understand them
I can’t find where to make them in the css pagethe screen capture
can you please help mebest regards
laurent
-
Hi. First of all, thanks for the kind words! Most of the changes you are wanting to make are fairly complex because they are controlled by the underlying Bootstrap CSS framework itself. More specifically:
- The left and right margins are defined by the width of the “container” class in bootstrap.min.css. They are set to 1170px on desktops but there are media queries that change that for smaller screen sizes. You can override them in style.css if you want.
- For the section that has the page title, that has a CSS tag of header.content-header which by default is a min-height of 170px. You can set that to a smaller number if you want.
- The space between the sidebar and the main content area is more difficult. The reason you have so much space is because your sidebar is on the left and the list items you have there are short. If you want to narrow the left sidebar column, then you need to reduce the number of columns in sidebar-left.php. Right now you’ll see CSS tags of “col-md-4 col-md-pull-8”. You can change that to “col-md-3 col-md-pull-9”. But the total columns across the width of the page needs total 12, so you have to edit page-leftsidebar.php to change “col-md-8 col-md-push-4” to “col-md-9 col-md-push-3”. And that is just for the page template with a left sidebar. If you want to change it for all other pages (default is right sidebar), then you have to also edit sidebar.php, index.php, 404.php, page-sideindex.php, page.php, search.php, and single.php.
I’ll consider adding a new theme option parameter to functions.php where you can specify the number of columns for the sidebars. Then you wouldn’t have to edit all those php files. I’m about ready to release the next version of the parent theme (Flat Bootstrap), though, and I’m not sure this will make it into that version.
thank you for your quick answer, I’m sorry but I didn’t understand well what to do, I try your trick on the files mentioned in your post, but the result is awful !!
I’m very sad because I can’t get what I want !
If I keep a menu in the right side, how can I get the text part wider a bit without
moving the left limit :
capture2thank you ??
Thanks for posting a different screenshot. It looks like you have something strange going on with the content area itself. There should be a margin between the main content area and the sidebar, but it shouldn’t be that wide. Can you send me a link to the live page you took that screenshot from? I need to be able to look at the HTML of the page.
the screenshot was a photoshop montage, it’s represent the result I want as I can’t figure out to have a menu on the left with all the rest in a good place ??
here is the link to my website : https://www.a-picture-from-switzerland.com/
the site is not finished yet, I’m working on it so surely all the pages are not with the good parametersI have another question , sorry.
Where I can change the green color of the selected page in the header menu and the green color of the site title
LaurentOk, now that I see your site, that is helpful. I thought you were having an issue with *too much* whitespace between the main content area and the sidebar. Your mockup shows a lot of space and says “make text zone wider”, which I assumed meant put it closer to the sidebar. But your site shows the normal, small amount of space, so I’m totally confused as to what you are trying to accomplish. Do you want more space or less space?
Also, to change the green color of the header text, go in to Appearance -> Customizer and you can change the header text there. To change the highlight color for the selected menu item, add css like this… just change the text color and background color to whatever you want.
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: #555; background-color: #e7e7e7 }
Also, I think the theme looks pretty decent with a left sidebar without changing the css. The About page on my test site is set up with a left sidebar if you want to see it: https://xtremelysocial.com/test/about/
I want more space for the main text
I think it is something like 750 px wide and I would like to hame more than that
exactly like my photoshop picture show (again it show the result I want not the real site)
https://www.xoxixox.com/wordpress/Capture2.png
maybe 1000px for the main text
is it possible ?
look here https://www.xoxixox.com/wordpress/Capture3.png
it show what I have and what I would like to have.I will try to change the color
Ok, if you want to widen the entire width of the page, so that both the main content area and sidebar are wider, then you can simply increase the width of the container. This is what I was referring to in the first bullet in my original response. i.e. something like this:
.container { width: 1370px; }
If you want to leave the page width the same (theme default is max width of main content area and sidebar of 1170px), but change how much of that space is for the main content area versus the sidebar… that is what I described in bullet #3 above. i.e. changing sidebar.php, page.php, etc. to alter the number of columns.
You can also do both of these things together to widen the entire page and also change how much of the page the main content area uses.
- The topic ‘some adjustments’ is closed to new replies.