Theme "Alternative" : insert a h1 in the menu title without changing the style

Post Reply
thomasrtr
Ssr. Bludit
Posts: 10
Joined: Wed Apr 15, 2020 11:07 pm

Hi everyone ! I'm working on a website with Bludit. I'm using the theme called Alternative and I want to put a h1 title in the site title, in the menu. In the attachement, you can see where I want to put it.

I know how to do it : I insert some <h1></h1> in the navbar (cf. "In the navbar file" attachment)

But when I do that, my title is becoming too big ! (cf. "What it does in the menu")

I know it has something to do with the CSS. So I made some changes but it doesn't change anything.

So my question is : what do I have to change in the CSS, what do I have to do in order to insert a h1 title without changin the style.

Thanks in advance ! :D
Attachments
What it does in the menu.png
What it does in the menu.png (27.63 KiB) Viewed 3882 times
In the navbar file.png
In the navbar file.png (22.93 KiB) Viewed 3882 times
Where I want to put the h1.png
Where I want to put the h1.png (17.36 KiB) Viewed 3882 times
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

thomasrtr wrote: Wed Apr 15, 2020 11:20 pm So my question is : what do I have to change in the CSS, what do I have to do in order to insert a h1 title without changin the style.
What do you mean with "without changing the style"? Which style should it have?

Can you please give the address of the installation?
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
thomasrtr
Ssr. Bludit
Posts: 10
Joined: Wed Apr 15, 2020 11:07 pm

I didn't install it yet. I worked on it locally, with Xampp.

I want my title to have a 20px size, the default size, even when I put a h1. But when I transform it into a h1 title, it becomes bigger. I don't want it to be bigger, actually. I just want it to stay with a 20px size.

I don't know if I'm clearer :/
thomasrtr
Ssr. Bludit
Posts: 10
Joined: Wed Apr 15, 2020 11:07 pm

@Edi : if you still want to see, you can check this website : http://montre-connectee-sportive.fr/.
dontodd
Ssr. Bludit
Posts: 17
Joined: Tue Dec 19, 2017 1:17 am

The size of h1 is determined by the stylesheet. If you're using Firefox, right-click near it and choose Inspect Element. You can do something similar in Chrome using Developer Tools.

You'll see something like the attached, and you can click on the page source on the left to expand the different areas. When you click on the h1 in the header, you can then see all the styles associated with it in the stylesheet. I would go ahead and tweak those to your liking, with the caveat that it may have an unintended result elsewhere on your site. Note that it even tells you the line number to find it in the stylesheet. You probably don't have to worry about it too much with h1 because it won't be used in many places.
Screen Shot 2020-04-24 at 10.19.24 AM.png
Screen Shot 2020-04-24 at 10.19.24 AM.png (235.92 KiB) Viewed 2954 times
thomasrtr
Ssr. Bludit
Posts: 10
Joined: Wed Apr 15, 2020 11:07 pm

Hi ! Thanks a lot for your reply. In fact, I already did it. I found the file. In my case, I want to change the h1 font size in the bootstrap.min.css, in the kernel file or something. But everytime I change the size (1.25rem in my case, or 20px), it does absolutely nothing !

When I change the slogan from h1 to h2 in the html, it works. But not when I change the site title from I don't know what to h1 in the bootstrap css sheet. :|
dontodd
Ssr. Bludit
Posts: 17
Joined: Tue Dec 19, 2017 1:17 am

thomasrtr wrote: Fri Apr 24, 2020 5:57 pm Hi ! Thanks a lot for your reply. In fact, I already did it. I found the file. In my case, I want to change the h1 font size in the bootstrap.min.css, in the kernel file or something. But everytime I change the size (1.25rem in my case, or 20px), it does absolutely nothing !

When I change the slogan from h1 to h2 in the html, it works. But not when I change the site title from I don't know what to h1 in the bootstrap css sheet. :|
You'll want to change it in bootstrap.min.css, which should be in the css folder, inside the bl-themes/THEME_NAME folder. Be sure to save it and refresh the page. When you refresh the page, do the "inspect element" again so you can see what styles are being applied. If font-size for h1 is anything other than 20px, change it there as well.

If you have caching enabled for your site, you might have to change that as well.
thomasrtr
Ssr. Bludit
Posts: 10
Joined: Wed Apr 15, 2020 11:07 pm

Ok, I just cleaned the cache and it works just fine. I was workin on Xampp. What was I thinking :roll:
Thanks a lot !
Post Reply