I'm creating this site http://pmgoalkeeperacademy.com/wordpress/ and am running into a big problem! There is 2 descriptions in the "Product" page, 1 above the tabs and 1 inside the tabs. I need to get the text color in the "tab" section to black. I have found out that if I change the colour of the body text that effects the tab but this is where the problem is. If I make the text colour black I can't see the text above it and if I make it white I can't see the text below it.
I need a way to separate the styling for the p tags.
Thank you!
Without more references/fiddles provided you shouldn't expect this to work site-wide, but I think adding the following to your stylesheet should solve the issue:
body.single-product div.panel.entry-content p { color: #000 }
Related
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!
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.)
I need your help.
The Title in the green Box "News" appears right under this Link.
http://www.mjart.ch/category/news/
But because of this weird Template I'm using, there are sometimes some imperfections. On this Site here
http://www.mjart.ch/portfolio/
the Green title seems to disappear behind the padding border. I really don't know why.
What I found out is that there are 2 different CSS styles. The first one that works is a .blog-title and the second one is a .single-title. But both are same styled. I would be happy about some help.
Hi if you dont want to change the structure of the template you can add this css rules
.page-id-21 .single-page{
margin:0;
}
.page-id-21 .single-page .single-content{
margin-left: 25px;
}
I added a .page-id-21 class, otherwise in the contact page you will add a margin.
This can be a solution, another is to search the correct template page, if it's a premium plugin it will have it, and you dont need to add the css rules.
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).