ThemeShaper Forums » Thematic

[closed]

Looks good in CSS editor, real page does not.

(5 posts)
  • Started 9 years ago by Paranut
  • Latest reply from helgatheviking
  • This topic is resolved

Tags:

  1. Hello people! I started developing my own website less than a week ago, having customized Joomla, Wordpress and Drupal designs to meet my clients criteria for a few years.
    However, feeling the need to be able to fully customize web-designs have made me starting on developing themes on my own since... today! Obviously I've chosen Thematic as my framework and so far it's just great. However, I have one problem.

    I'm developing my CSS in Dreamweaver and copying it onto a live css-editor (Web Developer, a Chrome extension). Everything looks great when I'm doing it that way, but as soon as I upload the actual style to the internet and run the website it looks very different.

    The site: www.Paracraft.net
    My code (Sorry if it's a mess)

    /*
    Theme Name: Minimalistic White
    Theme URI: Http://Paracraft.net
    Description: Developed on the Thematic framework.
    Author: Johann Strønæs Steffensen
    Author URI: http://Paranut.dk
    Template: thematic
    Version: 1.0
    Tags: White, Minimalistic, Clean
    */
    
    /* 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('../thematic/library/layouts/2c-r-fixed.css');
    
    /* Apply basic image styles */
    @import url('../thematic/library/styles/images.css');
    
    /* Apply default theme styles and colors */
    /* It's better to actually copy over default.css into this file
    @import url('../thematic/library/styles/default.css');
    
    /* Prepare theme for plugins */
    @import url('../thematic/library/styles/plugins.css');
    
    body	{
    	Font-Family:		Arial, Helvetica, Sans-serif;
    	Font-Size:			11px;
    	Color: 				#666666;
    	Background-Color:	#FFFFFF;
    	Margin:				0px;
    	Padding:			0px;
    }
    
    A:link					{text-decoration:none; color:#333333;}
    A:visited 				{text-decoration:none; color:#333333;}
    A:hover					{text-decoration:none; color:#333333;}
    A:active 				{text-decoration:none; color:#333333;}	
    
    #wrapper {
    	Width: 780px;
    	Margin: Auto;
    	Min-height: 500px;
    }
    
    #blog-title			{
    	Font-Family: Arial, Arial, Helvetica, sans-serif;
    	Font-Size: 30px;
    }
    
    #header 			{
    	Width:				Auto;
    	Margin:				Auto;
    	Min-height:			75px;
    
    	}
    
    .menu 				{
    	Width:				264px;
    	Margin:				Auto;
    	Min-height:			auto;
    	Float:				Right;
    	Padding:			10px;
    	}
    
    	.menu ul			{ display: inline; float: left; list-style: none;}
    	.menu ul li 		{ display: inline; float: left; list-style: none; margin: 10px;}
    
    #primary {visibility: hidden;}
    #secondary {visibility: hidden;}
    .skip-link { visibility: hidden;}
    Posted 9 years ago #
  2. i never use dreamweaver anymore so i don't know what to say there.

    "it looks very different."

    what look are you expected versus what look are you getting? i don't really know what you are asking for help with.

    based on what i know the #main, #container, #content and .main-aside (sidebar) widths to be i know that your #wrapper is too narrow.

    also why
    #primary {visibility: hidden;}
    #secondary {visibility: hidden;}

    if you don't want the sidebar then filter it off

    function kill_sidebar(){
      return FALSE;
    }
    add_filter('thematic_sidebar','kill_sidebar');
    Posted 9 years ago #
  3. http://paracraft.net/wp-content/themes/Untitled-2.png should clearify.
    As soon as I turn on my CSS editor in the browser, it looks like that. It's as if the CSS editor loads something different.

    I don't think it has anything to do with Dreamweaver really, as I don't use the viewer in that.

    Posted 9 years ago #
  4. Figured it out. As default the template is importing information from the Thematic and apparently it was importing a little too much for my liking :)

    Posted 9 years ago #
  5. i'd probably recommend copying thematic/library/styles/default.css into your style.css. actually i usually copy all of it into 1 file.... it is less modular, but faster for your site to load 1 stylesheet versus the 6ish you are importing.

    from your CSS above, you aren't doing anything to override the borders on #access or the menu list items. you also aren't altering #content/#container to make up for the fact that the asides aren't there. you could also just apply the full-width page template that comes w/ thematic to handle that automagically.

    Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.