Some things I'm having trouble with

[AStA Uni Siegen]

Hey there,

I’ve just upgraded to Agama Pro. I usually work with the style.css a lot. Since the style.css in Agama Pro is nearly empty, I don’t know how to reach my goals now. It’d be great if someone could help me with the following plans:

1. I’d like to remove the borders of my blog grid view. In the Agama Light Theme, this was very easy since I only needed to set the borders to 0px.

2. I don’t want any uppercase text transformations on the website. I had changed all of the uppercase texts in the light theme manually. Since there is no style.css, I’m not sure how to change these styles now.

3. The e-mail and phone number social icons in the top navigation are bugged. They won’t show. I’d also like to change the hover colors of the social icons. Again, this is what I’d already done in the light theme’s style.css.

4. I don’t need any Google Fonts. I’d like to remove all of them and instead upload my own font packages. I’d like to use “Coolvetica” for all headlines plus navigation and “Avenir” for all other texts.

5. I’d like all sub-menu options to be one-lined, so the width of all submenus should be set to auto.

Amazing theme tho!! I guess I’ll just need to get used to it a little more 😉

Sebastian

Start

• This topic was modified 5 years, 8 months ago by AStA Uni Siegen.

[AStA Uni Siegen]

This reply has been marked as private.

[Zex]

Hello, Sebastian!

If you want to add some custom CSS codes to modify your theme, there is a place in Theme Customizer, where you can do it, instead of modifying a theme CSS file.

Simply go to Customizie->General->Additional CSS menu, and insert your custom CSS codes.

If you will need a help with a generating custom CSS codes, contact us again.

Best Regards

[AStA Uni Siegen]

I actually do need help with the codes then. Since I’m not a programmer I usually just look for codes I can modify. I’ve never created codes myself. If you could help me with problem no. 3 and 5, that would be absolutely fantastic! For some reason, the social icons in the footer are now gone, too. I don’t know why that is tho. So if you could help me with that as well, I’d really appreciate it.

[Zex]

Hello, Sebastian!

No1:
Ok. That can be a way…

No2:
Insert a next code in Customize->General->Additional CSS:

body{
	text-transform: lowercase;
}

No3:
There is no problem with the social icons in the Agam-Pro v.1.4.2 theme,

Maybe you need to check if you have a problem with incompatible plugins that you have activated.
To do that, please deactivate ALL plugins you have activated and check the social icons again.

For the social Icons in the footer area, please go to :
Customizing ▸ General▸ Extra menu an check that you have not accidentally turned off FontAwesome.

https://prnt.sc/iktq4w

If the option is turned off, please turn it on and then check the icons in the footer again.
If none of the above is helpful, please contact me again.

No 4:
You can not simply delete google fonts from the theme because the theme will not work properly.
Which Plugin have you used to add your font?

No5:

Insert a next code in Customize->General->Additional CSS:

.sticky-nav>li>ul, .sticky-nav>li>ul.sub-menu, .sticky-nav>li>ul>li {
	display:inline-block;
	width:auto;
}

https://prnt.sc/ikujro

Best Regards

[AStA Uni Siegen]

Thank you so much!! It all worked fine, except for problem no. 3.

Header area:
I deactivated all plugins, but nothing has changed. I also cleared the cache to see if it makes a difference, but it didn’t. I didn’t have this problem back when I used the Agama Light Theme. As soon as I had upgraded to the Pro Theme, the problem occurred.

Footer area:
I’m using the Font Organizer (made by Hive) and it causes trouble with the footer area (it doesn’t touch the header icons for some reason), so that is the reason here. I’ll find a solution for this myself.

[Zex]

Hello,Sebastian!

Problem with the social icons on the top bar happens because of the translations.

Anyway, it can be solved by adding next codes in Customize->General->Additional CSS:

.fa-telefon:before {
    content: "\f095";
}
.tv-telefon:hover {
  background-color: #A2C605;
}

.fa-e-mail:before{ 
  content: "\f1fa";
}

.tv-e-mail:hover{  
  background-color: #6567A5;
}

Change the hover background-color per your wish.

Best Regards

[AStA Uni Siegen]

Thank you so much!! It worked just fine.

[Author]

Posts