Canvas Hooks vs CSS Mod question

Discussion in 'HTML & Website Design' started by localgoogleguru, May 15, 2014.

  1. #1
    I've got a blog using WooThemes Canvas that needs padding or spacing removed

    Canvas Hooks or CSS To Remove padding below Slider
    I've been trying to learn how to do this myself without having to run here for each question... We need to remove padding or spaces below the Slider
    I often see adding a line of CSS to custom.css changes "elements"
    HOWEVER an element is "contained" within some sort of (php) container
    therefore in order to execute a CSS command, one must "inform" Canvas, that within "this container" execute "this command"...

    one cannot add CSS without knowing what the "container" is called

    In this screenshot, we need the spacing (padding?) above the content and below the slider to be either eliminated or severely reduced

    https://www.dropbox.com/s/jv3omkq4kg0fh6i/How%20Do%20I%20Remove%20This%20Padding%20Altogthe.png

    using Firebug I see that (perhaps??) the "container" is called:

    <div id="main-sidebar-container">

    so.. would I add #main-sidebar-containter [margin: 0}
    or some kind of CSS solution
    OR

    I see within Canvas Hooks
    in PHP code (vs CSS code) the "container" is referred to as
    woo_main_before

    https://www.dropbox.com/s/5sslok6yy2s1odn/Canvas%20Hook%20VS%20CSS%20Mod.png
    Is there where to remove padding to the container
    rather than by specifying CSS element or CSS class?

    apparently there are several ways to accomplish anything
    which is the preferred method?

    Canvas Hooks
    or
    CSS ?

    any guidance is greatly appreciated
    thanks
     
    localgoogleguru, May 15, 2014 IP
  2. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #2
    How is it you think we can determine what code you need without a link to the page or the code? an image of the page gives us exactly zero information.
     
    COBOLdinosaur, May 15, 2014 IP
  3. localgoogleguru

    localgoogleguru Active Member

    Messages:
    41
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #3
    the page is the home page of http://www.brillanteautoservice.com/
    running the latest Woothemes Canvas and latest framework updates

    Thanks
     
    localgoogleguru, May 15, 2014 IP
  4. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #4
    Well the markup on that page is pretty much screwed up:
    http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

    When the validator reports 10 serious structural error, the is no point in doing anything until the errors are fixed. Clean code might eliminate the problem, but if not at least the result of changes will be predictable. As it is now trying to fix anything is like trying to eat broth with a fork.
     
    COBOLdinosaur, May 15, 2014 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Not sure what "woothemes canvas" is, but it's setting my scammy sense off. For a moment I was thinking "what the hell does CANVAS and CSS have to do with each-other" thinking you meant HTML 5 Canvas.

    @COBOLdinosaur has it right, that page is a disaster of how NOT to build a website; All that static CSS in the markup ALONE is a warning sign of "I can haz intarnets" development, much less the endless pointless holy mother of blueblazes classes on EVERYTHING, H3 before you even have a H1 or H2, DIV + IMAGE doing image replacement's job, crappy illegible header image doing text's job... From the "you can't put P in a P" to the "You can't put block level tags inside inline-level tags" of a DIV inside STRONG, to the ENDLESS number of unclosed elements... from the static scripting in the markup, to the endless presentational crap in the markup -- whatever system you are using is vomiting up 21k of markup for 1.1k of plaintext and maybe a half dozen content images. That's easily two to four times as much code as should be in the markup!

    Of course it has all the tell-tales of being a turdpress site, and not having been bent properly over the table and taught a lesson on what markup is SUPPOSED to be. That's often turdpress' problem since, well... as I often say, if you don't know what's wrong with code like this:

    <body class="home page page-id-12 page-template page-template-template-biz-php opera alt-style-default fixed-mobile two-col-left width-960 two-col-left-960">
    <div id="wrapper">
    
    	<div id="inner-wrapper">
    
    	<h3 class="nav-toggle icon"><a href="#navigation">Navigation</a></h3>
    
    	<header id="header" class="col-full">
    
    		<div id="logo">
    Code (markup):
    Or this:

    <ul id="main-nav" class="nav fl"><li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-12 current_page_item menu-item-50">
    Code (markup):
    It's time to do the world a favor, back the **** away from the keyboard, and take up something a bit less dangerous like macramé.

    I would throw that ENTIRE mess out and start over, rather than even TRY to fix even the simplest of layout issues in it, because to be frank, it's that bad... though ENTIRELY what I've come to expect from some sort of goofy "template engine" (which is what I'm assuming "woo canvas" is) and the absurdly useless markup turdpress has the giant set of brass to vomit up and call a website.

    OF course, that's without even mentioning the crappy inaccessible fixed width layouts, inaccessible fixed metric fonts and illegible color contrasts; the trifecta of /FAIL/ at web design.
     
    deathshadow, May 16, 2014 IP