I am new to CSS and have an issue on my current project. I am sure there is a simple solution and it would be great to get some ideas to solve the problem.
I designed a Website with a navigation on top by using CSS. The different sites in the navigation have the same structure centrally "steered" by the CSS code. The only difference is the background-image per site which I changed by the body class:
body.Site1 {
background-image: url(Picturewithdarkbackground.jpg);
}
body.Site2 {
background-image: url(Picturewithwhitebackground.jpg);
}
Problem: The navigation text color in the header for one specific html site (with dark background) can hardly be seen due to the black text. My intention is to change the black text color in the Navigation only for this one specific Html site to white text color.
I have tried to change the header color but it is not working, it should only change it for the site with the black background (Site1) see below ->
body.header.Site1 {
color: white;
}
header.Site1 {
color: white;
}
How can I change the text color in the Navigation header for one specific html site?
Any simple Idea?
Thanks for support!!!
You seem to have added the "Site1 / Site2" class to the body.
So to change the header color for the specific site your CSS will have to look something like this:
body.Site1 header {
color: white;
}
Also, .header or header? Is it a class or a tag?
You have your order mixed up in your css. The Site1 should go before the header and after the body
Amend it to body.Site1 header{color:white;} (leave a gap between Site1 and header as header is a standalone tag, not a class belonging to Site1). Then it should work.
Good luck!
p.s. a footnote, if you can avoid using a picture as a background (i.e. if it's just one plain dark colour, not an image), then you'd be better off finding out what that colour is and using the appropriate hex code. It would save on loading time. Just a tip!
Related
I made a transparent menu with white text on it and when we hover it the whole topbar becomes white and the text becomes invisible because of the same color.
I want to change the font colors to black of all the items in the columns when we hover anywhere on the top bar.
I am using elementor.
This is my website:
http://ha123.epizy.com
Please suggest if there is a plugin for this or any code. As a newbie I would be really happy to learn from you guys.
Thanks.
You could solve this using custom CSS code. If you use Elementor Pro, you could put this CSS inside of the plugin somewhere, but if not you can just add it either in the Customizer in Wordpress, or in a custom (child) theme.
Something like this could work in your case:
.elementor-widget-ekit-nav-menu:hover .elementskit-navbar-nav > li > a {
color: black;
}
You might actually also be able to solve this using Elementor itself in the style settings somewhere, but that depends on how everything is set up and which elements you are using.
I have literally no html/css experience and hence I solicit your help with the following.
I am using a shiny dashboard with a default sidebar. I tried to change the background color and the font color of the sidebar using the following line of code inside the dashboardBody:
tags$head(tags$style(HTML('.skin-black .main-sidebar {color: #000000; background-color: #FFB6C1;}')))
What happened was that the new sidebar has a background color of #FFB6C1, which I intended to. But the font color in the sidebar didn't change into black and it is still white! Any suggestion?
Thanks a lot
San
I came across an example that helped me solving the issue. http://journocode.com/2016/04/04/r-first-web-application-shiny/
Accordingly, the problem was solved by used:
label = HTML('<p style="color:black;">Maximum number of suggestions</p>')
in order to depict the color of the label in black instead of white color obtained when using only:
label = "Maximum number of suggestions"
Of course both were arguments of the selectInput object.
Thanks KH for the help and of course thanks MARIE-LOUISE TIMCKE for your amazing post.
Ciao
Your CSS selector may not be targeting text elements, rather a sidebar div. Assuming your text elements are under the .main-sidebar class, this should/may work. Just replace ELEMENT with whatever HTML tag your text is enclused in, like
.skin-black .main-sidebar ELEMENT {
color: #000000;
.skin-black .main-sidebar {
background-color: #FFB6C1;
}
Whitespace does not matter.
Similar to #Kasper's answer, but to directly embed into shiny code:
dashboardBody(
tags$head(
#in line styling
tags$style(HTML(
#siderbar background
'.skin-blue .main-sidebar {
background-color: white;}',
#siderbar text color
'.skin-blue .main-sidebar .sidebar{
color: #red;}'
)
)
)
Note that
although it changes the style of sidebar, the code is within dashboardBody().
depending on your current dashboard skin color, you need to change the ".skin-blue" (blue is default) to e.g. ".skin-black" as needed
for changing font color, it is essential to have ".sidebar" after ".main-sidebar". ".sidebar" basically is the ELEMENT mentioned by #Kasper. (To locate such elements, use Developer tools in your chrome browser, and inspect everything until you can locate the precise block of html code, and use the ELEMENTs after "class=" for this purpose.)
My CSS looks like:
.small, small:hover { color: #000000; }
My HTML looks like:
<small>Small Text</small>
<small>Small Text Link</small>
I'm trying to style the link in small i know its probably a simple problem but it colors the whole text and not just the link. Can anyone point me in right direction?
I'm using bootstrap so i don't want to change the color of a on its own.
You can specify that css rules for small element should be applied only if it is inside link (a element):
a small, a small:hover { color: #000000; }
By the way, there is no point in providing the same rules for a small and a small:hover, just a small should be enough.
I use Wordpress and Shortcodes Ultimate, and I'm currently using a shortcode named "service". It displays a text, with a title and an icon.
My purpose is to change the background color and the text color when the mouse is over the service area. I analyzed the HTML code of my page and found that there were two DIV elements for the "service" shortcode : su-service-title, su-service-content.
So, in my CSS file I wrote :
.su-service-content:hover, .su-service-title:hover{
background-color: #2680BE;
color: white;
}
The background correctly displays in both title and content elements, but the white text only displays properly in the title : the content text color does not change. The style title used for the content text is h3.
Here is the page I'm working on :
http://www.cirnu.com/agence-web-corse/
Thank you for you help
In the css of your template there is already a general styling rule for the color of h3. You should rather specify your selector a bit more in order to overrride this:
.su-service-content:hover h3, .su-service-title:hover {
background-color: #2680BE;
color: white;
}
You could try to do it inline as well, just like regular html
<h3 style="color:white;">text</h3>
It works for other shortcodes, same plugin
I am currently building a website and as soon as I added a link <a> tag to a <p> word, it becomes transparent. There are two links on the main page, both are coded exactly the same, but one of the links is transparent? The html passes validation and so does the css. If I add the old school <font color> html property within the <a> the color shows up, but the words break apart on different lines. I know this way is obsolete, but no CSS is working right now? Help?
Make sure that the background color is not the same as the hyperlink colors.
For kicks, try this: <font face="verdana" color="green">[your-entire-hyperlink-code]</font>
That's not how it should be done, but just to test it. If you see text, then your background color and hyperlink color are the same and need to be changed.
Try adding a CSS selector for <a> tags within <p> tags. Something like the following:
p a {
color: #000;
}
p a:hover {
color: #1c1c1c;
}
This should make any <a> black by default, and a dark grey on hover. If this doesn't work, try disabling all styles save for the default browser style-sheet (like Hakre said).