Posted by dopedwizard on June 11, 2011 at 2:21pm
3 followers
Jump to:
| Project: | AdaptiveTheme |
| Version: | 7.x-1.x-dev |
| Component: | CSS/HTML |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
Issue Summary
Hi,
I would like to customize the width of my columns just on the frontpage, all other page of the site either use the same width or no columns at all. How can I give the frontpage the custom width sidebars?
Comments
#1
Override the layout settings with the
.frontselector - so you need to add this CSS to your subtheme in one of the CSS files. You could copy the generated layout CSS from the page source code and paste it in for an easy start.If you need more help let me know.
#2
ah cool, ok will give it a go, if i get stuck i let you know :)
Thank you
#3
Mh ok I had a look but I am not sure where exactly to add the front tag.. as I am not sure which settings are the ones to change (copy and change ) from the layout.css file.
Maybe I am just looking at wrong place...
If you could name the responsible divs with the width that I would need to use it would be of great help. I am using the 3 columun 33% layout incl. header and footer.
#4
Just add this to your CSS (adjust to suit your values):
.front .region-sidebar-first {
width: 240px;
}
/* margin-left and width must the be the same value */
.front .region-sidebar-second {
margin-left: -240px; /* the negative value pulls the sidebar into position */
width: 240px;
}
#5
But this declaration also overwrites the responsive style settings (edit: it's only an issue for version 7.x-2.x).
page.css:
.front.two-sidebars .content-inner {margin-left: 30%;
}
generated responsive.layout.css:
.two-sidebars .content-inner, .one-sidebar .content-inner, .region-sidebar-first, .region-sidebar-second {margin-left: 0; /* overwritten by declaration in page.css */
margin-right: 0;
}
I guess you have to use css media query in responsive.style.css to avoid this:
/* Standard layout */@media only screen and (min-width:1025px) {
.front.two-sidebars .region-sidebar-first { width: 30%; }
.front.two-sidebars .content-inner { margin-left: 30%; }
}
This should work but I'm wondering if there is a better way to solve this.
#6
@ PhilippMikael - this is for a different version of the theme (7.x-1.x), the responsive stuff only in 7.x-2.x, what you have should work for the 7.x-2.x responsive version.
#7
Cleaning up.