ThemeShaper Forums » Thematic

[closed]

Unstable css

(10 posts)
  • Started 12 years ago by katedavis
  • Latest reply from katedavis
  • This topic is not resolved

Tags:

  1. Firstly, I'd like to thank you for the development of Thematic. It is so easy to use it has given me hope I can develop my own theme after my previous attempts have all failed as the Wordpress code was updated just before I finished!

    However, my desires are higher than my ability so I resort to copy, paste and 'fiddle' until I get what I want. I've been trying to recreate the theme I built for WP2.6 and have got pretty far, but I've got stuck with my styling.

    The site I'm playing at is http://katedavisonline.com/peter/ and I've successfully moved the menu to the top of the page and created 3 widget areas in the header. However you can see I have some problems:

    * my styling of the menu is different on every computer and browser I use
    * the 3 widget areas should be in a row (and they were until I styled the footer)
    * there should be a white background behind the 3 header widgets (there was until I style the footer)

    I'm sure these can all be solved with some changes to the css file, but I haven't discovered what through 'fiddling'. Any help would be appreciated so I can have a new theme for the first time since 2007!

    Posted 12 years ago #
  2. Hi Kate,

    After a quick look at your new widget area and I can see that you have some pretty hefty borders around each widget as well as margins and padding which means there isn't enough room for all three across the page.

    e.g. widget width + margin width + padding width + border width shouldn't add up to any more than the width that you select for your page or the last column will get bumped down the page.

    I'm not sure what you mean by the background colour; I'm seeing white backgrounds for each column and you have shaded the borders with a light blue grey e.g. 10px solid #D4DCEB.

    The different view in different browser issue is part of the agony of web design I'm afraid, but I should imagine that if you sort out the margins and paddings etc that you will find that things calm down a bit.

    Posted 12 years ago #
  3. Perry,

    Thank you for your response. I will check my page width to see if the three widgets fit. They did sit nicely earlier, but if I tidy up my css file maybe I'll find an error I've made.

    I wasn't clear in my description of how I want the theme to look. I want a white border around the whole design (around the outer edge of head and main). For the header boxes, I tried to achieve this by floating the widgets (that have a white background and light blue grey border) over a white border I'd extended from either header or main. I assume this isn't the best way of doing this, but it was the only method I thought.

    Posted 12 years ago #
  4. I restructured my css file in the order suggested http://forums.themeshaper.com/topic/organize-your-css and it had an interesting impact. First my header boxes got themselves into a row again and I lost all formatting on my footer! I think I've sorted those out, but have some others issues:

    * my menu now appears to be aligned for Firefox and IE, but is not wide enough. If I add #access {width:1024px} it shifts to the left and I need to add the margin I had previously and I think that was causing the misalign

    * the white 'border' behind the header boxes is created using a border-bottom on #header and #branding and floating the header boxes over the top. This works in Firefox, but not in IE. Is there a neater way of doing this?

    Thank you

    Posted 12 years ago #
  5. I have resolved the issue of the grey line showing between my header and header widgets in IE by increasing the header border. It may not be the best solution, but its working.

    So I think the only major thing I have left is getting the menu background colour to be the full width of my header without throwing the alignments out in Firefox and IE. Any tips?

    Thank you

    Kate

    Posted 12 years ago #
  6. Jamie Mitchell
    Member

    you should have those header widgets in a div..

    forget all the borders and stuff you have used to position the lists etc...

    just use the same css as is used in the footer widgets, as it is the same 3 columns you are trying to create in the header, so style them the same way first, then make adjustment from there...

    Posted 12 years ago #
  7. Glad you're making some progress. I forgot to ask: are you using Firebug at all (a web developer plug-in for Firefox, Google Chrome etc)?

    If not it offers a very useful tool for quickly tracking down how CSS styles are applied on your web pages and helps you to see how precedence works (when a style is applied within nested divs etc).

    You can even do some limited live edits of the CSS to quickly test things out or remove styles that aren't working.

    I found that it really helped me to get my head around how CSS works - though there is a slight learning curve when first using it.

    As Jamie says above; try and work out how to apply your styles generally across the page to avoid conflicts (in your case work out what all the widget elements have in common) before targeting specific areas.

    For example (using your site code):

    The .aside class will apply styles to all of the areas that contain widgets.

    Then use the more specific widget classes and ids to make more targeted changes.

    id="header-left" will style that particular column area
    class=".widget_recent_entries" will style that specific widget

    Posted 12 years ago #
  8. Jamie and Perry,

    Thank you for your comments and suggestions. I haven't looked at this since Wednesday so you've given me something to try over the weekend.

    I am using Firebug after reading about it in the useful tools thread. It is much better than my previous method of changing and re-uploading the file and I agree has the benefit of showing you how css works (although some bits are still beyond me).

    Divs are new to me and I have to admit beyond my understanding. I've only used them previously when they were already included in a theme I was tweaking and not known what they actually did, so I've read about them this morning and now understand why they would help.

    I have created a div, but I can't get the widgets into it, I assume this is something to do with them being in their own divs?? This is currently what is in my functions.php for the header widgets.

    /*create new div for header widgets*/
    
    function header_widgets() {?>
        <div id="header_widgets">
        </div>
    <?php }
    add_action('thematic_header','header_widgets',6);
    
    /* Adding widgets into the header*/
    
    function add_header_left($content) {
    	$content['Header Left'] = array(
    		'args' => array (
    			'name' => 'Header Left',
    			'id' => 'header-left',
    			'before_widget' => thematic_before_widget(),
    			'after_widget' => thematic_after_widget(),
    			'before_title' => thematic_before_title(),
    			'after_title' => thematic_after_title(),
    		),
    		'action_hook'	=> 'thematic_header',
    		'function'		=> 'thematic_header_left',
    		'priority'		=> 6,
    	);
    	return $content;
    }
    add_filter('thematic_widgetized_areas', 'add_header_left');
    
    // And this is our new function that displays the widgetized area
    function thematic_header_left() {
    	if (is_sidebar_active('header-left')) {
    		echo thematic_before_widget_area('header-left');
    		dynamic_sidebar('header-left');
    		echo thematic_after_widget_area('header-left');
    	}
    }
    
    function add_header_middle($content) {
    	$content['Header Middle'] = array(
    		'args' => array (
    			'name' => 'Header Middle',
    			'id' => 'header-middle',
    			'before_widget' => thematic_before_widget(),
    			'after_widget' => thematic_after_widget(),
    			'before_title' => thematic_before_title(),
    			'after_title' => thematic_after_title(),
    		),
    		'action_hook'	=> 'thematic_header',
    		'function'		=> 'thematic_header_middle',
    		'priority'		=> 6,
    	);
    	return $content;
    }
    add_filter('thematic_widgetized_areas', 'add_header_middle');
    
    // And this is our new function that displays the widgetized area
    function thematic_header_middle() {
    	if (is_sidebar_active('header-middle')) {
    		echo thematic_before_widget_area('header-middle');
    		dynamic_sidebar('header-middle');
    		echo thematic_after_widget_area('header-middle');
    	}
    }
    
    function add_header_right($content) {
    	$content['Header Right'] = array(
    		'args' => array (
    			'name' => 'Header Right',
    			'id' => 'header-right',
    			'before_widget' => thematic_before_widget(),
    			'after_widget' => thematic_after_widget(),
    			'before_title' => thematic_before_title(),
    			'after_title' => thematic_after_title(),
    		),
    		'action_hook'	=> 'thematic_header',
    		'function'		=> 'thematic_header_right',
    		'priority'		=> 6,
    	);
    	return $content;
    }
    add_filter('thematic_widgetized_areas', 'add_header_right');
    
    // And this is our new function that displays the widgetized area
    function thematic_header_right() {
    	if (is_sidebar_active('header-right')) {
    		echo thematic_before_widget_area('header-right');
    		dynamic_sidebar('header-right');
    		echo thematic_after_widget_area('header-right');
    	}
    }

    Any help would be much appreciated. Thank you.

    Posted 12 years ago #
  9. Hi Kate,

    Think of divs as a bookend for your html:

    <div class="your-class"
    
        ..... your html
    
      </div> <!-- closes you-class -->

    You now have a container with the class "your-class", targeting this class with your CSS will apply to any code inside it.

    Your code is a good start but the problem lies with the first part:

    /*create new div for header widgets*/
    
    function header_widgets() {?>
        <div id="header_widgets">
        </div>
    
    <?php }
    add_action('thematic_header','header_widgets',6);

    All this does is add the div to your page but it doesn't wrap round your widget code as it should (its just an empty div - bookends with no books between them!).

    To achieve this try the following in functions.php:

    // create new opening div for #header_widgets
    function header_widgets() {?>
    
        <div id="header_widgets">
    
        <?php }
    add_action('thematic_header','header_widgets',6);
    
    // remove existing Thematic function closing the #branding div
    function thematic_remove_brandingclose()
    {
        remove_action('thematic_header', 'thematic_brandingclose', 7);
    }
    add_action('init', 'thematic_remove_brandingclose');
    
    // add closing div for #header_widgets and replace closing div for #branding
    function close_headerwidgets()
    {?>
        </div> <!-- #header_widgets -->
     </div> <!-- #branding -->
    
    <?php
    }
    
    add_action('thematic_header', 'close_headerwidgets', 7);

    Now your widgets should be enclosed by the #header_widgets div and you can start applying your styles to them.

    Posted 12 years ago #
  10. Perryb,

    Thank you for your help on this. Unfortunately I have not found the time to try out your suggestion until now (I can't believe it has been 7 months); plus in that time I've forgotten most of what I learnt so it hasn't been straight forward for me.

    Anyway, I've used your code and hopefully put it in the correct place. I've checked it in Firefox and IE on my computer and the layout seems stable so I may give the changing the styles another ago.

    Just wanted to let you know that your assistance has been appreciated, even if it has taken me a long time to say thank you.

    Posted 12 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.