|
Joost
|
March 28, 2016 at 4:28 am
I would like to have pages and posts with both a 2 column page template (main + sidebar) and a 3 column page template (L sidebar + main + R sidebar). The Iced Mocha theme allows that but distributes the defined space over the sidebars. So the sidebars in the 3-column template have half of the width of those in the 2-column template. I need to keep the sidebar width constant, independent of the template (so the space of the extra sidebar comes at the cost of the main content part).
I would expect I this could modify this fairly easy in the template files but I looked at it and can’t figure where to do what. Any suggestion?
Thanks in advance!
Joost
|
|
Josh
|
March 28, 2016 at 3:40 pm
Hi Joost,
The column layouts are something that can be changed by using CSS. The example code below shows one way to change those widths, and you’ll likely need to change the values to your preferences.
#container.three-columns-sided #content {
width: 350px;
margin: 0 350px 0 -750px;
}
#container.three-columns-sided .sidey {
width: 300px;
}
|
|
Joost
|
March 29, 2016 at 1:19 am
Thanks Josh,
That sounds doable 🙂 I’ll give it try.
Joost
|
|
Joost
|
March 29, 2016 at 1:04 pm
Hi Josh,
I tried your suggestions but unfortunately without success. I added the lines in the style.css of the child theme but without any effect. If I inspect the resulting html file with Firebug, I see the new modified values but strike-through. In the end, the widths retain their original value. So I expect they are overridden elsewhere by their original value. However, I can’t figure out where. I myself only manage the widths in the Iced Mocha settings menu, so there is no other CSS in place.
Any suggestion how to proceed?
Thanks,
Joost
|
|
Josh
|
March 29, 2016 at 2:02 pm
You can try adding the !important declaration to the end of each of the custom styles. The challenge that you’re up against is the theme’s styles get loaded onto the html page instead of from within a stylesheet.
|
|
Joost
|
March 30, 2016 at 2:02 am
Hi Josh,
Thanks, this works indeed! It took some fiddling with the numbers but now I have approximately the correct layout. I suspect the CSS is overridden by the page template. I still assume that modifying the page template is the more elegant approach and easier to maintain. Somewhere the layout will be calculated based on the theme setting and written in the page file. I will have to redo the CSS fiddling if I decide to change e.g. the page width. If you have still have any suggestion on modifying the page template, please let me know. But for now the !important declaration is a workable workaround.
Joost
|
|
Josh
|
March 30, 2016 at 8:36 am
I can tell you that the column widths are not handled by the page template, so you would not be modifying the page template if you wanted to change this by some other means.
|
|
Joost
|
March 31, 2016 at 1:13 am
Thanks for the education Josh 🙂
Unfortunately, further testing reveals another issue: the mod breaks the responsiveness of the page. Pages are looking fine on desktop and on tablets in landscape. On phones and tablets in portrait the main middle section containing the body of the post (700px wide) is blank.
Any suggestion how to solve this?
Thanks,
Joost
|
|
Josh
|
March 31, 2016 at 10:32 am
You can wrap the CSS in a CSS media query so that it only affects larger screens.
|
|
Joost
|
April 1, 2016 at 2:10 am
Thanks Josh,
This seems the right direction indeed. I got the site now working for smartphones again. Not yet for tablets in portrait format but I suppose that is a matter of some further tweeking.
Thanks again for the excellent support!
Joost
|
