Adjust Twenty Twelve Front page widget width

  • wldwil

    (@wldwil)


    9 years, 3 months ago

    I am using twenty twelve theme with a child theme.
    I am using chrome and Firefox tools to look at the code
    My site is at http://051.d56.myftpupload.com/
    My challenge is that I am tiring to create a two column theme in twenty twelve using the front page template with the first front page widget area and second front page widget area. Everything is working well except that I would like to change the width of these two widgets to make the second one more narrow and the first one wider.

    I found the following code and modified it keeping the total the same and the widgets appear using Chrome’s tools to be the size I want, but the text will not fill the widget area. I think I am close, but not sure what I am missing

    .template-front-page .widget-area .widget,
	.template-front-page.two-sidebars .widget-area .front-widgets {
		width: 64.875%;
	}

	.template-front-page .widget-area .widget:nth-child(even),
	.template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
		width: 26.0625%;
	}

    Any thoughts?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Pioneer Web Design

    (@swansonphotos)

    9 years, 3 months ago

    As I recall, 2012 has a fixed center width and the rest is split evenly using some .js. To override CSS output by such, you need to use the

    !important

    declaration in your Child Theme’s stylesheet.

    Examples:

    CSS output by a theme that uses .js to do so:

    body {font-size: 11px;}

    In Child Theme stylesheet:

    body {font-size: 14px !important;}

    To discover what CSS is output by your theme, use a web inspection tool such as Firebug: http://getfirebug.com/ , Chrome Inspect Element: https://developers.google.com/chrome-developer-tools/ or Internet Explorer 9+ F12 Dev. Tools: http://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx#csstool

    There are others.

    When editing CSS, use a Child Theme
    http://codex.wordpress.org/Child_Themes
    Custom CSS Plugin, or Theme provided custom CSS option.
    Edits to parent themes are lost on theme update.

    Learn CSS: http://www.w3schools.com/css/

    Some plugins may add css afterwards and should be avoided. They add CSS that may conflict with your theme.

    Thread Starter wldwil

    (@wldwil)

    9 years, 3 months ago

    Greetings Pioneer,

    I added the !important, but it still did not switch. I am u sing the Chrome tool mostly that you mentioned and I am using a child theme as mentioned above. The css that I have above did make the widget wider, but it seems to have like a margin in it that is not showing on the styles in the right box of the Chrome tool.

    It appears when I mouse over elements on the line <aside id=”text-3” class=”widget widget_text”> that it has a margin to the right of 182.

    Here is an image of what I am describing. The challenge is not knowing how this might be adjusted

    Here is a screen shot.

    Thread Starter wldwil

    (@wldwil)

    9 years, 3 months ago

    I edited my above code and believe I have it. Does this look right?

    .template-front-page .widget-area .widget,
	.template-front-page.two-sidebars .widget-area .front-widgets {
		float: left;
		width: 62.875%;
		margin-bottom: 24px;
		margin-bottom: 1.714285714rem;
	}
	.template-front-page .widget-area .widget:nth-child(odd) {
		clear: right;
	}
	.template-front-page .widget-area .widget:nth-child(even),
	.template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
		float: right;
		width: 28.0625%;
		margin: 0 0 0;
		margin: 0 0 0;
	}
	.template-front-page.two-sidebars .widget,
	.template-front-page.two-sidebars .widget:nth-child(even) {
		float: none;
		width: auto;
	}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adjust Twenty Twelve Front page widget width’ is closed to new replies.