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

Jeff Burnz’s picture

Jeff Burnz commented

Override the layout settings with the .front selector - 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.

dopedwizard’s picture

dopedwizard commented

ah cool, ok will give it a go, if i get stuck i let you know :)
Thank you

dopedwizard’s picture

dopedwizard commented

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.

Jeff Burnz’s picture

Jeff Burnz commented

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;
}
pminf’s picture

pminf
Primary language German
Location Nuremburg (Germany), formerly Dresden
commented

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.

Jeff Burnz’s picture

Jeff Burnz commented

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

Jeff Burnz’s picture

Jeff Burnz commented
Component: Theme settings » CSS/HTML
Status: Active » Closed (fixed)

Cleaning up.