LOGO AND ID SITE

[Emanuele Dottori]

Hello, can you help? I’m a very beginner on building website…
How can I put both my image logo and the name of the website in the headline of my homepage?
It seems to me that they can’t be there at the same time: when I put the logo, the site identity disappear, and I can’t find a way to add an image in any place of the heading.
And also: as to do so, do I need to create an image with the brand-name?
Thank you!

[Zex]

Hello, Emanuelle!

At the moment, there is no option in the customizer to do this, the easiest way is to create an image with your logo and name on it and set the image as a logo.
There is another option to add a text beside the logo, using the Custom CSS code. If you decide to do that, first place your logo on the website and then I will give you the appropriate code to add a text next to the image.

Regards

[Emanuele Dottori]

Hi Zex,
thank you. I’ve already put the logo alone. Can you send me the code to put a short text under it?
I have no experience in coding, so I really need one of your clear explanations.

Thanks for your help!

[Zex]

Hello,

Insert the next code into Customizing->General->Additional CSS:

#agama-logo a.vision-logo-url::after{
    content:"THIS IS THE SITE NAME";
    display:block;
    text-align: center;
    margin-top:20px;
    font-size: 30px;
    color: #757575;	
}
@media screen and (max-width: 600px) {
  #agama-logo a.vision-logo-url::after{
    font-size: 20px;
  }
}

Change the text, font-size and color values per your needs.

Regards

[Emanuele Dottori]

Hi Zex,
I have tried to put the code in the space you told me, but I have 2 questions still:
– Do I have to erase the previous code about the menu?
– Or do I have to put it in the next line below?
– I tried to put in the line below but it reports 3 mistake: “Expected colon at line 2, col. 4″; unexpected token ‘&’ at line 5., col. 12”; “Expected colon at line 5, col. 23”

I’m sure you can help to fix this.
As I told you, I’m not good at all in coding, so I guess you’ll have to be patient and explain every single thing in a very simple way…….

Thank you!

[Emanuele Dottori]

Just Resolved!!!

[Zex]

Hi,

No problem 🙂

Just insert this codes below the code I gave you earlier, so your code at the end should look like this :

https://prnt.sc/mqr47z

Regards

[Emanuele Dottori]

Hi Zex,
how can I customize the typography of the “motto” under the logo of my website?

Thanks!

[Emanuele Dottori]

And… how can I choose the color of the bar under the selected page of the menu?

Thanks!

[Zex]

Hi,

If you want to change the font style of your text below the logo, insert the next code into Customizing->General->Additional CSS:

#agama-logo a.vision-logo-url::after{
   font-family: Verdana, Geneva, sans-serif;
}
@media screen and (max-width: 600px) {
  #agama-logo a.vision-logo-url::after{
    font-family: Verdana, Geneva, sans-serif;
  }
}

Change the font-family per your wish.

[Zex]

Hi,

The color of the line in the primary navigation menu, that marks the currently opened page is linked to the Primary color of the site. This color can be changed from the
Customizing ▸ General ▸ Skins menu.

https://prnt.sc/mxh8a9

or by inserting the next code into Customizing->General->Additional CSS:

.main-navigation .current_page_item > a:not(.sub-menu-link){
   border-bottom-color: #c63e92!important; 
}

You can change the color code per your needs.

Regards

[Emanuele Dottori]

Thanks for answering so quickly, Zex!
but actually I would like to change only the spacing between the letters in the single words (I should have been more precise, but I thought that there could have been a way to customize the entire typography: does the code you gave me can make this?).

And what about customizing the color of the bar under the voices of the main menu?…

Thank you again!

[Zex]

If you want to change the letter spacing, insert the next code instead of the code I gave you in the post #12798

#agama-logo a.vision-logo-url::after{
   letter-spacing: 5px;
}
@media screen and (max-width: 600px) {
  #agama-logo a.vision-logo-url::after{
    letter-spacing: 5px;
  }

Change the letter-spacing value per your wish.

[Emanuele Dottori]

it gives me an error:
“expected rbrace at line 25, col.4” (the last line)

can you help?

Thanks!

[Zex]

Yes, you are right. One bracket missing at the end…

Here’s the corrected code:

#agama-logo a.vision-logo-url::after{
   letter-spacing: 5px;
}
@media screen and (max-width: 600px) {
  #agama-logo a.vision-logo-url::after{
    letter-spacing: 5px;
  }
}

Sorry about that 🙂

Regards

[Author]

Posts