Identifying theme options relevant to a problem using firebug

  • tom_sj2

    (@tom_sj2)


    10 years, 4 months ago

    Hello,

    I am wondering if there is some way of learning how a WP theme is behaving in terms of the HTML page divisions.

    For example, I on my homepage I am trying to remove a page-wide horizontal strip that is 55px tall, directly beneath a slider. I’m not sure why it’s there and no settings in my theme seem obviously to refer to it (the page itself in WP has nothing on it, so it must be something to do with the theme settings).

    I’ve started using firebug (or sometimes Chrome inspector) to identify a div on a page. I then tweak it a bit and often see the correction appear on firebug (or inspector). Sometimes, but generally with difficulty, I can locate the appropriate lines of CSS and drop them into a theme’s CSS editor to affect the changes.

    I found in this case I could control it using:

    <div id=”main” class=”clearfix width-100″ style=”padding-left:30px;padding-right:30px;padding-top:55px;”>

    By changing the padding-top to 5 I got the required result.

    However, unfortuantely I’m no closer to actually achieving this on my site because I haven’t been able to locate this 55 padding control anywhere.

    I could possibly achieve this with custom CSS but wondered, is there somewhere in the firebug readout a pointer or hint at least to the WP option I should looking at? If I could hone it e.g. to the slider settings or footer padding this would narrow down the search area.

    I am a beginner really but this would help a lot with what I found the most time-consuming aspect of putting sites together -hunting down rouge settings; sometimes for very simple things (as in the above).

    if anyone’s reading, thanks!

    Tom

Viewing 8 replies - 1 through 8 (of 8 total)
  • neotechnomad

    (@neotechnomad)

    10 years, 4 months ago

    You can create a Child Theme for any changes, as when the main theme updates, all the changes you may have made to the main theme will be lost. Or you could use a Custom CSS plugin for any changes.

    You would find the parameters for this…
    <div id="main" class="clearfix width-100" style="padding-left:30px;padding-right:30px;padding-top:55px;">
    …in your theme’s CSS (styles.css).

    You would look for both #main and .clearfix and .width-100.
    #main would be the actual ‘box’ the content is in and have certain parameters
    .clearfix modifies the ‘box’ with its own parameters that are stated in the css
    .width-100 sets a fixed width of 100px (pixels) to the ‘box’

    This…
    style="padding-left:30px;padding-right:30px;padding-top:55px;"
    …is termed “inline styling”, which actually should not be used as it is difficult to alter by using css, but it can be done.

    One of the best sites for learning HTML and CSS is Codecademy

    Thread Starter tom_sj2

    (@tom_sj2)

    10 years, 4 months ago

    OK, thank you.

    I tracked this down in the CSS and will put the tweaked line in a custom CSS file.

    I suppose my original instinct was that it’s better to find the option within the theme (and mine is Avada, a premium theme with I think it’s fair to say, comprehensive settings).

    But if done via a few lines of custom CSS it makes no difference to the load time or anything else I guess.

    thanks for getting back to me
    Tom

    Digico Paris

    (@digico-paris)

    10 years, 4 months ago

    @tom_sj2

    In general i use code inspector in Chrome or Firefox to do that and spot the overall areas.

    Then, like you rightly said, if done by custom CSS, it’s a bit harder to edit – some themes use php to write the CSS on the fly which makes it a bit harder to find where to update.

    In that case, use theme faq or docs to find where is the CSS exactly.

    Hope it helps,

    Thread Starter tom_sj2

    (@tom_sj2)

    10 years, 4 months ago

    that does help. yes I’ve been in that situation and had no idea how to implement the css change even though I got it working on chrome inspector quite easily.

    perhaps the real answer is ‘understand Php’ a bit.. but it seems a lot of general learning to do a few small css tweaks. I’ll look at code inspector Digico – thanks for adding that.

    Tom

    Digico Paris

    (@digico-paris)

    10 years, 4 months ago

    You’re welcome,

    And thanks for the feedback, well php is not a hard language to learn for what you need, with a good text editor you can browse and search tons of php files. What you’ll look at is ‘echo <class> or so’ for the area you don’t find the CSS.

    And yes, a good free html/css editor like PSPad can search across dozens of file. In general but again depends theme, there are functions in functions.php of theme, that rewrite some parts of CSS.

    As for PHP, it’s really not a huge deal, try edit it a little and learn, compared to other web languages it’s kinda easy to learn (tons of tutorials too on the net like for WP).

    Good luck 😉

    Thread Starter tom_sj2

    (@tom_sj2)

    10 years, 4 months ago

    ok, well, that’s interesting to hear. I’d understood Php was harder than css or html. I am vaguely familiar with the basics of both but have not had to use them in practice much, being able to do *most* things via the WP dash.

    I’m not sure, perhaps the consensus among serious users or site designers is that all three are necessary to have any real control over what WP eventually produces.

    thanks, again
    Tom

    Digico Paris

    (@digico-paris)

    10 years, 4 months ago

    It is harder than css and html right, but not so ‘hard’.
    Everythin is quite logical in php and quite self explanatory, really trust me on that (compared to node or other web languages).

    It also depends if code it commented well, that again depends on the author of code and if he had time to comment what does what in code (a bit like in css by the way).

    As for consensus, my 2 cents working with WP for years and webdesigner, the issue is in general grabbing all skills together rather than code or language. I don’t say it to be rude, it’s something only a few businesses do well in coordination / project management.

    After, to make a great website is, yes, a big project which requires a lot of involvement, WP doesn’t skip that, a great (really great) website is a project that needs both a lot of time and skills.

    And on the technical side, if you want to do that, yes clearly a good php skill is needed, but WordPress php is not like you need to write a rocket or so, tons of tutorials around and once you get the structure it’s all more clear.

    WordPress Page Rendering Structure

    like this one,

    Hope it helps you see better on project Tom,

    Thread Starter tom_sj2

    (@tom_sj2)

    10 years, 4 months ago

    cheers! don’t exactly follow that yet, but will take a copy of the pic, will be useful I once have put the different pieces of PHP in place in my head ..

    i agree so far have been looking at providing websites for people (small businesses). I realise already I need to know photo, video, text editing skills before I even begin with WP. And then, clearly beside some amount of coding awareness there’s the hard task of being design savvy and able to assist clients in thinking about what image they want the site to project, as well as being able to being able to offer creative ideas in areas they hadn’t necessarily considered.

    so all in all (and I don’t suggest this is even the beginning of the different skills/sub-skills needed) – the hard bit seems to be in knowing what broad abilities might be required – and then getting to grips with them.

    But on the upside it seems a great creative role and is great fun providing a site that people love.

    thanks, (and sorry, have just been sounding off a bit)!

    Tom

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

The topic ‘Identifying theme options relevant to a problem using firebug’ is closed to new replies.