Can't get CSS to affect custom template

  • Resolved beachdogz

    (@beachdogz)


    11 years, 7 months ago

    Greetings. Newbie here — in fact, I am designing my very first WP site and this is my first forum post. I am using the twentytwelve theme, and making all my changes to a child theme.

    My site will be mostly pages, only one actual blog page. My front page is working pretty well, but am now ready to add things (like additional widget area) to the front page that won’t be in other pages. To keep the distinction, I created a custom template for all the other pages on the site. I copied the contents of the front page template into the new template and expected the new template to behave similarly. I found I had to do some differential styling in style.css (in my child theme) but cannot figure out why the page text moves to the right (correctly) on the front page but not the others. (The li style works OK in both places.) Some of my css modifications are just random things I tried that seemed to help — I don’t necessarily understand why.

    Here is the css:

    /* move sidebar to left and remove bullets */

.widget-area {
float: left;
margin-top: 30px;
	width: 35%;
	border: 0;
}

.widget-area .widget li {

	list-style-type: none;

}

.template-front-page .widget-area {
	float: none;
	margin-top: 30px;
	width: 35%;
	border: 0;
}

.template-front-page .widget-area .widget li {
	list-style-type: none;
	}

    Test site is here: js.beachdogz.com

    Home page is built on front page template. All others are built on the custom template, nonfront-page.php, except for the Musicians page. You can see the difference!

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi,
    I’m a little confused about what you are wanting help with, but I think you want the other pages (not home) to have the widget area on the left and text on the right, like the home page? If so, try this, change line 1446 in your style.css file to a float left:

    .widget-area {
    float: left;
    width: 26.0417%;
}

    and line 1437 to float right:

    .site-content {
    float: right;
    width: 65.1042%;
}

    Hope this helps and welcome to WordPress!

    Thread Starter beachdogz

    (@beachdogz)

    Yes, that was what I wanted. (Sorry for my verbosity.) I have tried variations of that solution a thousand times and it never worked until NOW. (I’m sure I kept getting it wrong.) Thank you so much!!! The only thing wrong now is that the left menu and content are indented on the nonfront pages. Am trying to figure out how to turn that off and I will be home free by looking for some margin setting that is not immediately apparent. Thanks again!!!

    Thread Starter beachdogz

    (@beachdogz)

    And now I think it is fixed, by playing with the respective widths of the two parts. ??

    Great! Glad to hear it. So we can mark this issue resolved.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Can't get CSS to affect custom template’ is closed to new replies.