I need help to edit the CSS of the Argent theme please :)

  • Unknown's avatar
    chris10988 · Member ·

    Morning all,

    Im pretty new to this and Im lookign for a little help please? I have done about 60% of my website using the Argent theme however I look at it on the preview and I want to change a few things which are bound by the theme layout. For example –

    – At the top of the pages between the bottom of the header image and the top of H1 there is quite a lot of white space which is doing nothing. Is there a way to either reduce the size of the header image to bring the text up higher?

    – The text on H3-H6 the font always is in upper text, is there a way to have it in lower case?

    I think this covers my main issues with the theme, hopefully this is something simple and you guys can point me in the right direction. The other option is to find a different theme which I’d rather not do as I quite like this one.

    Any help is appreciated. :)

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    siobhyb · Member ·

    Morning. :)

    – At the top of the pages between the bottom of the header image and the top of H1 there is quite a lot of white space which is doing nothing. Is there a way to either reduce the size of the header image to bring the text up higher?

    You can reduce that space by adding the following snippet via the CSS panel of the WordPress.com Customizer:

    .site-main {
    margin-top: 1.8em;
}

    Increase/decrease the value of margin-top in order to increase/decrease the amount of space between the header image and the top of the first H1. Please note that increments/decrements of 0.1 are enough to have an impact e.g. 1.7em, 1.6em, etc.

    – The text on H3-H6 the font always is in upper text, is there a way to have it in lower case?

    I’m only seeing text within H5 and H6 tags being transformed to uppercase. If you’d like to stop that then you can make use of the following snippet:

    h5,
h6 {
	text-transform: inherit;
}

    The widget titles are also transformed, which you can change with the following:

    .widget-title {
    text-transform: inherit;
}

    Let me know if the above snippets help out or if there’s uppercase text elsewhere on your site that you’re trying to change.

  • Unknown's avatar
    chris10988 · Member ·

    Hi,

    Thanks for the reply and the info, its worked perfectly! A couple of other areas to the theme I’d like to change if possible :)

    – I’d like to reduce the white space between the bottom of the header image and the top of the page title?

    – I’d like to reduce the line spacing between the page title and the heading paragraph?

    – Is there a way to choose the font size for each of the heading choices?

    – Is there a way to set the line spacing to default and not what the theme suggests?

    – How do I reduce the height of the menu bar?

    A lot of questions I know but I think thats all of them and the answers will help greatly.

    Thanks in advance!

  • Unknown's avatar
    bettineoleo · Member ·

    hello chris,

    I’ve done mine with SiteOrigin CSS. Here’s the link: https://wordpress.org/plugins/so-css/

    If you don’t want the plugin to become another load to your site you can do a little trick.

    – install the plugin.
    -do your modification
    -save the code
    -uninstall the plugin
    -paste the code in the wordpress css customizer

    hope that help.

  • staff-loquaciousloon · Staff ·

    That’s a cool plugin @bettineoleo!

    If you don’t have a self hosted site you can install the plugin on to test with @chris10988 you can also use your browser inspector to find the items you want to change.

    For example:

    I’d like to reduce the white space between the bottom of the header image and the top of the page title?

    Using my browser inspector, I was able to locate the margin that is causing that spacing:

    .site-main {
    margin: 3.5556em 0;
}

    The first number is vertical, the second is horizontal. So if we change that to a 1, there will be a much smaller space above (and below) the content.

    Is there a way to choose the font size for each of the heading choices?

    Do you mean the choices under My Site > Customize > Fonts? If so, there isn’t a way to set what ‘large’ is (for example) but you can target your headings with CSS to change their sizes:

    h1 {
   font-size: 28px;
}

    Some elements on the page may need to be more specifically targeted – use your browser inspector on specific titles if they don’t change when you add new sizes :)

  • staff-loquaciousloon · Staff ·

    I’d like to reduce the line spacing between the page title and the heading paragraph?

    Using my browser inspector again, it looks like .page-header is the element with the margins this time.

    Try this!

    .single .entry-header, .page-header {
    margin-bottom: 1em;
}

    That will target both page and blog post titles.

    Is there a way to set the line spacing to default and not what the theme suggests?

    You can tell the theme to use the browser’s default line height, yes:

    body {
   line-height: auto;
}

    How do I reduce the height of the menu bar?

    There’s a bit of padding on each of those menu links that makes the menu bar a little taller. Try adding this to your CSS:

    @media screen and (min-width: 768px) {
.main-navigation ul li {
   margin: 0 1em 0 0;
}
}

    Those numbers (from left to right) are the top, right, bottom, and left padding. Leave the 1em for right padding, as that’s what gives them their spacing between the links.

    Also – make sure you get both of those closing curly brackets. We’re using a Media Query here so we don’t break the menu bar on smaller screens. That means a second layer of brackets :)

  • Unknown's avatar
    chris10988 · Member ·

    staff-loquaciousloon @bettineoleo thank you so much! The info you have given me has done exactly what I want. Ive never been a member of such a helpful forum!

    One side effect from reducing the padding of the tool bar at the top, its now put a small gap between the bottom of the tool bar and the top of the drop down menu bar. Ive reduced padding by 18px on the tool bar so I just need the drop down menus to be raised up by 18px if possible?

  • staff-loquaciousloon · Staff ·

    Happy to help!

    It looks like you’ve used some negative margins to get the size down a bit more – which will work, but can sometimes be tricky to predict with other elements (like your dropdown!)

    Try replacing the navigation CSS you have now with this: 

    @media screen and (min-width: 768px) {
	.main-navigation ul li {
		margin: 0 1em 0 0;
		padding: 0.1875em 1em 0.1875em 0;
	}
}

    Basically, we’re zeroing out the top and bottom margins, and then trimming down the top and bottom padding as well. That should get the size you had before without any gaps :)

  • The topic ‘I need help to edit the CSS of the Argent theme please :)’ is closed to new replies.