DBP
|
Hi there.
I'm wondering how to resize specific widget areas (as applied to the homepage only)? Please see http://bigmoves.org/staging . The homepage widgets should be 60/40 and not 50/50. Also, I need to tweak the margins for the widget areas.
I thought I was resizing the homepage widget areas in Artisteer, but those were actually content/article cells. The exported *widget areas* in the homepage body are equal in width (50/50 instead of 60/40 that I need) and also have the same class name. I can't even find where I can edit in the source code to give the bottom widget areas separate class names so as to differently define their widths.
Artisteer names the left widget area/column "First Bottom Widget Area" and the right one "Second Bottom Widget Area" for WP widget editing, but on the back end, both are using "layout-cell-layout-cell-size2."
1) I can't for the life of me find *where* in the generated template files, so that I can get in to edit these homepage widget areas to reassign to rename/reassign different classes for these so they're not both using the class of "layout-cell-layout-cell-size2".
But where? I ran a string search on the entire theme folder and "cell-size2" is only showing up in the css files.
When I run a search for "layout cell," only sidebar-footer.php (referencing the class of "layout-cell layout-item-1) shows up.
Where can I can get in to tweak the code below? This is the output html of that part of the homepage as rendered from a web browser.
<div class="content-layout">
<div class="content-layout-row">
<!-- THIS IS WHERE ARTISTEER DEFINES LEFT COLUMN, AKA "FIRST BOTTOM WIDGET AREA" -->
<div class="layout-cell layout-cell-size2">
<div id="upcoming_events_widget-4" class="block widget widget_upcoming_events_widget clearfix">
<div class="blockheader">
<div class="t">Upcoming Events</div>
</div><div class="blockcontent">....Upcoming Events widget is in here</div>
</div></div>
<!-- THIS IS WHERE ARTISTEER DEFINES RIGHT COLUMN, AKA "SECOND BOTTOM WIDGET AREA" -->
<div class="layout-cell layout-cell-size2">
<div id="categoryposts-3" class="block widget widget_categoryposts clearfix">
<div class="blockheader">
<div class="t"><a href="http://www.bigmoves.org/staging/category/news/">News</a></div>
</div><div class="blockcontent">
News widget goes in here...
</div>
</div>
2) Because it's not showing up in any string searches, my fear is that any code referencing "layout-cell layout-cell-size2" is dynamically generated/enqueued by some count that adds on to it.
This shows up in sidebar-bottom.php
<div class="content-layout">
<div class="content-layout-row">
<?php
}
foreach ($places as $widgets) {
if ($needLayout) {
?>
<div class="layout-cell layout-cell-size<?php echo $place_count; ?>">
<?php
}
foreach ($widgets as $widget) {
theme_print_widget($widget);
}
if ($needLayout) {
?>
</div>
<?php
}
Also, both script.js and script.responsive.js seem to be looking for dynamically numbered layout cells here.
(And this is a responsive design, so I need to not break this.)
script.responsive.js:
var responsiveLayoutCell = (function ($) {
"use strict";
return function (responsiveDesign) {
$(".content .content-layout-row,.footer .content-layout-row").each(function () {
var row = $(this);
var rowChildren = row.children(".layout-cell");
if (rowChildren.length > 1) {
if (responsiveDesign.isTablet) {
rowChildren.addClass("responsive-tablet-layout-cell").each(function (i) {
if ((i + 1) % 2 === 0) {
$(this).after("<div class=\"cleared responsive-cleared\">");
}
});
} else {
rowChildren.removeClass("responsive-tablet-layout-cell");
row.children(".responsive-cleared").remove();
}
}
So: given all this: how/where am I to get in and create 2 widget areas that *don't* share the same class for the homepage only? Note that there is an additional widget area above on same page (full width), there's no problem with that one.
Many thanks,
Devra
|
| |
DBP
|
I just wanted to follow up with how you can customize your bottom widget areas instead of using default sizing (50/50 proportions).
You will need to do this to your exported template files, since (as far as I can tell), there is nowhere within the Artisteer design interface to change these. You can definitely add the css part in Artisteer, in your theme's custom CSS area in File > Export > Options > CSS. But otherwise, you'll need to do this for the exported widget area section .php file --in my case, "sidebar-bottom.php" (which is not actually the sidebar, but the main bottom area widgets).
Here's the helpful fix Tanya G. sent:
So open the sidebar-bottom.php file and copy the following code instead of the existing one: <?php global $theme_sidebars; $places = array(); foreach ($theme_sidebars as $sidebar){ if ($sidebar['group'] !== 'bottom') continue; $widgets = theme_get_dynamic_sidebar_data($sidebar['id']); if (!is_array($widgets) || count($widgets) < 1) continue; $places[$sidebar['id']] = $widgets; } $place_count = count($places); $needLayout = ($place_count > 1); if ($place_count > 0) { if ($needLayout) { ?> <div class="content-layout"> <div class="content-layout-row"> <?php } $i=0; foreach ($places as $widgets) { $i+=1; if ($needLayout) { ?> <div class="layout-cell layout-cell-size<?php echo $i ?>"> <?php } foreach ($widgets as $widget) { theme_print_widget($widget); } if ($needLayout) { ?> </div> <?php } } if ($needLayout) { ?> </div> </div> <?php } } and add the following code in the style.css file: div.layout-cell-size1 { width:60%!important; } div.layout-cell-size2 { width:40%!important; }
|
| |
Kathy
|
This was exactly what I needed (and hard to find) but no matter what I do, it sizes them in reverse. I am trying to size them columns 30% & 70% www.gunproplus.com
The end says to copy two lines to the style.css file. Im wondering if I copied them to the wrong place with in the file.
.art-layout-cell
{
display: table-cell;
vertical-align: top;
div.art-layout-cell-size1 { width:30%!important; }
div.art-layout-cell-size2 { width:70%!important; }
}
Any suggestions?
|
| |
Kathy
|
SO I changed it to the following and that did the trick! Thanks!
.art-layout-cell
{
display: table-cell;
vertical-align: top;
}
div.art-layout-cell-size1 { width:30%!important; }
div.art-layout-cell-size2 { width:70%!important; }
|
| |
wp
|
Any idea how to add an additional area is this sidebar-bottom.php file so i can have a total of 3?
|
| |
|
|