How to accurately emulate my website's headings and subheadings


@GCarlD

Well-Known Member
Hi all, it's me again...

Please see attachment.

I am trying to create a new section with the heading ‘FEATURED DESIGNS’ and subheading ‘Our work has featured on…’ but I would like it to match all of my other headings such as the heading ‘LATEST WORK’ and it's subheading ‘Take a look at a few of our recent projects…’

I have found the correct fonts which are my H2 and H1 header fonts, but as you can see from the attached screenshot, I need to make some amendments in order for it to accurately match the headings correctly:

1/ How do I reduce the leading/ space between my ‘FEATURED DESIGNS’ heading and its subheading ‘Our work has featured on…’ to match the spacing between ‘LATEST WORK’ and its subheading ‘Take a look at a few of our recent projects…’?

2/ How do I reduce the font sizes of ‘FEATURED DESIGNS’ and ‘Our work has featured on…’ to match the font sizes of ‘LATEST WORK’ and ‘Take a look at a few of our recent projects…’?

3/ What is the colour code of the grey colour of ‘Take a look at a few of our recent projects…’? I would like to use the same grey colour for my new subheading ‘Our work has featured on…’

4/ How can I move my new heading ‘FEATURED DESIGNS’ and its subheading ‘Our work has featured on…’ further down away from the (GraphiCarlDesign specialises in…) text above it?

Thank you.

(PS. I really did try to do this myself, I had a long go with w3schools.com as I know how simple this must be but here I am. My brain is just not wired for coding, it's one step forward and two steps back once I inevitably mess up the code).
 

Attachments

Paul Murray

Moderator
Staff member
I think the issue you're having is because your markup structure is slightly wrong. By default, your home section has padding at the top and bottom to push its outer edges away and in turn move elements above/below it away. Your new version seems to be missing that as your new section sits very close to this home section, which it shouldn't. This leads me to believe you've written your new markup inside the home section rather than after it,

This might also explain why your new section headings look different as they would likely be inheriting color and spacing values from the home section, which are overwriting the values it should have to make it match the other heading/subheading.

I can provide solutions to your issues, but I think checking the site markup is written correctly should be your first step.
 

@GCarlD

Well-Known Member
This leads me to believe you've written your new markup inside the home section
You are absolutely right, that is exactly what I did because I don't see an option for adding a new section like the ones already built into the theme such as 'my latest work', 'my services, 'blog' etc.

I thought I could emulate the headings by coding it with things such as Padding/ Margin/ Font Face/ Font Size/ Colour, I just don't know how to create correct code for all of these things to work together.
 

Paul Murray

Moderator
Staff member
You are absolutely right, that is exactly what I did because I don't see an option for adding a new section like the ones already built into the theme such as 'my latest work', 'my services, 'blog' etc.

I thought I could emulate the headings by coding it with things such as Padding/ Margin/ Font Face/ Font Size/ Colour, I just don't know how to create correct code for all of these things to work together.
You could do that, but it's a little bit more work to setup and maintain in future. There's likely a page template or a loop somewhere for displaying the content, but without seeing your theme files it's hard to know for sure.
 

@GCarlD

Well-Known Member
I'm not sure what to do? Where are my themes files? In its original zip file?

Does this help?

Screen Shot 2017-05-04 at 15.53.25.png

Is it safe to upload a screenshot of all this code from my site onto a public forum? If not, please delete it for me.
 

@GCarlD

Well-Known Member
Any idea where I have gone wrong in this line of code:

Code:
<p style="font-family=”Raleway”,font-size="15px",color=grey,"Our work has featured on…</p>
‘Our work has featured on…’ does not appear at all when entered into the home page via the 'text' tab.
 

Paul Murray

Moderator
Staff member
Any idea where I have gone wrong in this line of code:

Code:
<p style="font-family=”Raleway”,font-size="15px",color=grey,"Our work has featured on…</p>
‘Our work has featured on…’ does not appear at all when entered into the home page via the 'text' tab.
You need to close the <p> tag, missing a '>' before your text. You also need to close the style elements with a semi colon rather than a comma. Finally, use single quotation marks around your individual styles for legibility and also to ensure you're not closing the style tag prematurely.
Code:
<p style="font-family='Raleway'; font-size='15px'; color='grey';">Our work has featured on…</p>
I'd generally recommend not using in-line styles nowadays, it's a bit of a hack and can cause you more work when you have to update multiple instances.
 

@GCarlD

Well-Known Member
Ah brilliant, thanks Paul, I'll give that a go.

I'll just do it as a one off this time, see how I go..

Thanks again :)
 

