Jump to content
Sign in to follow this  
IAmGrammy

Getting user CSS to override system CSS

Recommended Posts

I have the latest version of Frozen (downloaded yesterday from Github).  So far, so good.  I'm just doing a little tire-kicking and tweaking.  On the storefront page, I didn't really want a "Welcome to STORE NAME" message, but I did need some navigation links that were in keeping with the rest of the site, so I edited the language page.  It works well (I hope I don't blow up the database!) but my user.css class for the links doesn't work on "hover".  Links should be red on hover, but they are blue. The hover aspect seems to be inherited; I guess from Bootstrap.  I'm attaching a screenshot; can you tell me how to nudge it to behave?

1.jpg

Share this post


Link to post
Share on other sites

I'm sorry, I guess I could also show my CSS:

.storenav {
color: #000000;
font-size: .8em;
}

.storenav a:link{
color: #000000;
}

.storenav a:visited {
color: #000000;
}

.storenav a:hover{
color: #FF0000 !important;
text-decoration: none;
}

 

Share this post


Link to post
Share on other sites

how are you specifying the class storenav in your HTML?

if its like this, it should work:

<a class="storenav" href="#">...</a>

Share this post


Link to post
Share on other sites
6 hours ago, IAmGrammy said:

so I edited the language page. 

The best way to do this would be for you to turn off this module and make a new one for links. That said even when you edit you need to take into account what class is beeing used in that module. For the welcome message assuming you are using Frozen BS3 it is,

image.png.191a5f5cdfc682868a69b82a8ebf0f8c.png

Looking at your image it looks like it may still be "h3" that is driving your text!

It would be much simpler to help if you post a link to the site so the code can be inspected, or you can do this your self, simply use your browser inspect tool to see which class is driving the item you wish to change.


 

Share this post


Link to post
Share on other sites
6 hours ago, IAmGrammy said:

.storenav { color: #000000; font-size: .8em; }

 

1) If html is

<a class="storenav" href="#" ...

the css should be

a.storenav{ ...

You are targeting a "a" element that has a class "storenav"

2) if html is

<div class storenav>
  <a href="#" ...

the css should be

.storenav a { ...

You are targeting a "a" element that comes after another element with class "storenav"

 

 

Share this post


Link to post
Share on other sites

Thanks so much, guys! 

@multimixer  It turned out to be as simple as that!  I had the class inside the anchor tag, but I had the CSS

.storenav a{}

I edited it to

a.storenav {}

and it plays nice, now!

I am still playing with things, so I'll look into turning off that module and making a new one for links, as was suggested.  I really do need to get out of my habit of "duct tape" coding, ha!  Thanks again.  😊

Share this post


Link to post
Share on other sites

Can I just say, though, that, ideally, I would have liked to have links up in that black band at the top.  That way, they'd appear, no matter where the user clicked.  But I just cannot, for the life of me, pick the lock to get in there.  (attached)  Is that area a module?

2.jpg

Share this post


Link to post
Share on other sites

Better to explore the existing options as you will find most are already coverd! Look in Navbar Modules in admin/moduels

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites

Well.....   I did see that there, @JcMagpie but all I find available are:  Account, Brand, Hamburger Button and Shopping Cart.  None of those seemed appropriate.  I see that I can add Modules there (there are a total of 7 available to add, one of those being "Home").  That would be great, but am I limited, then, to just a Home button in that area, and unable to add the rest of my site's nav choices?  I would like to at least add "About" "Gallery" and "Contact".  Too much?

Share this post


Link to post
Share on other sites

You need to consider mobile view, it may look good on pc but how will it look on mobile. All the functions you need are avilable as box, footer , header or navbar.

If you wish all in navbar then yes you can just make a new navbar moduel to add any custom requirments.

Best to turn on ant try existing modules to see if you can work with that first.


 

Share this post


Link to post
Share on other sites
14 minutes ago, IAmGrammy said:

Well.....   I did see that there, @JcMagpie but all I find available are:  Account, Brand, Hamburger Button and Shopping Cart.  None of those seemed appropriate.  I see that I can add Modules there (there are a total of 7 available to add, one of those being "Home").  That would be great, but am I limited, then, to just a Home button in that area, and unable to add the rest of my site's nav choices?  I would like to at least add "About" "Gallery" and "Contact".  Too much?

No it's not too much. Look at the nb_new_products module, then you can create what you want using that as an example.

The default breakpoint for the navbar is -lg

if what you add breaks the layout you would have to change the breakpoint to -xl

Share this post


Link to post
Share on other sites

Thanks so much, guys.  I'm taking all this into account and trying to tread softly and slowly, which is why I"m slow to return to the thread.  I know I'm only working on a test site, but I'd rather not break it if I don't have to, ha. 

Share this post


Link to post
Share on other sites

I agree; I think what would look best for what I'm trying to achieve is to somehow clone an existing navbar module and re-purpose it.  I'd have to do a "Save As..." on the existing files and edit them and that is all relatively easy.  My challenge will be adding the newly created module to the database, particularly since I am not proficient with SQL insertions.  I'll stop what I'm doing and begin searching this site for any tutorials and/or advice for database insertion queries but, in the meantime, if someone stumbles on this and can point me in the right direction for that step, I'd greatly appreciate it. 

Share this post


Link to post
Share on other sites

2 simple navbar modules, one for contact us using existing contact us code, the other for about us adding new code for about us text.

Simply copy files over and go to admin and install. The about us text is done by editing the file  /public_html/includes/languages/english/aboutus.php

https://apps.oscommerce.com/3YnXr&amp;jcm-navbar-about-us-and-contact-us-v1-0

 

You can use them as is or edit as you like.

Any issues just post in support thread or PM.


 

Share this post


Link to post
Share on other sites

@JcMagpie  My goodness; that is AMAZING!  I'm going to study these files just to learn what I can about the process, but really.... thank you so much!  That solves a huge problem for me.  Awesome; you rock!  😃

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×