ThemeShaper Forums » Thematic

[closed]

Full width template removes sidebar but content doesn't extend to full width

(12 posts)
  • Started 11 years ago by mihalisg
  • Latest reply from helgatheviking
  • This topic is resolved
  1. mihalisg
    Member

    Hello everyone,

    I hope you can help with this one as I just can't work it out.

    I use the Thematic Power Blog child theme. I have copied the full with template to the child theme folder but when applied to a page, it hides the sidebar but its space is just blank, the page's content does not stretch to cover the empty space. I have tried so many suggestions from endless topics but nothing seems to work. I don't know much about php and css but enough to get by, still nothing works. I think there may be another element that is affecting the full width template but can't work it out, any help would be most appreciated.

    Many thanks!

    Posted 11 years ago #
  2. sowingseeds
    Member

    I think you are probably missing some css. You will need to add to your child-theme style sheet some changes to the container and the content divisions. I give an example below change to suit. If your page templates are named differently you will need to make changes to the '.page....-php' part below:

    .page-template-template-fullpage-php #container {
    margin-left:45px;
    width:885px;
    float:left;
    }

    .page-template-template-fullpage-php #content {
    margin:0 0 0 10px;
    width:780px;
    overflow:hidden;
    }

    Posted 11 years ago #
  3. mihalisg
    Member

    Hi, thanks very much for your time. I've just tried your suggestion but again I see no change. Here is the css for the full with template of my child theme including your suggestion just in case it gives any pointers to anyone?

    /*
    Theme Name: Thematic Power Blog
    Theme URI:
    Description: Use the Thematic Power Blog Theme to ramp up the power of your WordPress blog.
    Author: Ian Stewart
    Author URI: http://themeshaper.com/
    Template: thematic
    Version: 1.1
    Tags: Thematic
    .
    Thematic Power Blog is copyright Ian Stewart http://themeshaper.com/
    .
    */

    /* Reset browser defaults */
    @import url('../thematic/library/styles/reset.css');

    /* Apply basic typography styles */
    @import url('../thematic/library/styles/typography.css');

    /* Apply a basic layout */
    @import url('3c-r-fixed-primary-988px.css');

    /* Apply basic image styles */
    @import url('../thematic/library/styles/images.css');

    /* Apply default theme styles and colors
    For demonstration purposes we're using the default Thematic style
    For major changes I recommend copying over the default styles into this file */
    @import url('../thematic/library/styles/default.css');

    /* Prepare theme for plugins */
    @import url('../thematic/library/styles/plugins.css');

    /* =Category Menu
    -------------------------------------------------------------- */

    #category-access {
    border-bottom:1px solid #ccc;
    height:32px;
    font-size:13px;
    padding:11px 0;
    overflow:visible;
    z-index:150;
    }
    /* uncomment the following two selectors in case your category list wraps into a second row
    #category-access {
    height: 96px;
    }

    body.ie7 #category-access {
    height: 64px;
    }
    */
    .menu-title {
    color:#666;
    float:left;
    font-style:italic;
    line-height:32px;
    margin-right:10px;
    }
    #category-access .sf-menu {
    border-color:transparent;
    }
    #category-access .sf-menu a {
    border:1px solid transparent;
    margin-right:3px;
    }
    #category-access .sf-menu li:hover, #category-access .sf-menu li:hover a,
    #category-access .sf-menu li.sfHover, #category-access .sf-menu li.sfHover a,
    #category-access .sf-menu a:focus, #category-access .sf-menu a:hover, #category-access .sf-menu a:active {
    background: #fafafa;
    outline: 0;
    border-color:#ccc;
    }
    #category-access .sf-menu ul a {
    background:#fafafa;
    border-color:#ccc;
    border-right:none;
    border-bottom:none;
    margin-right:0;
    }

    /* =Default Widgets
    -------------------------------------------------------------- */

    #crown h3 {
    font-size:17px;
    padding:0 0 4px 0;
    }
    #crown #thematic-power-blog-subscribe {
    padding:0 0 44px 0;
    position:relative;
    }
    #crown #thematic-power-blog-subscribe h3 {
    position:absolute;
    top:0;
    left:0;
    }
    #crown #thematic-power-blog-subscribe ul {
    list-style:none;
    margin:0;
    position:absolute;
    top:0;
    right:0;
    }
    #crown #thematic-power-blog-subscribe ul li {
    padding:0;
    }
    #crown #thematic-power-blog-subscribe a {
    background:url(images/feed-icon-14x14.gif) no-repeat 10px 6px;
    border:1px solid #ccc;
    -webkit-border-radius: .35em;
    -moz-border-radius: .35em;
    border-radius: .35em;
    padding:6px 16px 6px 32px;
    text-decoration:none;
    }
    /* Fix for the a-tag border bug in IE7 */
    body.ie7 #crown #thematic-power-blog-subscribe a {
    float:left;
    }
    #thematic-power-blog-about ul {
    list-style:none;
    margin-left:0;
    }
    #thematic-power-blog-about a.more {
    display:block;
    text-align:right;
    }

    /* =Global Elements
    -------------------------------------------------------------- */

    #header {
    border-top:1px solid #ccc;
    margin-top:0px;
    }
    #branding {
    background:url(images/header-image.png) no-repeat center bottom;
    margin-bottom:22px;
    padding:22px 0 198px 0; /* Bottom padding is the same height as the image called above */
    }
    #blog-description {
    margin-bottom:22px;
    }
    #leader {
    border-bottom:1px solid #ccc;
    margin-bottom:-22px;
    padding:33px 0 11px 0;
    }
    #content {
    }
    .hentry {
    }
    .crown-aside {
    color:#666;
    padding-top:22px;
    margin:0;
    }
    .attachment-jpeg .crown-aside,
    .attachment.png .crown-aside {
    display:none;
    }
    .crown-aside a {
    color:#666;
    }
    .crown-aside a:active,
    .crown-aside a:hover {
    color: #FF4B33;
    }
    .crown-aside ul {
    padding:0 20px;
    }
    .crown-aside ul ul {
    border:none;
    padding:0;
    }
    .main-aside {
    padding-top:22px;
    }
    .main-aside ul {
    padding:0 20px;
    }
    .main-aside ul ul {
    padding:0;
    }
    #crown {
    border:1px solid #ccc;
    width:426px;
    }
    #primary {
    border:1px solid #ccc;
    border-width:0 1px 1px 1px;
    padding:22px 0 11px 0;
    width:212px;
    }
    #secondary {
    border:1px solid #ccc;
    border-width:0 0px 0px 1px; /* keeping a border on the left for no-js */
    margin-left:-1px; /* offsets the 1px border on the left */
    padding:22px 0 11px 0;
    width:350px;
    }

    #breadcrumb-nav {
    border-top:1px solid #ccc;
    color:#666;
    font-size:13px;
    line-height:18px;
    margin-bottom:-22px;
    }
    #breadcrumb-nav a {
    color:#666;
    }
    #breadcrumb-nav a:active,
    #breadcrumb-nav a:hover {
    color: #FF4B33;
    }
    #breadcrumb-nav-container {
    margin:0 auto;
    padding:11px 0;
    width:988px;
    }
    #breadcrumb-nav-container p {
    margin:0;
    }
    #footer {
    }

    .wp-pagenavi span.pages {
    padding:4px !important;
    }

    .page-template-template-page-fullwidth-php #container {
    margin-left:45px;
    width:885px;
    float:left;
    }

    .page-template-template-page-fullwidth-php #content {
    margin:0 0 0 10px;
    width:780px;
    overflow:hidden;
    }

    /* =Widgets
    -------------------------------------------------------------- */

    .aside th, .aside td {
    padding:0.25em 0.35em;
    }

    Posted 11 years ago #
  4. sowingseeds
    Member

    Couple of questions: 1) what is the file name of your full width page template you are using? That is the name you need to target with your css. Thematic has the file: template-page-fullwidth.php in its folder, so the css above is to go with that file name.
    and 2) when you write a page you are able to select the template in the Wordpage backend?

    Posted 11 years ago #
  5. mihalisg
    Member

    1. The file name is the one you mentioned, "template-page-fullwidth.php". I haven't copied it to my child theme's folder but I applied the change you suggested in the stylesheet of the child theme.

    2. Not sure what you mean by Wordpage backend but if you mean if it is one of the template options, yes it is, it's called Full Width.

    Hope this makes sense!

    Posted 11 years ago #
  6. sowingseeds
    Member

    Sorry on the typo on #2 wordpage = wordpress!! On #1 you should not need to place the file in the child theme folder.

    If you have firebug for firefox or chrome developer tools you can see if body class has page-template page-template-template-page-fullwidth-php listed. If it does not then it is not a css problem.

    Alternatively if you give a link I can have a look.

    Posted 11 years ago #
  7. sowingseeds
    Member

    @mihalisg: not sure how you are progressing. Also check in functions.php file in your child theme. Make sure that the '//' is removed before the line define('THEMATIC_COMPATIBLE_BODY_CLASS', true); to activate the use of thematic page filters.

    Posted 11 years ago #
  8. mihalisg
    Member

    Hi there, sorry for late response but I had to give up my efforts for a few days.

    I tried both suggestions last night and they are exactly what I needed, the pages display full width now! Many thanks for your help, I appreciate it!

    Posted 11 years ago #
  9. I'm having the same problem but I'm my own child theme (just copied the thematic code) I've tried the suggestions and it didn't seem to change anything, granted I'm terrible when it comes to this type of stuff. Any help would be greatly appreciated!

    Here's the site I'm trying to change. http://www.staticmotion.ca

    All I want is to be able to post full width pictures, and content.

    Thanks!

    - Santi

    Posted 11 years ago #
  10. @santi- thematic has a full width page template included by default, you don't need to change anything. change the template on your page to use the "Full Width" one. but this only works on pages. to get full width post templates you might want to give the following plugin a try:

    http://wordpress.org/extend/plugins/custom-post-template/

    Posted 11 years ago #
  11. Cool, I'll check that out. Is there anyway to make my posts centered though?

    Posted 11 years ago #
  12. thematic's #main width is something like 960px and it does get centered in the middle of the screen. so i am not sure what you are trying to do differently from that.

    for all CSS questions please try to solve w/ http://getfirebug.com

    Posted 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.