• Resolved benshepp

    (@benshepp)


    @acosmin, This is a great responsive professional looking theme! Thanks for releasing it! I created a child theme and am ready to start customizing now.

    I have a few things I would like to try modifying. The first thing I need to do it learn how to scale heading font sizes, etc. I know this is responsive so its probably not as trivial as setting a font size on H1, H2, H3, etc. There must be more than a few places or does it use some dynamic changing magic based on browser screen width?

    Could you give me a few pointers on where to start and include scope so I will understand what I am messing with? I like the way you divided up style.css into sections with commented descriptive headings! VERY HELPFUL!!! I am not afraid of diving directly into the CSS, PHP, or JS to figure things out if need be and anything cool I may come up with will certainly be shared back. Thanks!

    Ben Sheppard

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author acosmin

    (@acosmin)

    I don’t really have the time to help with customization.

    A simple way to find which class is applied to an heading is to use the “Inspect Element” feature in Google Chrome…

    Open your website in Chrome, put the mouse hover an element you want to change, right-click and click on Inspect element. On the right side there should be a box displaying some of the css applied to that element. Copy the class name, paste it in style.css and add your own styles to it.

    You might want to take a look in ../assets/css/media-queries.css. This file is responsible with the responsive part. If your screen resolution is bellow 1920x1080px this is where font sizes change.

    Some resources:
    https://developer.chrome.com/devtools/index
    https://developer.chrome.com/devtools/docs/elements
    https://www.youtube.com/results?search_query=Inspect+Element

    Thread Starter benshepp

    (@benshepp)

    Hi @acosmin,
    Thanks for any help you can provide! I understand its a free theme. Just providing the theme alone was fantastic! I don’t need extensive help… The few pointers you provided above really speed things up for me!

    I see the link to media-queries.css inside a comment at the bottom of style.css and now realize this must be major place I needed to do things to customize the responsive part. Thanks for that…

    So, I copied assets/css/media-queries.css into my JustWrite-child theme to see if that overrides the parent. I have ‘Display Element Info’ via a Developer plug-in for Firefox and use those all the time, (not being a particular fan of Chrome, Blink or Webkit).

    So… I made some changes to my instance of media-queries.css, but the font size values are not changing… Maybe I am missing a step for properly setting up a child theme? The WP docs seem to indicate that any file (except style.css) copied into the child will override the parent’s.

    So I am back reading the WordPress docs on that again… This is my first attempt at really customizing a WP theme although I am a veteran programmer from past years…

    I am also trying to modify the way the logo responds to screen size on top as well. I am using a longer logo (banner with logo and title integrated in a fancy graphic). I don’t need the default HTML title part in the header. So I need to take up the slack on that and float the logo (banner) to the left rather than centering it in some cases as the Theme is doing by default.

    I saw the .logo{} style def in media-queries.css as well, so I will fiddle around with that and see what happens. Again not to ask for too much of your time, any ‘gotchas’ you may think of will be truly helpful! Thanks!
    – Ben

    Thread Starter benshepp

    (@benshepp)

    OK… I never told anyone, but the reason I asked for help above was because no matter what I tried to do in my child theme… there was no change on the rendered site… It was really bothering me… I thought was doing something wrong, and that i needed to learn how to do child themes better. This is my first one… ??

    I reasoned my style sheets were not being used and thought I had missed some step.. but when I looked in the theme editor window I could clearly see that my child’s style.css was there. Days later I looked at source code of a rendered page and clearly saw the style sheets belonged to the parent, NOT the child! There were no paths to any child .css to be found. So then I really started digging through the code doing a lot of head scratching…

    Tonight, I found the problem, and fixed it. I need confirmation on this though. Is anyone else making child themes from this experiencing difficulty changing style parameters, or even adding new styles? Everyone with a JustWrite-child should be seeing this problem, not just me…

    Here is what’s happening:

    Functions.php contains the following Load CSS function: ac_css_files()

    Inside that function, calls to wp_enqueue_style() are getting the stylesheets using get_template_directory_uri().

    Code Example from ac_css_files() near line 100:

    // Enqueue
    		wp_enqueue_style( 'ac_style', get_template_directory_uri() . '/style.css', array(), '1.0.1', 'all' );
    		wp_enqueue_style( 'ac_media_queries', get_template_directory_uri() . '/assets/css/media-queries.css', array(), '1.0.1', 'all' );
    		wp_enqueue_style( 'ac_icons', get_template_directory_uri() . '/assets/icons/css/font-awesome.min.css', array(), '4.0.3', 'all' );

    I read a bunch of docs in WP Codex about themes and they all talk of using get_stylesheet_directory_uri() to make the theme work correctly when you need to insure the theme can be easily turned into a child theme later.

    So.. I changed it in my child’s functions.php so it looks like this:

    // Enqueue
    		wp_enqueue_style( 'ac_style', get_stylesheet_directory_uri() . '/style.css', array(), '1.0.1', 'all' );
    		wp_enqueue_style( 'ac_media_queries', get_stylesheet_directory_uri() . '/assets/css/media-queries.css', array(), '1.0.1', 'all' );
    		wp_enqueue_style( 'ac_icons', get_stylesheet_directory_uri() . '/assets/icons/css/font-awesome.min.css', array(), '4.0.3', 'all' );

    That did it… Everything works fantastic now… I can change anything and see it working! I hope this helps anyone else struggling to make this fantastic professional looking theme into a child!
    cheers!

    Hello,
    I’m a newbie in customizing theme …
    Can you help me for just one small point ?

    How can I change in parent theme (no using child theme for the moment) the size of the post title.

    I think it’s h2 class.

    My URL is https://www.altoparlante.info/

    Can you help step by step ? Maybe for you it’s easy ?
    Thanks

    If you require assistance then, as per the Forum Welcome, please post your own topic instead of tagging onto someone else’s topic.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Scaling Titles & Headings’ is closed to new replies.