@GCarlD

Well-Known Member
Ok so that code kind of worked but just not as I had hoped. It applied the text at the correct size and colour but it ignored the 'class' (is that the correct term?) of the font to be Raleway, I think it just has it as my standard paragraph font...?
 

Paul Murray

Moderator
Staff member
I can't really debug it without being able to see the code or the problem live but I think the problem might be that Raleway is your paragraph/subheading font, your headings are Roboto. Change the font name in your code above and you should be set.
 

@GCarlD

Well-Known Member
Ok maybe I'll create a test page or something and send you the link but my headings and subheadings are my H2 & H1 tags. The H2 Headings are Roboto and the H1 Subheadings are Raleway
 

@GCarlD

Well-Known Member
So essentially what I'd have to do is have two lines of code:

Heading:

Code:
<p style="font-family='Roboto'; font-size='20px'; color='black';">FEATURED DESIGNS</p>
SubHeading:
Code:
<p style="font-family='Raleway'; font-size='15px'; color='grey';">Our work has featured on…</p>

But I have realised, I'll still run into the problem of 1/ Needing the headings to be centred and 2/ Spacing issues

I guess the codes will need to be edited to include the likes of 'centre alignment' and minus value padding?

Also, my main heading should actually be dark grey, I know the rule is to never use black on websites...
 

Paul Murray

Moderator
Staff member
You can muck about with adding other CSS style elements until you get everything looking correct. I still think the best way is to create the new section using the same markup structure as the others if you can so they all follow the same CSS rules.
 

@GCarlD

Well-Known Member
You can muck about with adding other CSS style elements until you get everything looking correct. I still think the best way is to create the new section using the same markup structure as the others if you can so they all follow the same CSS rules.
I would much prefer to create a new section, that was my original intention but I just don't know how; I keep messing up other parts of the site when I try to delve too deep into code, which for anyone with coding knowledge is probably shallow waters.

I struggle with simple lines of codes (as above) :cry:

From the little I know, I would imagine to create a new section I'd need to edit/ add to the code of the theme, which could be disastrous for my whole site if I mess could with the wrong part of the theme's code.
 

@GCarlD

Well-Known Member
Ok, so here is where I am at with the code, seems to be all good:

Code:
<p style="font-family='Raleway'; font-size='15px'; color='grey';text-align: center;">Our work has featured on…</p>

The only problem is, it seems to be ignoring the font and font size in the code and sticking to the pre-set 'Paragraph' style font and font size of the theme. Is there a way around this?
 

Paul Murray

Moderator
Staff member
A CSS file is read from top to bottom and if you set the same value for something twice, it will use the latter version. This is why sometimes values don't seem to change because you have a duplicate somewhere that comes after your declaration. I'm not sure if this is the case here, but you can force an override by adding !important to the end of your CSS value declaration. Try something like this;

Code:
<p style="font-family='Raleway'!important; font-size='15px'!important; color='grey';text-align: center;">Our work has featured on…</p>
 

@GCarlD

Well-Known Member
Does that code go into the Custom CSS section? If so, won't that change all of my paragraph styles to Raleway size 15 grey etc? I'd like all my paragraph styles to remain as they are, it's just this heading I'd like to specify.

If I am right, maybe I can use my H tags that are not in use, rather than the P tag? I think I am only using H1 and H2, is there a way to check weather H3-H6 are being used on my site? As I can then 'overwrite' an unused H tag with your '! important' code above.
 

Paul Murray

Moderator
Staff member
No, it won't affect all your paragraphs since the code you're using is being applied inline so it will only affect to the tag that it is applied to, in this case, this <p> tag in particular. The code is added into the HTML markup, it's exactly the same as what you had earlier but with !important added before the closing semi-colon.

In terms of semantics, you probably should use H tags if they're headings. P tags are for paragraphs and I don't think what you're using the p tag for here constitutes a paragraph of text. Semantic CSS is a whole other can of worms, and there's often not a 100% correct way of marking up a page, just what is considered "best practice." Technically you could just use a <div> tag to mark up each heading/subheading since it's not a headline to an article, it's more of a title or 'general content'.
 
Top