Tesla Theme, CSS codes


(Cristiana) #1

Hi, I am getting crazy really. I want to change the fonts of the top navigation bar in Tesla and I am not able to find the correct CSS code for that. I have tried everything!! Can someone help me? I also saw the tutorial, but still didn’t work out.
Thanks!


(Doug Bennett) #2

What code to you try?
What are you changing size, family?
Do you have a URL we can checkout?


(scott williams) #3

I’m not sure what exactly you mean by "I want to change the fonts"
but as an example, here is how to target the top nav:

nav#top_navigation{
font-size: 1.5rem;
font-family:serif;
}


(Cristiana) #4

Thanks! I manage that! Still have some strange thinks going on. These are my biggest problems (I must mention that I am really not good with CSS at all):

  1. I want to change the color of my links but not everywhere! Is there a way to isolate some links and customize them without changing all links?
  2. Can I transfer my CSS to the stacks I am using?
  3. The mobile preview of the site looks different than the wider view. When I open the navigation bar (pull down menu) and I move the mouse on the link, then instead of keeping the white background, it turns to grey. Do I have to use othe CSS for the mobile bar?

Thanks guys, I am greatful for any help!
Cristiana


(scott williams) #5

First, Its very difficult to help you with CSS without a URL.

I want to change the color of my links but not everywhere! Is there a way to isolate some links and customize them without changing all links?

Yes it can be done but you have to target that specific link.

Can I transfer my CSS to the stacks I am using?

I don’t follow, you will need to explain further. You can alter CSS site wide or on a per page basis. You can use the CSS box stack to assign a CSS class or ID to the contents you place in that CSS Stack. What exactly is it you are trying to do?

The mobile preview of the site looks different than the wider view. When I open the navigation bar (pull down menu) and I move the mouse on the link, then instead of keeping the white background, it turns to grey. Do I have to use othe CSS for the mobile bar?

Yes, the mobile menu and desktop menu are more than likely two different things on just gets replaced with the other via a media query set to a specific breakpoint. I have no idea what the targeting is without a URL to see the site.


(Cristiana) #6

Hi,
well the problem is, that I don’t have a URL jet, the site is new, I am creating it. I just bought the Tesla Pro Theme and try to build the site with the correct colors I need. I need to alter the CSS site wide and I never worked with CSS before, so sorry for my lack of explanations ;-(. I need to have a navigation bar which is looking the same in the mobile and desktop menu (preview). I upload some pictures to show you what I mean. As you can see, in the desktop version the menu links are white when I go on them with the mouse. This is not the case on the mobile site. They turn grey! Tht’s my problem. They should look exactly the same, including fonts and colors.

Concerning the links, what does it mean to target the specifi link? Assuming I have a word which has to be linked. I assign the link and then? How can I ‘target’ it and make the CSS changes once I have it?

As I don’t have a URL, what can we do?
Many thanks!


(Cristiana) #7

I made a preview of my page with this url:
http://127.0.0.1:60904

Can you see something?


(scott williams) #8

No, I can’t see that URL.

I can’t really help without a URL, I would have to make a site myself using tesla pro to see the CSS and I don’t have tesla pro.

Sorry, maybe someone who has tesla pro site can help. Or you could publish to a test directory or similar.


(Cristiana) #9

I’ll try that…test directory :wink: Thanx!